Javascript drawImage在画布上绘制图像，但在任何事件发生后，它都会消失image fabricjs

我通过drawImage方法在画布上绘制图像，它会绘制图像，但当调用任何事件时，图像将变为空白并消失。我尝试了不同的方法，但没有成功。我希望在画布上显示图像，而不是消失，因为我将此画布转换为变成空白的dataUrl

请任何知道的人告诉我哪里出了问题。 下面是我的代码

Canvas.dataURL受污染（污染）问题
.canvas容器{显示：内联块；垂直对齐：中间；}
点击我！
var canvas=newfabric.canvas（'canvas'）；
var抵销=[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，函数（img）{
对于（var x=0；x检查此项

您之所以会遇到这个问题，是因为您在上下文中绘制，而不是将其添加到画布对象。因此，在上下文中绘制之后，您可以使用
ctx.getImageData（0，0，img.width，img.height）；
在这之后创建一个画布元素，并将该图像数据
c.getContext（'2d'）。putImageData（数据，0，0）然后从画布图像数据创建一个fabricjs图像对象

*交叉原点问题存在，所以小提琴不起作用，您可以在您的
检查中检查此问题

您之所以会遇到这个问题，是因为您在上下文中绘制，而不是将其添加到画布对象。因此，在上下文中绘制之后，您可以使用
ctx.getImageData（0，0，img.width，img.height）；
在这之后创建一个画布元素，并将该图像数据
c.getContext（'2d'）。putImageData（数据，0，0）然后从画布图像数据创建一个fabricjs图像对象

*存在交叉原点问题，因此小提琴无法工作，您可以在工作中检查此问题

您必须在织物画布上添加图像，如下所示

 var imgbase64 = new fabric.Image(img, {})
 canvas.add(imgbase64);

然后它就会工作。只要确保在本地服务器上检查这个，因为这里它会抛出CROS错误。
我已经更改了图像src以使其作为从您的示例中获取CORS错误来工作


var canvas=newfabric.canvas（'canvas'）；
变量偏移量=[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