Невозможно сохранить холст ткани как изображение, используя FileSaver.js - PullRequest
Новая
       8

Невозможно сохранить холст ткани как изображение, используя FileSaver.js

0 голосов
/ 14 сентября 2018

Я включил в свой код Fabric.js и Filesaver.js, но все еще получаю сообщение «Uncaught SecurityError: Не удалось выполнить toBlob» для HTMLCanvasElement: испорченные холсты могут не экспортироваться ».ошибка всякий раз, когда я пытаюсь сохранить холст ткани.

Я ссылался: 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>

1 Ответ

0 голосов
/ 14 сентября 2018

Я также столкнулся с той же проблемой, используя ткань JS. Мое текущее решение заключается в кодировании элемента canvas в строку base64 с использованием toDataUrl() и отправке его на серверный код для его повторного декодирования, а затем записи в виде файла изображения. Я использую PHP на стороне сервера

...