如何將畫布圖像數據復制到paper.js Raster對象中

Question

我正在嘗試將Caman.js過濾器功能添加到paper.js Raster。 為了不丟失圖像信息，我想在每次通過從克隆柵格中復制來調用Caman之前，都將圖像數據重置為原始數據（_camanImageData）。 代碼是這樣的：

with(paper) {
    Raster.prototype._camanImageData = null;
    Raster.prototype.filter = function(options) {

        var self = this,
            ctx = this.getContext(),  // caution! This also inits this._canvas (should).
            size = this._size;

        if( !this._camanOrgImage ) {
            this._camanOrgImage = this.clone(false);
        } else {
            var dst = ctx.createImageData(size.width, size.height);

            dst.data.set(this._camanOrgImage.getImageData(new Rectangle(0, 0, size.width, size.height)).data);
            this.setImageData(dst);
        }

        Caman(this._canvas, function () {

            for( option in options ) {
                var value = options[option];

                this[option](value);
            }

            this.render(function () {
                self._changed(129);
            });
        });
    };
}

第一次通話正常。 第二個顯然適用於已修改的數據。

我這樣調用過濾器函數：

raster.filter({
    brightness: 50,
    saturation: 10,
    hue: 20,
});

我做錯了什么？

Answer 1

問題出在卡曼身上。 如果在canvas元素中設置了“ data-caman-id”屬性，則Caman不會重新加載已更改的畫布。 只需在致電Caman之前將其刪除，即可正常工作：

this._canvas.removeAttribute("data-caman-id");
Caman(this._canvas, function () {
    ...

解決方案來自： 如何使用CamanJS更改圖像？