我通过drawImage方法在画布上绘制图像，它绘制图像但是当任何事件被调用时变成空白并消失。我尝试了不同的方法，但没有成功。我想在画布上显示图像并且不会消失，因为我将此画布包含在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>
答案 0 :(得分：3)
选中Fiddle。
您遇到此问题是因为您在上下文中绘制它而不是将其添加到canvas对象。因此，在上下文中绘制后，使用ctx.getImageData(0, 0, img.width, img.height);获取该上下文数据之后，创建一个canvas元素并放置该图像数据c.getContext('2d').putImageData(data, 0, 0);，然后从该画布图像数据创建一个fabricjs图像对象。
* Crossorigin问题是如此小提琴无效，您可以在local server
中查看答案 1 :(得分：1)
工作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>