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

Question

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

我提到：https://www.youtube.com/watch?v=ng8OJ6a-wQY

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

//-----------------------------Getting hold of Canvas---------------------------------------

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(window.innerHeight * 0.75);
canvas.setWidth(window.innerWidth * 0.75);
drawBackground();

//--------------------------Image Rendering-------------------------------------------------

function drawBackground() {
  fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg', function(img) {
  img.crossOrigin = "Anonymous";
    img.scaleToWidth(window.innerWidth * 0.75);
    img.scaleToHeight(window.innerHeight * 0.75);
    canvas.setBackgroundImage(img);
    canvas.renderAll();
  });
}

//------------------------Rectangle---------------------------------------------------------

window.addRect = function() {
  var box = new fabric.Rect({
    left: 0,
    top: 0,
    stroke: 'red',
    fill: 'rgba(255,0,0,.4)',
    width: 50,
    height: 50,
  });
  box.hasRotatingPoint = false;
  canvas.add(box);
}

//---------------------Circle-------------------------------------------------------------

window.addCircle = function() {
  var circle = new fabric.Circle({
    left: 0,
    top: 0,
    radius: 50,
    stroke: 'green',
    fill: 'transparent',
  });
  circle.hasRotatingPoint = false;
  canvas.add(circle);
}

//-----------------------Line Arrow-----------------------------------------------------

window.addArrow = function() {
  var arrowbox = new fabric.Rect({
    left: 0,
    top: 0,
    stroke: 'red',
    fill: 'red',
    width: 1,
    height: 50,
  });

var arrowtriangle = new fabric.Triangle({
  width: 10, height: 10, fill: 'red', left: -4, top: -10
});

var arrowgroup = new fabric.Group([ arrowbox, arrowtriangle ], {
  left: 150,
  top: 100,
  angle: 90
});

canvas.add(arrowgroup);
}

//-----------------------Save Canvas---------------------------------------------------------

window.saveCanvas = function(){
 canvas.getElement().toBlob(function(blob){
 saveAs(blob, annotation.png);
 });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

<canvas id="canvas" width="800" height="600" style="border:1px solid red;"></canvas>
<button onClick="addCircle()">Circle</button>
<button onClick="addRect()">Box</button>
<button onClick="addArrow()">Arrow</button>
<button onClick="saveCanvas()">Save</button>

Answer 1

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