javascript - 调整画布大小时，图像上的过滤器会丢失

Question

我一直在尝试在画布中加载的图像上放置过滤器（如亮度、对比度）。下面是我正在做的一个片段

/******Loading Image in Canvas******/
        let canvas = document.getElementById('demo');
        let ctx = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas.width = 220;
                canvas.height = 250;
                ctx.drawImage(img,0,0,canvas.width,canvas.height);
            }
            img.src = event.target.result;
            self.oldImg = event.target.result;
        }
        reader.readAsDataURL(xevents.target.files[0]);  

我添加了亮度、对比度逻辑并且在图像上工作正常。当我对图像进行任何操作时，例如调整画布大小（使用可调整大小的 jquery UI），问题实际上会出现。应用的过滤器会丢失。下面是调整大小时在画布上重绘的片段。

    $(".stretch").resizable({ resize: function(event, ui) {
        $("#demo", this).each(function() { 
            $(this).attr({ width: ui.size.width, height: ui.size.height });
            self.reDraw(this);
        });
    } });

reDraw () {
    var img = new Image();
    var canvas = document.getElementById('demo');
    var c = canvas.getContext("2d");
    img.src = this.oldImg;
    c.drawImage(img, 0, 0, canvas.width, canvas.height);
}

我相信，因为它再次创建了一个新的图像对象（new Image()），所以过滤器会丢失。谁可以帮我这个事。我希望在调整画布大小时保留过滤器。

赞赏！谢谢

更新

process (type, amount) {
    var img = new Image();
    var canvas = document.getElementById('demo');
    var c = canvas.getContext("2d");
    img.src = this.oldImg;
    c.drawImage(img, 0, 0, canvas.width, canvas.height);
    let imgData = c.getImageData(0, 0, canvas.width, canvas.height);
    let data = imgData.data;
    if(type === 'b') {
        for (let i = 0; i < data.length; i += 4) {
            data[i] += amount;
            data[i + 1] += amount;
            data[i + 2] += amount;
        }
    }
    if(type === 'c') {
        amount = (amount/100) + 1;  //convert to decimal & shift range: [0..2]
        let intercept = 128 * (1 - amount);
        for(let i=0;i<data.length;i+=4){   //r,g,b,a
            data[i] = data[i]*amount + intercept;
            data[i+1] = data[i+1]*amount + intercept;
            data[i+2] = data[i+2]*amount + intercept;
        }
    }
    c.putImageData(imgData, 0, 0);
}

标签： javascriptcanvas