Question

我有一个页面让客户修改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");
    }

Answer 1

如何将完成的图像转到下一页？

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

保存图片：

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

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

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

也适用于不同的标签（只要它是相同的来源）。

请注意Web Storage的大小限制因浏览器而异（通常为2.5 - 5 mb - 加上字符串每个字符串需要2个字节，所以数据uri应该小于1 mb才能安全）。如果JPEG格式没问题，您可以将图像提供为：

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

处理“更安全”的尺寸。

如果您想永久存储图片，可以使用localStorage代替sessionStorage。

如何在修改后将堆叠图像移动到另一个页面？

1 个答案: