PNG цветное изображение не изменяется в Fabric.js

Question

Я использую ниже код, чтобы изменить цвет PNG изображения на холсте динамически,

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)); 
} 

Где canvas = new fabric.Canvas('c');

* Статические цвета добавляются для тестирования который будет заменен на colorpicker.

Для текста он работает нормально, но для изображения он не работает.

Answer 1

Вы не можете использовать фильтры изображения для изображений crossOrigin. Если вы посмотрите на консоль разработчика, вы увидите следующую ошибку безопасности: «Uncaught SecurityError: не удалось выполнить« getImageData »в« CanvasRenderingContext2D »: холст был испорчен данными перекрестного происхождения».

Пожалуйста, используйте только изображения с той же точки зрения или используйте последнюю версию Fabric.js (версия dev) и установите crossOrigin = "Anonymous". В этом случае изображение должно быть подано с заголовком «Access-Control-Allow-Origin: *».

Вы используете новый API fabric.Image.filters.Tint - этот API доступен только в версиях Fabric.js> = 1.3.2.

Я обновил jsfiddle использовать данные URL изображение (не проблемы с CORS) и обновлять Fabric.js в 1.3.2: http://jsfiddle.net/Kienz/wDfhf/

Вы можете найти последнюю версию Dev (по своему страху и риску:)) по адресу https://github.com/kangax/fabric.js/tree/master/dist