我想保存我的画布到img。我有这样一个函数:
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
它给出了错误:
Uncaught SecurityError:未能在“HTMLCanvasElement”上执行“toDataURL”:受污染的画布可能无法导出。
我该怎么办?
当前回答
对于任何在应用服务器跨源设置后仍然在S3中遇到相同问题的人来说，这可能是浏览器缓存问题。 所以你需要确保禁用缓存并再次测试，你可以从浏览器的dev-tools ->网络选项卡->单击禁用现金选项->重试:
其他回答
在我的情况下，我从我的桌面进行测试，即使在本地保存图像到子文件夹后，也有CORS错误。
解决方案:
移动文件夹到本地服务器WAMP在我的情况下。从本地服务器完美工作。
注意: 只有在本地保存图像时才有效。
对于任何在应用服务器跨源设置后仍然在S3中遇到相同问题的人来说，这可能是浏览器缓存问题。 所以你需要确保禁用缓存并再次测试，你可以从浏览器的dev-tools ->网络选项卡->单击禁用现金选项->重试:
我使用useCORS: true选项解决了这个问题
html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
var imgBase64 = canvas.toDataURL();
// console.log("imgBase64:", imgBase64);
var imgURL = "data:image/" + imgBase64;
var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
});
这个可以在laravel中顺利工作。
首先，您需要将受污染的画布转换为blob。在此之后，您可以上传一个blob来服务并将其保存为图像。在ajax调用中返回图像URL。
这是一个上传画布blob的ajax调用。
$("#downloadCollage").click(function(){
canvas.toBlob(function(blob){
var formDataToUpload = new FormData();
formDataToUpload.append("_token", "{{ csrf_token() }}");
formDataToUpload.append("image", blob);
$.ajax({
url:"{{ route('selfie_collage_upload') }}",
data: formDataToUpload,
type:"POST",
contentType:false,
processData:false,
cache:false,
dataType:"json",
error:function(err){
console.error(err);
},
success:function(data){
window.location.href= data.url;
},
complete:function(){
}
});
},'image/png');
link.click();
});
我还通过添加useCORS: true解决了这个错误，在我的代码中像-
html2canvas($("#chart-section")[0], {
useCORS : true,
allowTaint : true,
scale : 0.98,
dpi : 500,
width: 1400, height: 900
}).then();
