fabric实现从剪贴板粘贴文字或图片拖动旋转缩放排版布局生成图片json效果代码-html代码-BFW代码库

fabric实现从剪贴板粘贴文字或图片拖动旋转缩放排版布局生成图片json效果代码

代码语言：html

所属分类：其他

代码描述：fabric实现从剪贴板粘贴文字或图片拖动旋转缩放排版布局生成图片json效果代码，可以从json导入数据生成设计好的对象。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <style id="jsbin-F">
        canvas{
          border: 1px solid black;
        }
    </style>



    <style>
        canvas{
          border: 1px solid black;
         
        }
        #editor{
             background: url(//repo.bfw.wiki/bfwrepo/image/611b10eb67750.png);
        }
        
    </style>


</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fabric-3.6.6.js"></script>

    <input type="file" id="file">
    <input type="color" value="blue" id="fill" />
    <select id="font">
  <option>arial</option>
  <option>tahoma</option>
  <option>times new roman</option>
</select>
    <button onclick="addText()">添加自定义文字</button>
    <br />
    <div id="editor">
         <canvas id="canvas" width="750" height="550"></canvas>
    </div>
   

    <img id="preview" />
    <button onclick="preview();">导出图片</button>

    <button onclick="changebg();">更换背景图片</button>

    <button onclick="exportjson();">导出json</button> <button onclick="importjson();">导人json</button>

    <script>
        var canvas = new fabric.Canvas('canvas');

   document.getElementById('file').addEventListener("change", function(e) {
       var file = e.target.files[0];
       var reader = new FileReader();
       console.log("reader   " + reader);
       reader.onload = function(f) {
           var data = f.target.result;
           fabric.Image.fromURL(data, function(img) {
               var oImg = img.set({
                   left: 70,
                   top: 100,
                 
                   angle: 0
               }).scale(0.9);
               canvas.add(oImg).renderAll();
               canvas.setActiveObject(oImg);
           });
       };
       reader.readAsDataURL(file);
   });

   $('#fill').change(function() {
       var obj = canvas.getActiveObject();
       if (obj) {
           obj.setFill($(this).val());
       }
       canvas.renderAll();
   });

   $('#font').change(function() {
       var obj = canvas.getActiveObject();
       if (obj) {
           obj.setFontFamily($(this).val());
       }
       canvas.renderAll();
   });

   function addText() {
       var oText = new fabric.IText('文字', {
           left: 100,
           top: 100
       });


       canvas.add(oText);
       canvas.setActiveObject(oText);
       $('#fill, #font').trigger('change');
       oText.bringToFront();
   }


   canvas.add(new fabric.IText('文字', {
       fontFamily: 'arial bla.........完整代码请登录后点击上方下载按钮下载查看