drawImage在画布上绘制图像，但是在发生任何事件后它都会消失图像fabricjs
[英]drawImage draw the image on canvas but after any event it disappear image fabricjs
问题描述
我通过drawImage方法在画布上绘制图像，它绘制图像，但是当调用任何事件时，该图像将变为空白并消失。 我尝试了不同的方法，但没有成功。 我想在画布上显示图像而不希望消失，因为我将这个画布拖到dataUrl上，而dataUrl变成空白。
请任何知道的人指导我哪里出问题了。 下面是我的代码。
<!DOCTYPE html> <html> <head> <title>Canvas.dataURL tainted(polluted) Issue</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/js/bootstrap-slider.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/jquery.liteuploader.js"></script> <script type="text/javascript" src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/custom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/cartjs/cart.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/fabric-js/custom/fabricExtensions.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/bgrins-spectrum/spectrum.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/fabric.curvedText.js"></script> </head> <body> <style> .canvas-container{display:inline-block;vertical-align:middle;} </style> <canvas id="canvas" height=758 width=497 style="border:1px solid lightgrey;display:inline-block;"></canvas> <img id="curveImg" src="http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png" alt="" style="display:inline-block;vertical-align:middle;"> <button type="button" id="clickme">Click Me!</button> <script> var canvas = new fabric.Canvas('canvas'); var offsetY=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0] var ctx = canvas.getContext("2d"); var immg = 'http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png'; fabric.util.loadImage(immg, function(img) { for(var x=0;x<offsetY.length;x++){ ctx.drawImage(img, // clip 1 pixel wide slice from the image x,0,1,img.height, // draw that slice with a y-offset x,offsetY[x],1,img.height ); } },null, {crossOrigin:'anonymous'}); canvas.renderAll(); $(document).on('click','#clickme',function(){ var imagedatafinal = canvas.toDataURL('image/png'); console.log(imagedatafinal); $('#curveImg').attr('src',imagedatafinal); var imgdatafinal = imagedatafinal.replace(/^data:image\\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: '../save_image.php', data: { imgdata:imgdatafinal }, type: 'post', success: function (response) { $('#curveImg').attr('src',response); console.log(response); } }); }); </script> </body> </html>
2 个解决方案
解决方案1
3 已采纳 2017-07-26 13:52:13
检查这个小提琴 。
之所以会出现此问题，是因为您是在上下文中绘制它，而不是将其添加到画布对象。 因此，在绘制上下文之后，您可以使用ctx.getImageData(0, 0, img.width, img.height);获得上下文数据ctx.getImageData(0, 0, img.width, img.height); 之后，创建一个canvas元素并将该图像数据c.getContext('2d').putImageData(data, 0, 0); 然后根据该画布图像数据创建一个fabricjs图像对象。
* Crossorigin问题在那里使提琴无法正常工作，您可以在本地服务器中检查
解决方案2
1 2017-07-26 13:52:37
工作提琴
您必须如下所示在织物画布上添加图像。
var imgbase64 = new fabric.Image(img, {})
canvas.add(imgbase64);
然后它将起作用。 只需确保在您的本地服务器上进行检查即可，因为这将引发CROS错误。 我已经更改了图像src，使其能够从您的样本中获取CORS错误，从而使其正常工作。
var canvas = new fabric.Canvas('canvas'); var offsetY = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0] var ctx = canvas.getContext("2d"); var immg = 'http://i.imgur.com/3tU4Vig.jpg'; var img = new Image(); img.crossOrigin = "anonymous"; img.src = immg; img.onload = function() { var imgbase64 = new fabric.Image(img, { width: 400, height: 500 }) canvas.add(imgbase64); canvas.deactivateAll().renderAll(); } canvas.renderAll(); $(document).on('click', '#clickme', function() { var imagedatafinal = canvas.toDataURL('image/png'); console.log(imagedatafinal); $('#curveImg').attr('src', imagedatafinal); var imgdatafinal = imagedatafinal.replace(/^data:image\\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: '../save_image.php', data: { imgdata: imgdatafinal }, type: 'post', success: function(response) { $('#curveImg').attr('src', response); console.log(response); } }); });
<!DOCTYPE html> <html> <head> <title>Canvas.dataURL tainted(polluted) Issue</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/js/bootstrap-slider.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/jquery.liteuploader.js"></script> <script type="text/javascript" src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/custom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/cartjs/cart.js"></script> <script src="https://technology-architects.com/daulat/customizer_assets/fabric-js/custom/fabricExtensions.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/bgrins-spectrum/spectrum.js"></script> <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/fabric.curvedText.js"></script> </head> <body> <style> .canvas-container { display: inline-block; vertical-align: middle; } </style> <canvas id="canvas" height=758 width=497 style="border:1px solid lightgrey;display:inline-block;"></canvas> <img id="curveImg" alt="" style="display:inline-block;vertical-align:middle;"> <button type="button" id="clickme">Click Me!</button> </body> </html>
FabricJS canvas drawImage不显示图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.