如何将画布图像数据复制到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更改图像？