0

I'm just following fabric.js tutorials but I can't draw Image. I can draw rectangle, but I can't draw Image. Why this code doesn't work???

Script here:

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('pug.jpg', function(img) {

  img.filters.push(new fabric.Image.filters.Grayscale());

  img.applyFilters(canvas.renderAll.bind(canvas));

  canvas.add(img);

});
강지용
  • 13
  • 2
  • 1
    are there any errors showing up? – khakiout Oct 09 '14 at 11:31
  • Hmm.. When I open it with browser, it shows me nothing(empty). – 강지용 Oct 09 '14 at 11:37
  • 1
    Oh I got Error here: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. fabric.js:17405fabric.Image.filters.Grayscale.fabric.util.createClass.applyTo fabric.js:17405(anonymous function) fabric.js:16693fabric.Image.fabric.util.createClass.applyFilters fabric.js:16692(anonymous function) app.js:26(anonymous function) fabric.js:16852img.onload – 강지용 Oct 09 '14 at 11:59
  • I see. take a look at these questions about `tainted by cross-origin data`. http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas and http://stackoverflow.com/questions/8688600/context-getimagedata-on-localhost. This is probably due to your image is hosted somewhere else or you're not hosting your application in a local server – khakiout Oct 09 '14 at 12:02

0 Answers0