0

我有一个页面让客户修改图像 5 层的颜色。我正在使用getPixels基于 9 个颜色系列的调色板来更改颜色，每个系列约有 188 种颜色可供选择。图像处理效果很好，但我不知道如何将完成的图像带到下一页，这是订购产品之前的最终验证。

我怎样才能把这个完成的图像带到下一页？

相关代码（用于图像的一层）：

    var bg = document.getElementById("layer1");
    var canvas = document.createElement("canvas");      
    var ctx = canvas.getContext("2d");
    var originalPixels = null;//background
    var currentPixels = null;//background

    function changeColorBlue()
    {
        if(!originalPixels) return; // Check if image has loaded
        var newColor = HexToRGB(document.getElementById("colorbbg").value);

        for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
        {
            if(currentPixels.data[I + 3] > 0)
            {
                currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
            }
        }

        ctx.putImageData(currentPixels, 0, 0);
        bg.src = canvas.toDataURL("image/png");
    }
4

1 回答 1

0

我怎样才能把这个完成的图像带到下一页？

这是获取图像数据的一种方法，即使用Web Storage（在包括 IE8 在内的所有主要浏览器中都支持）：

要保存图像：

sessionStorage.setItem('myImage', canvas.toDataURL());

然后从同一域中的任何其他页面，您可以通过以下方式检索它：

img.src = sessionStorage.getItem('myImage');

也适用于不同的选项卡（只要它是相同的来源）。

请注意 Web 存储的大小限制，该限制可能因浏览器而异（通常为 2.5 - 5 mb - 加上字符串每个字符占用 2 个字节，因此 data-uri 应小于 1 mb 以确保安全）。如果 JPEG 格式可以，您可以将图像提供为：

sessionStorage.setItem('myImage', canvas.toDataURL('image/jpeg', 0.6));

处理“更安全”的尺寸。

如果要永久存储可以使用的图像，localStorage而不是sessionStorage.

于 2013-07-09T14:00:30.263 回答