drawImage在画布上绘制图像，但在任何事件后它消失图像fabricjs

我通过drawImage方法在画布上绘制图像，它绘制图像，但是当任何事件被调用时变为空白并消失。我尝试了不同的方式，但没有成功。我想在画布上显示图像并且不会消失，因为我将此画布convas到dataUrl，它们变成空白。drawImage在画布上绘制图像，但在任何事件后它消失图像fabricjs

My working Link

请人谁知道请指导我在哪里，我错了。以下是我的代码。

<!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'}); 
 
\t canvas.renderAll(); 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t $(document).on('click','#clickme',function(){ 
 
\t var imagedatafinal = canvas.toDataURL('image/png'); 
 
\t console.log(imagedatafinal); 
 
\t $('#curveImg').attr('src',imagedatafinal); 
 
\t var imgdatafinal = imagedatafinal.replace(/^data:image\/(png|jpg);base64,/, ""); 
 
\t \t \t \t //ajax call to save image inside folder 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t \t url: '../save_image.php', 
 
\t \t \t \t \t data: { 
 
\t \t \t \t \t \t imgdata:imgdatafinal 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t type: 'post', 
 
\t \t \t \t \t success: function (response) { 
 
\t \t \t \t \t $('#curveImg').attr('src',response); 
 
\t \t \t \t \t console.log(response); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t }); 
 
\t 
 
</script> 
 
</body> 
 
</html>

来源

2017-07-26 Doulat Khan

检查这个Fiddle。

您正在解决此问题，因为您正在上下文中绘制该对象，并且未将其添加到画布对象。因此，在绘制上下文后，使用ctx.getImageData(0, 0, img.width, img.height);获取该上下文数据之后，创建一个画布元素并将该图像数据c.getContext('2d').putImageData(data, 0, 0);从该画布图像数据创建一个fabricjs图像对象。

* Crossorigin问题是有这么捣鼓不工作，你可以在你local server

来源

2017-07-26 13:52:13 Durga

耶非常感谢它工作正常。 –

工作fiddle

检查这个你要对面料帆布下面添加图像。

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>

来源

2017-07-26 13:52:37

drawImage在画布上绘制图像，但在任何事件后它消失图像fabricjs

回答

相关问题