扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >fabric.js实现diy明信片功能
  • 563

0
分享到

fabric.js实现diy明信片功能

2024-04-02 19:04:59 563人浏览 安东尼
摘要

本文实例为大家分享了fabricjs实现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>

实现效果

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: fabric.js实现diy明信片功能

本文链接: https://lsjlt.com/news/121901.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • fabric.js实现diy明信片功能
    本文实例为大家分享了fabricjs实现diy明信片功能的具体代码，供大家参考，具体内容如下 前言 要求需要添加，拷贝，删除，双指放大缩小。 提示：以下是本篇文章正文内容，下面案例可...
    99+
    2024-04-02
  • 使用fabric.js怎么实现一个明信片功能
    使用fabric.js怎么实现一个明信片功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、fabric.js是一个很好用的 canvas 操作插件示例：pandas 是...
    99+
    2023-06-14
  • iOS实现微信分享多张图片功能
    前言 微信分享到朋友圈，可分享的类型有：文字类型、图片类型、音乐类型、视频类型和网页类型，但是我们在做图片分享的时候发现微信给的API只能分享一张图片，达不到一些APP的需求，而产品...
    99+
    2022-06-03
    iOS 微信分享
  • 微信小程序实现图片裁剪功能
    微信小程序实现图片裁剪功能随着微信小程序的快速发展，越来越多的开发者开始探索小程序的潜力。其中，图片处理功能是小程序中常见的需求之一。本文将介绍如何在微信小程序中实现图片裁剪功能，并提供具体的代码示例，帮助开发者快速实现这一功能。准备工作在...
    99+
    2023-11-21
    图片 微信小程序 裁剪
  • 微信小程序实现图片上传功能
    微信小程序实现图片上传功能随着移动互联网的发展，微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景，还支持开发者自定义功能，其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能，并提供具体的代码...
    99+
    2023-11-21
    微信小程序 图片上传 功能实现
  • 微信小程序实现图片预览功能
    微信小程序是一种轻量级的应用程序，可以在微信中直接使用，具有跨平台、操作方便等优点。在开发过程中，经常会遇到需要实现图片预览功能的需求。本文即将给出一个具体的代码示例，教你如何在微信小程序中实现图片预览功能。首先，我们需要在微信小程序的页面...
    99+
    2023-11-21
    图片预览 微信小程序
  • CSS实现鼠标点击改变图片透明度功能
    这篇文章主要介绍“CSS实现鼠标点击改变图片透明度功能”，在日常操作中，相信很多人在CSS实现鼠标点击改变图片透明度功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实...
    99+
    2024-04-02
  • 微信小程序实现上传图片的功能
    本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下 效果图 WXML <view class="img-wrap"> <vie...
    99+
    2024-04-02
  • vue+js实现微信上传图片选择功能
    本文实例为大家分享了vue+js实现微信上传图片选择的具体代码，供大家参考，具体内容如下 需求：实现微信发送图片或发朋友圈选择图片功能 可实现选后点击后 选择图片标记值自减或自增 最...
    99+
    2024-04-02
  • 微信小程序实现上传图片小功能
    本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下 用到的apiwx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频 功能：点击上传图...
    99+
    2024-04-02
  • 微信小程序图片裁剪功能的实现
    文章目录 图片上传与处理图片尺寸适配图片显示与裁剪框裁剪框的拖动与缩放增加canvas并裁剪图片保存图片到相册总结 在之前的博文中，已经介绍了如何使用在前端开发中，实现较方便自由的图片裁剪功能，可见博文： 如何一步步实现图片...
    99+
    2023-08-17
    微信小程序 小程序 前端 javascript
  • HTML5如何实现微信拍摄上传照片功能
    这篇文章主要介绍HTML5如何实现微信拍摄上传照片功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前端代码$(':file').on('change'...
    99+
    2024-04-02
  • 微信小程序图片上传功能怎么实现
    这篇文章主要介绍“微信小程序图片上传功能怎么实现”，在日常操作中，相信很多人在微信小程序图片上传功能怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序图片上传功能怎么实现”的疑惑有所帮助！接下来...
    99+
    2023-06-30
  • 使用微信小程序实现图片拖拽功能
    使用微信小程序实现图片拖拽功能引言:随着微信小程序的流行，更多的开发者开始探索小程序的各种功能和特性。其中，实现图片拖拽功能是一项常见的需求。本文将介绍如何使用微信小程序的API和组件，实现图片拖拽的效果，并提供具体的代码示例。一、设计思路...
    99+
    2023-11-21
    图片 微信小程序 拖拽
  • 使用微信小程序实现图片拼接功能
    标题：微信小程序实现图片拼接功能随着移动设备的普及和摄影爱好的兴起，人们对于图片处理的需求也越来越多。本文将介绍如何使用微信小程序来实现图片拼接功能，并提供具体的代码示例。一、技术准备在开始编写代码之前，我们需要准备以下技术：微信开发者工具...
    99+
    2023-11-21
    微信小程序 实现 图片拼接
  • fabric.js图层功能独立显隐 添加 删除 预览实现详解
    目录引言原理效果预览本次demo实现：效果图：下期预告小Tips完整代码目录：index.html代码sketchpad.js代码引言 去年经历了个虚拟人的项目，其中我参与了前端的部...
    99+
    2023-05-18
    fabric.js图层功能 fabric.js图层独立显隐 fabric.js图层添加删除预览
  • Java实现ModbusTCP通信功能
    目录资料关于Java的开源库ModbusTCP协议仿真软件使用jlibmodbus使用modbus-master-tcpmaven依赖编写modbus tcp写入案例评价感受一个项目...
    99+
    2024-04-02
  • 微信小程序图片压缩功能的实现方法
    微信小程序图片压缩功能的实现方法 :1、在 wx.chooseImage 接口选择相机图片。2、在 wx.getImageInfo 接口获取图片信息。3、计算压缩比例和最终图片的长宽。4、创建 canvas 绘制最终图片。5、在 wx.ca...
    99+
    2024-04-02
  • 微信小程序图片上传功能的实现方法
    目录前言首先是静态布局和样式部分下面是js的部分，我已详细备注～～～总结前言 最近做了个小程序，涉及到了图片上传的功能，今天给大家详细介绍下如何实现小程序图片上传，话不多说先上代码 ...
    99+
    2024-04-02
  • 微信小程序实现图片裁剪并上传功能
    微信小程序实现图片裁剪并上传功能随着微信小程序的快速发展，越来越多的开发者开始关注微信小程序的开发技巧和功能实现。其中，图片裁剪并上传功能是一个常见的需求，本文将介绍如何在微信小程序中实现图片裁剪并上传的功能，并提供具体的代码示例。一、功能...
    99+
    2023-11-21
    微信 小程序 图片裁剪 上传
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作