Javascript 无法使用FileSaver.js将结构画布另存为图像

我在代码中包含了Fabric.js和Filesaver.js，但仍然 我在尝试保存结构画布时收到“Uncaught SecurityError:未能在“HtmlCanvaElement”上执行“toBlob”：可能无法导出受污染的画布。”错误

我提到：

有没有办法将画布保存到共享目录位置

/-------------------------------抓住画布---------------------------------------
var canvas=newfabric.canvas（'canvas'）；
canvas.setHeight（window.innerHeight*0.75）；
canvas.setWidth（window.innerWidth*0.75）；
牵引杆接地（）；
//--------------------------图像渲染-------------------------------------------------
功能缺陷背景（）{
fabric.Image.fromURL（'https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg，函数（img）{
img.crossOrigin=“匿名”；
img.scaleToWidth（window.innerWidth*0.75）；
img.刻度高度（窗内高度*0.75）；
canvas.setBackgroundImage（img）；
canvas.renderAll（）；
});
}
//------------------------长方形---------------------------------------------------------
window.addRect=函数（）{
var-box=new fabric.Rect({
左:0,，
排名：0，
笔划：“红色”，
填充：“rgba（255,0,0,4）”，
宽度：50，
身高：50，
});
box.hasRotatingPoint=false；
画布。添加（框）；
}
//---------------------圈-------------------------------------------------------------
window.addCircle=函数（）{
var circle=新结构。circle({
左:0,，
排名：0，
半径：50，
笔划：“绿色”，
填充：'透明'，
});
circle.hasRotatingPoint=false；
canvas.add（圆圈）；
}
//-----------------------线箭头-----------------------------------------------------
window.addArrow=函数（）{
var arrowbox=new fabric.Rect({
左:0,，
排名：0，
笔划：“红色”，
填充：“红色”，
宽度：1，
身高：50，
});
var arrowtriangle=新结构。三角形({
宽度：10，高度：10，填充：“红色”，左侧：-4，顶部：-10
});
var arrowgroup=new fabric.Group（[arrowbox，arrowtriangle]{
左：150，
前100名，
角度：90
});
canvas.add（箭头组）；
}
//-----------------------保存画布---------------------------------------------------------
window.saveCanvas=函数（）{
canvas.getElement（）.toBlob（函数（blob）{
saveAs（blob，annotation.png）；
});
}

圆圈
盒子
箭
保存

我在使用fabric js时也面临同样的问题。我当前的解决方案是使用将canvas元素编码为base64字符串，并将其发送到服务器端代码进行再次解码，然后将其作为图像文件写入。我在服务器端使用PHP

您是否仍面临上述方法的问题？我不确定如何在java中实现，但让我试试。您是否可以就这个问题分享您的php代码？这是我的感谢！谢谢。当我能把它拉上来的时候，我会在这里保持更新。