I need to save the image of fabricjs along with the objects

Question

Hello, I’m trying to save the image of Fabric.JS along with the active objects, but I’m having a problem.

I’m trying to use the:

canvas.toDataURL('image/jpg')

But when I try to run this error here on the console:

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Someone can help me?

Answer 1

See if this works for what you need:

var w=1108, h=598;

  var uploadCanvas = function (canvas, callback) {

     SeuMetodoDeUploadQueNaoseiQuale(canvas)
       .then(function(rtn){
           if (callback && rtn.status) {
              callback(rtn.url_do_path_imagem);
           }
       });

 };

var createImage = function(callback) {

    try {
        canvas.backgroundColor = 'white';

        var myCanvas = canvas.toDataURL({
            format: 'jpeg',
            quality: 1,
            width: w,
            height: h
        });

       //seu método de upload que não sei qual é...
        uploadCanvas(myCanvas, callback);
        canvas.backgroundColor = null;
        //se precisar pegar o json do canvas
        var jsonCanvas = JSON.stringify(canvas);
        } catch (e) {
            //caso esteja em branco o trabalho, cria apenas um canvas vazio
            var whiteCanvas = document.createElement('canvas');
            var ctx = whiteCanvas.getContext('2d');
            whiteCanvas.height = h;
            whiteCanvas.width = w;
            whiteCanvas.backgroundColor = "black";
            ctx.drawImage(whiteCanvas, whiteCanvas.width, whiteCanvas.height);

            var canvasBranco = whiteCanvas.toDataURL('image/jpeg');

            //seu método de upload que não sei qual é...
            uploadCanvas(canvasBranco, callback);
            canvas.backgroundColor = null;
            //se precisar pegar o json do canvas
            var jsonCanvas = JSON.stringify(canvas);
       }
  };