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

代码语言：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 black',
       left: 100,
       top: 100
   }));



   function preview(){
     
       document.querySelector('#preview').src = canvas.toDataURL();
   }
   function changebg() {
    
       canvas.setBackgroundImage("//repo.bfw.wiki/bfwrepo/image/5fc2f17ea86c4.png", canvas.renderAll.bind(canvas), {
           width: 600,
           height: 600
       });


   }
function importjson(){
    canvas.loadFromJSON('{"version":"3.6.4","objects":[{"type":"i-text","version":"3.6.4","originX":"left","originY":"top","left":300.36,"top":214.5,"width":80,"height":45.2,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"文字","fontSize":40,"fontWeight":"normal","fontFamily":"arial black","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{}},{"type":"image","version":"3.6.4","originX":"left","originY":"top","left":63.02,"top":190.6,"width":217,"height":103,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.9,"scaleY":0.9,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看