Question

如果你看看这个Fiddle 当我点击#uploadImage按钮时，它会将图像随机添加到#html2canvas div。现在我想要的是在添加许多后选择一个特定的对象，然后点击#grayscale 按钮仅更改对象与选定区域以打开灰度。这是可能使用fabric.js还是我必须改变忠诚？

HTML

<div id="html2canvas">
    <canvas id="c"></canvas>
</div>
<img src="http://i.imgur.com/tEpBeQV.jpg" height="50" width="50" id="my-img">
<button class="deepblue-button" id="uploadImage">Upload</button>
<button id="grayscale">GrayScale</button>

JavaFabric SCRIPT

var canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(480);

var img = document.getElementById("my-img");
var upload = document.getElementById("uploadImage");

upload.addEventListener('click',uploadI,false);

function uploadI() {
    canvas.add(new fabric.Image(img, {
        left: Math.floor(Math.random() * 400) + 100,
        top: Math.floor(Math.random() * 250) + 200,
        width: 100,
        height: 100
    }));
}

更新

This Fiddle （“未捕获的安全错误：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布受到跨源数据的污染。”可能是因为JSfiddle）做了技巧，但如果我选择多个对象，然后更改grayscale它不会工作。这仅适用于一个和仅一个对象，但不适用于多个。因此，任何人都有更好的答案？

Answer 1

抱歉，我误解了你的问题。我之前的小提琴确实只改变了一个对象（选定的活动对象）的颜色。

如果你想让所有对象同时灰度化，你可以将它们推入一个数组，然后遍历那个数组来改变它们的属性，最后渲染所有这些对象。

var allImages = [],
    greyscale = document.getElementById('grayscale');

greyscale.addEventListener('click', function() {
    var filter = new fabric.Image.filters.Grayscale();
    // loop over all indexes in allImages array
    for ( var i = 0; i < allImages.length; i++ ) {
      allImages[i].filters.push(filter);
      allImages[i].applyFilters(canvas.renderAll.bind(canvas));
      // NB: don't know if this can be done out of the loop?
    }
}, false);

function uploadI() {
    var obj = new fabric.Image(img, {
        left: Math.floor(Math.random() * 400) + 100,
        top: Math.floor(Math.random() * 250) + 200,
        width: 100,
        height: 100
    });
    // now last image added to array is at index allImages[allImages.length-1]
    allImages.push(obj);
    // now add it to the canvas
    canvas.add(allImages[allImages.length-1]);
}

NB /免责声明：我不是fabric.js的专家，尽管这可行，但可能有更好的方法，例如，请参阅fabric.Collection，但文档是很难找到所以我希望这会有所帮助。

NB：由于jsfiddle限制，再次无法测试它是否有效

更改fabric.js中所选对象的样式

1 个答案: