fabric.js实现diy明信片功能

本文实例为大家分享了fabricjs实现diy明信片功能的具体代码,供大家参考,具体内容如下

前言

要求需要添加,拷贝,删除,双指放大缩小。

提示:以下是本篇文章正文内容,下面案例可供参考

一、fabric.js是一个很好用的 canvas 操作插件

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

二、代码示例

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
<title>diy</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/fabric.js"></script>
<script src="./js/customiseControls.min.js"></script>
</head>
<style>
  body{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
  }
  .end{
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 20px;
    background-color: #000000;
    color: #ffffff;
    font-size: 12px;
    line-height: 20px;
    z-index: 9999;
  }
  .canvasimg{
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 20px;
    background-color: #000000;
    color: #ffffff;
    font-size: 12px;
    line-height: 20px;
    z-index: 9999;
  }
  .canvasimg input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  #inline-btn{
    position: fixed;
    opacity: 0;
    z-index: 999;
  }
  #addinline-btn{
    opacity: 0;
    position: fixed;
    z-index: 999;
  }
  .canvassrc{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
</style>
<body>
  <div class="canvasimg"><input type="file" name="" id="canvasimg" class="canvasimgadd" type="file" accept="image/*" onchange="selectFileImage(this);" >添加图片</div>
  <div class="end" onclick="linkcanvas()">生成图片</div>
  <button id="inline-btn" onclick="canvasonclick()">删除图片按钮</button>
  <button id="addinline-btn" onclick="copy()">复制图片按钮</button>
  <canvas id="c"></canvas>
</body>
</html>
<script>
  //参考链接
  //文末查看比较详细的API中文解释
  //http://fabricjs.com/ fabric.js官网

  //diy功能需要有复制功能 删除功能 放大缩小移动旋转

  //添加新图片
  function selectFileImage(fileObj){
    var file = fileObj.files['0'];
    var reader = new FileReader();
    reader.readAsDataURL(file)
    reader.onload = function (e){
      fabric.Image.fromURL(e.target.result, function (img) {
        img.scale(1).set({
          left: webwidth - (webwidth / 2),//图片左右居中
          top: webheight - (webheight / 2), //图片上下居中 ,屏幕高度-(图片高度/2)的总值/2
          angle: 0, //角度为0
          originX: 'center',
          originY: 'center',
        });
        //图片默认宽度充满屏幕一边留白20 高度自适应
        img.scaleToWidth(webwidth - 40)
        canvas.add(img).setActiveObject(img);
        //清除线条
        img.hasBorders = false;
        //自定义图片功能按钮 , 隐藏多余功能按钮,只保留4个角的按钮
        canvas.forEachObject(function (em) {
          em['setControlVisible']('mtr', false);
          em['setControlVisible']('mt', false);
          em['setControlVisible']('ml', false);
          em['setControlVisible']('mb', false);
          em['setControlVisible']('mr', false);
          em['setControlVisible']('mt', false);
        })
      });
    }
  }

  // 删除按钮
  var btn = document.getElementById('inline-btn')
  // 添加按钮
  var addbtn = document.getElementById('addinline-btn')

  // 获取屏幕高宽度
  var webwidth = $(window).width()
  var webheight = $(window).height()
  //创建画板
  var canvas = new fabric.Canvas('c');
  //canvas默认充满屏幕
    canvas.setWidth(webwidth)
    canvas.setHeight(webheight)
    //导入图片
    fabric.Image.fromURL('./imgs/2.jpg', function (img) {
      img.scale(1).set({
        left: webwidth - (webwidth/2),//图片左右居中
        top: webheight-(webheight/2), //图片上下居中 ,屏幕高度-(图片高度/2)的总值/2
        angle: 0, //角度为0
        originX: 'center',
        originY: 'center',
      });
      //图片默认宽度充满屏幕一边留白20 高度自适应
      img.scaleToWidth(webwidth-40)
      canvas.add(img).setActiveObject(img);
      //清除线条
      img.hasBorders = false;
      //自定义图片功能按钮 , 隐藏多余功能按钮,只保留4个角的按钮
      canvas.forEachObject(function(em){
        em['setControlVisible']('mtr', false);
        em['setControlVisible']('mt', false);
        em['setControlVisible']('ml', false);
        em['setControlVisible']('mb', false);
        em['setControlVisible']('mr', false);
        em['setControlVisible']('mt', false);
      })
    });

    //取消多选
    canvas.selection = false;
    //新建图层不出现在顶层
    canvas.preserveObjectStacking = true;
    //注:要自定义修改按钮功能需要引入fabric的另一个叫customiseControls的JS插件 否则无法操作
    //全局修改4个按钮的功能
    fabric.Canvas.prototype.customiseControls({
      bl: {
        action: 'rotate' //添加图片旋转功能
      },
      // only is hasRotatingPoint is not set to false
    }, function () {
      canvas.renderAll();
    });  

    //因为默认的按钮样式不是我们想要的 所以需要自定义一些icon在上面
    fabric.Object.prototype.customiseCornerIcons({
      tl: {
        icon: './img/+1@2x.png', //图片路径
        cornerSize: 70,   //按钮点击范围 相当于css的padding属性
        settings: {
          cornerSize: 25 //icon大小
        },
      },
      tr: {
        icon: './img/X@2x.png',
        cornerSize: 70,
        settings: {
          cornerSize: 25
        },
      },
      bl: {
        icon: './img/xuanzhuan@2x.png',
        cornerSize: 70,
        settings: {
          cornerSize: 25
        },
      },
      br: {
        icon: './img/fangda@2x.png',
        cornerSize: 70,
        settings: {
          cornerSize: 25
        },
      },
    }, function () {
      canvas.renderAll();
    }); 

    //按钮跟随图片定位
    function positionBtn(obj) {
      //获取当前选中图片单位参数
      var absCoords = canvas.getAbsoluteCoords(obj);
      btn.style.width = '30px';
      btn.style.height = '30px';
      btn.style.opacity = '0';
      btn.style.left = (absCoords.right - 30 / 2) + 'px';
      btn.style.top = (absCoords.top - 30 / 2) + 'px';

      addbtn.style.width = '30px';
      addbtn.style.height = '30px';
      addbtn.style.opacity = '0';
      addbtn.style.left = (absCoords.left - 30 / 2) + 'px';
      addbtn.style.top = (absCoords.leftTop - 30 / 2) + 'px';
    }

    fabric.Canvas.prototype.getAbsoluteCoords = function (object) {
      return {
        right: object.aCoords.tr.x + this._offset.left,
        top:object.aCoords.tr.y + this._offset.top,
        left: object.aCoords.tl.x + this._offset.left,
        leftTop: object.aCoords.tl.y + this._offset.top,
      };
    }

    //删除当前选中图片
    function canvasonclick(){
      var t = canvas.getActiveObject()
      canvas.remove(t);
    }

    //拷贝当前选中图片
    function copy(){
      var _self = this;
      canvas.getActiveObject().clone(function (cloned) {
        _self.paste(cloned);
        canvas.discardActiveObject().renderAll()
      })
    }
    function paste(_clipboard){
      console.log(_clipboard)
      var t = canvas.getActiveObject();
      // 再次克隆,这样你就可以复制多个副本。
      t.clone(function (clonedObj) {
        canvas.discardActiveObject();
        clonedObj.set({
          left: clonedObj.left + 20,
          top: clonedObj.top + 20,
          evented: true,
          hasBorders:false
        });
        if (clonedObj.type === 'activeSelection') {
          // 活动选择需要对画布的引用。
          clonedObj.canvas = canvas;
          clonedObj.forEachObject(function (obj) {
            canvas.add(obj);
            canvas.forEachObject(function (em) {
              em['setControlVisible']('mtr', false);
              em['setControlVisible']('mt', false);
              em['setControlVisible']('ml', false);
              em['setControlVisible']('mb', false);
              em['setControlVisible']('mr', false);
              em['setControlVisible']('mt', false);
            })
          });
          // 解决不可选择的问题
          clonedObj.setCoords();
        } else {
          canvas.add(clonedObj);
          canvas.forEachObject(function (em) {
            em['setControlVisible']('mtr', false);
            em['setControlVisible']('mt', false);
            em['setControlVisible']('ml', false);
            em['setControlVisible']('mb', false);
            em['setControlVisible']('mr', false);
            em['setControlVisible']('mt', false);
          })
        }
      });
    }

    var store = {}
    //计算平均值
    var getDistance = function (start, stop) {
      return Math.hypot(stop.x - start.x, stop.y - start.y);
    };    

    //监听positionBtn事件 鼠标以上点击图片时移动时触发我们自定义的复制按钮和删除按钮跟随图片定位以及双指放大缩小功能
    canvas.on('mouse:down',function(options){
      //判断是否点击到了图片单位
      if(options.target){
        //运行事件
        positionBtn(options.target);

        //双指放大缩小
        store.pageX = options.e.changedTouches[0].clientX
        store.pageY = options.e.changedTouches[0].clientY
        if (options.e.changedTouches.length == 2) {
          store.pageY2 = options.e.changedTouches[1].clientY
          store.pageX2 = options.e.changedTouches[1].clientX
        }
        store.originScale = options.target.scaleX || 0.5;
        store.originleft = options.target.left;
        store.origintop = options.target.top;
      }
    });
    canvas.on('mouse:move',function(options){
      if(options.target){
        positionBtn(options.target);
        if (options.e.changedTouches.length == 2) {
          if (!store.pageX2) {
            store.pageX2 = options.e.changedTouches[1].clientX
          }
          if (!store.pageY2) {
            store.pageY2 = options.e.changedTouches[1].clientY
          }
          var zoom = getDistance({
            x: options.e.changedTouches[0].clientX,
            y: options.e.changedTouches[0].clientY
          }, {
            x: options.e.changedTouches[1].clientX,
            y: options.e.changedTouches[1].clientY
          }) /
            getDistance({
              x: store.pageX,
              y: store.pageY
            }, {
              x: store.pageX2,
              y: store.pageY2
            });
          var newScale = store.originScale * zoom;
          if (newScale > 3) {
            newScale = 3;
          }
          options.target.scaleX = newScale;
          options.target.scaleY = newScale;
          canvas.renderAll();
        }
      }
    });
    canvas.on('mouse:up',function(options){
      if(options.target){
        positionBtn(options.target);
        store.pageY = 0
        store.pageX = 0
        store.pageY2 = 0
        store.pageX2 = 0
        store.originScale = options.target.scaleX
        store.originleft = options.target.left
        store.origintop = options.target.top
      }
    }); 

    //生成明信片
    function linkcanvas(){
      let xheight = $('#c').height()
      let xwidth = $('#c').width()
      canvas.setBackgroundColor('rgba(255, 255, 255, 1)', canvas.renderAll.bind(canvas));
      var exportedArt = this.canvas.toDataURL({
        format: "jpeg",
        quality: 1.0,
        multiplier: 2.4,
        left: 0,
        top: 0,
        width: xwidth,
        height: xheight,
      });
      $('body').append(`<img class="canvassrc" src="${exportedArt}"/>`)
    }

</script>

实现效果

总结

具体一些方法知识点建议大家可以去参考一下这篇文章

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-03-17

canvas操作插件fabric.js使用方法详解

fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点: //1: 获得画布上的所有对象: var items = canvas.getObjects(); //2: 设置画布上的某个对象为活动对象. canvas.setActiveObject(items[i]); //3:获得画布上的活动对象 canvas.getActiveObject() //4:取消画布中的所有对象的选中状态. canvas.discardActiveObject(); //5:

jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解 1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">&l

Bootstrap树形菜单插件TreeView.js使用方法详解

jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

Js视频播放器插件Video.js使用方法详解

Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"

文本溢出插件jquery.dotdotdot.js使用方法详解

插件下载地址:https://github.com/FrDH/jQuery.dotdotdot 引入jQuery.js和jquery.dotdotdot.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dotdotdot.js"><

node.JS二进制操作模块buffer对象使用方法详解

在ES6引入TypedArray之前,JavaScript语言没有读取或操作二进制数据流的机制.Buffer类被引入作为Nodejs的API的一部分,使其可以在TCP流和文件系统操作等场景中处理二进制数据流.现在TypedArray已经被添加进ES6中,Buffer类以一种更优与更适合Node.js用例的方式实现了Uint8Array. Buffer对象概述 由于应用场景不同,在Node中,应用需要处理网络协议.操作数据库.处理图片.接收上传文件等,在网络流和文件的操作中,还要处理大量二进制数据

PHP带节点操作的无限分类实现方法详解

本文实例讲述了PHP带节点操作的无限分类实现方法.分享给大家供大家参考,具体如下: 包含(移动多个节点:移动单个节点:删除多个节点:删除单个节点:新增节点),另附数据库表结构 一.db sql语句 //db used for php无限分类 create table tree( id int(10) not null primary key auto_increment, name varchar(255) not null, lft int(10) not null default 0, rg

Python使用py2neo操作图数据库neo4j的方法详解

本文实例讲述了Python使用py2neo操作图数据库neo4j的方法.分享给大家供大家参考,具体如下: 1.概念 图:数据结构中的图由节点和其之间的边组成.节点表示一个实体,边表示实体之间的联系. 图数据库:以图的结构存储管理数据的数据库.其中一些数据库将原生的图结构经过优化后直接存储,即原生图存储.还有一些图数据库将图数据序列化后保存到关系型或其他数据库中. 之所以使用图数据库存储数据是因为它在处理实体之间存在复杂关系的数据具有很大的优势.使用传统的关系型数据库在处理数据之间的关系时其实很不

Vue官方推荐AJAX组件axios.js使用方法详解与API

Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点: 1.比Jquery轻量,但处理请求不多的时候,可以使用 2.基于Promise语法标准 3.支持nodejs 4.自动转换JSON数据 Axios.js用法 axios提供了一下几种请求方式 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[,

Vue表单验证插件Vue Validator使用方法详解

Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username

Android gradle插件打印时间戳的方法详解

Android中时间戳的详细解释: (1).定义: 时间戳就是根据当前系统时间生成的一组随机数字. (2).作用: 作为对数据唯一性的一种判断依据.避免了重复修改数据所带来的错误! (3).应用: (1).在银行account表中建立时间戳字段timestamp,设定为文本类型varchar. (2).当银行A读取account表中的存款字段时,同时也读取时间戳字段,比如123456. (3).当银行A修改完存款数值后,进行存盘操作时,将先前读取的时间戳123456与当时表中的时间戳进行一次对比