如何将 canvas 图像数据复制到 paper.js 栅格对象中

Question

我正在尝试向 paper.js 栅格添加 Caman.js 过滤器功能。为了不丢失图像信息，我想在每次调用 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 不会重新加载更改后的 canvas。只需在调用 Caman 之前删除它，它就可以正常工作：

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

解决方案来自：How can I change out an image using CamanJS?

如何将 canvas 图像数据复制到 paper.js 栅格对象中

How to copy canvas image data into a paper.js Raster object

javascript

canvas

raster

paperjs

getimagedata