CODEWITHSUNDEEP
javascriptjqueryhtml5-canvasfabricjs
Rajendra Khabiya
Rajendra Khabiya

Reputation: 2030

PNG image color doesn't change in Fabric.js

I am using below code to change color of a PNG image on canvas dynamically,

var selectedObject = canvas.getActiveObject();

if ("text" == selectedObject.type) {
   selectedObject.setFill("#FF0000");
   canvas.renderAll();
}
else {    
  selectedObject.filters.push(
    new fabric.Image.filters.Tint({color:"#FF0000", opacity:0.6}));

  selectedObject.applyFilters(canvas.renderAll.bind(canvas));
}

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

*Static colors are added for testing purpose which will be replaced by colorpicker.

For text it is working fine but for image it is not working.

Upvotes: 3

Views: 4186

Answers (1)

Kienz
Kienz

Reputation: 3507

You can't apply image filters on crossOrigin images. If you look at developer console you see the following security error: "Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data."

Please use only images from same origin or use latest Fabric.js version (dev version) and set crossOrigin = "Anonymous". In this case the image have to be served with the header "Access-Control-Allow-Origin: *".

You use the new API of fabric.Image.filters.Tint - this API is only available in Fabric.js versions >= 1.3.2.

I've updated the jsfiddle to use data-URL images (no problem with CORS) and update Fabric.js to 1.3.2: http://jsfiddle.net/Kienz/wDfhf/

You can find the latest dev version (by your own risk:)) at https://github.com/kangax/fabric.js/tree/master/dist

Upvotes: 4

Related Questions