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 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,iVBORw0KGgoAAAANSUhEUgAAANkAAABnCAYAAACNfudzAAAAAXNSR0IArs4c6QAAHQZJREFUeF7tXWeUXGd5fqf3slp1WVqtuiwbU0yxg2MCxKEEjAEXajDVkHJyyOFHcpL/4SR0UiC2SSi2CQEMBGOMjfFxwTbGdpDV5ZW0Kittn97vzXme787szO6d2Vlp7xb0zTk61rFmvnvve7/ne9vzvq/LvHuHKfqjJaAl4JgEXBpkjslWL6wlQAlokOmNoCXgsAQ0yBwWsF5eS0CDTO8BLQGHJaBB5rCA9fJaAhpkeg9oCTgsAQ0yhwWsl9cS0CDTe0BLwGEJaJA5LGC9vJaABpneA.........完整代码请登录后点击上方下载按钮下载查看
网友评论0