0

So from Base64 png data to html5 canvas we can draw a png image to canvas like this

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
image.src = "data:image/  png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

It works for small image data , but for large data I am getting an error like 414 (Request-URI Too Long)

How can we draw image to canvas in this case ?

Community
  • 1
  • 1
Sarath
  • 9,030
  • 11
  • 51
  • 84
  • You can pass it as a blob, and use `URL.createObjectURL()` instead to circumvent this chrome limitation. There are dupes somewhere, let me find it out... – Kaiido Jul 14 '16 at 15:32
  • Not completely duplicates, so I'm not sure which one to mark, but you'll probably get your solution either from [this first Q/A](http://stackoverflow.com/questions/36918075/is-it-possible-to-programmatically-detect-size-limit-for-data-url/36951356) or from [this one](http://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/37151835#37151835) – Kaiido Jul 14 '16 at 15:34

0 Answers0