1

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

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()
    }

}

那就是我刚刚添加了操纵图像亮度的功能。一开始，图像被加载到画布元素中。这对我来说很好。功能亮度只是将给定量添加到像素。这也有效。我认为我的问题是转换功能。我保存画布上下文的状态并调用我的转换函数。在这个操作之后，我恢复了状态。我会说，上下文应该看起来像之前加载的图像。

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

我感谢每一个答案。:D

4

1 回答 1

2

save并且restore只保存画布的状态而不是图像数据。状态是诸如样式、翻译、文本对齐等之类的东西。

为了取回原始内容，您需要重新绘制源或使用另一个画布元素（即屏幕外画布）存储要恢复的数据，或者将数据存储为数组（getImageData()）。

另外值得注意的是，它putImageData绕过了画布的状态并直接独立地更改像素。

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

在线演示在这里

this.brightness = function (amount) {

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

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

    /// ... snipped        
};
于 2013-10-10T07:04:26.160 回答