Question

我必须在画布对象上加载图像，在单击某些按钮或滑动某些滑块后，我需要更改此画布上的一些像素。那是我的代码到目前为止：

function CanvasImage(element, src) {

    var width, height;
    var canvas = document.getElementById(element);
    var ctx = canvas.getContext("2d");
    var img = new Image;

    img.onload = function () {

        width = canvas.width = img.width;
        height = canvas.height = img.width;

        ctx.drawImage(img, 0, 0, width, height)
    };
    img.src = src;

    this.brightness = function (amount) {

        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgData.data;
        for (var i = 0; i < data.length; i += 4) {

            data[i] += amount;
            data[i + 1] += amount;
            data[i + 2] += amount
        }
        imgData.data = data;
        ctx.putImageData(imgData, 0, 0)
    };

    this.transform = function (data) {

        ctx.save();
        this.brightness(data.brightness);
        ctx.restore()
    }

}

多数民众赞成我刚刚添加了操作图像亮度的功能。开始时，图像被加载到canvas元素。这对我来说很好。功能亮度只是为像素添加给定量。这也有效。我认为我的问题是转换功能。我保存画布上下文的状态并调用我的转换函数。在这次操纵之后我恢复了状态。我想说，上下文应该看起来像早期加载的图像。

我现在的问题是，在更改滑块并将其恢复到原始状态后，我的图像仍然更亮或更暗，并且没有图像的原始状态。你有什么建议吗？

我感谢每一个答案。：d

Answer 1

save和restore仅保存画布的状态而不保存图像数据。状态是样式，翻译，文本对齐等等。

为了获取原始内容，您需要重绘源或使用其他画布元素（即屏幕外画布）存储要还原的数据，或将数据存储为数组（getImageData() ）。

另外值得注意的是putImageData绕过画布'状态并直接单独更改像素。

我的建议是保持源可用，或者在新的更改发生之前将其重新绘制到画布上。对于重置，只需重绘源并跳过更改。

<强> ONLINE DEMO HERE

this.brightness = function (amount) {

    ctx.drawImage(img, 0, 0, width, height)

    /// no change, just exit
    if (amount === 0) return;

    /// ... snipped        
};

操纵画布上的图像

1 个答案: