javascript - fabric.js - toDataURL shows blank page when there is image on canvas - Stack Overflow

admin管理员组

文章数量:1277311

I'm using fabric.js for my canvas application, toDataURL method works properly except when there is a image on canvas. When i add an image to canvas and call toDataURL it shows me a blank page.

//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg=="

//When i execute same code in a .js file it returns a data url which shows a blank image.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

It's interesting that it's working on chrome dev console but not works in .js file even if it's same code. I noticed that working data url finishes with '==' but other one not. However i don't know what this means.

I'm using fabric.js for my canvas application, toDataURL method works properly except when there is a image on canvas. When i add an image to canvas and call toDataURL it shows me a blank page.

//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg=="

//When i execute same code in a .js file it returns a data url which shows a blank image.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

It's interesting that it's working on chrome dev console but not works in .js file even if it's same code. I noticed that working data url finishes with '==' but other one not. However i don't know what this means.

• javascript
• html
• canvas
• html5-canvas
• fabricjs

Share Improve this question Follow asked Oct 13, 2013 at 6:59 Yusuf Can GürkanYusuf Can Gürkan 76522 gold badges1010 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You didn't give much to analyze but I'll go from there on my gut feeling.

The image you are using is probably violating Cross-Origin Resource Sharing (CORS) requirements. When this happens the canvas will return a blank image when you try to get the pixel data either by using canvas.toDataURL() or context.getImageData().

It basically happens when the image is not located on the same domain as the page or is loaded from the file:// protocol.

You can try to add the following to the image object before setting the source:

image.crossOrigin = 'anonymous';
image.src = '...';

From tag:

<img crossOrigin='anonymous' src='...' alt='' />

This will request permission from the server to use the image cross-origin. If the server allows you should be fine.

If not you will either have to copy the image to your own server so it loads from the same domain as your page, or create a proxy page that loads the image externally and serves it to your page from the proxy page (it sounds plicated but really isn't).

If the image does not show up at all on the canvas you are probably not using load callback which you need since image loading is asynchronous. If so just add:

image.onload = function() {
    /// now you can draw the image to canvas
}
image.crossOrigin = 'anonymous';
image.src = '...';

The problem is solved. The point i missed is, i was calling toDataURL function before canvas is loaded, that's why it was showing me a blank page.

canvas.loadFromJSON(json,function(){
          var dataURL = canvas.toDataURL();
          });

This solved my problem when i gave toDataURL() function as a callback to loadFromJSON function.

But after a while i had a different issue about CORS when i tried to upload my images from s3 bucket and i solved this problem as upward solution.

I was facing the same issues when I was trying to generate images from the canvas using Fabricsjs and generate PDF from images using JSPDF so below is my case I also spend hours on this may this can help someone to save time.

Load the canvas from JSON that i.e

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(obj, object) {
    //fabric.log(obj, object);
});

Canvas was drawing images all fine then I was generating the images from that canvas it was a case of multiple images in a single canvas and I was generating PDF based on each page of the canvas.

Instead of this

canvas.toDataURL('image/png', 0.1)

I used this and it starts returning me the propper images dataurl

var imgData = document.getElementById('canvas_0').toDataURL();

Below are snippets

$("#pdfSelector .canvas-container").each(function(index, value){ // canvas selector
  html2canvas($("#canvas_"+index), {   // html2canvas used to get images
      onrendered: function(canvas) {   // on successfully render of images 
          //var imgData =  canvas.toDataURL('image/png', 0.1);
          var imgData = document.getElementById('canvas_0').toDataURL();
          const imgProps= doc.getImageProperties(imgData);
          const pdfWidth = doc.internal.pageSize.getWidth();
          const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
          
          doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight, 'page_'+index, 'FAST');
         
      }
  });
});

本文标签： javascriptfabricjstoDataURL shows blank page when there is image on canvasStack Overflow