0

顧客が画像の 5 つのレイヤーの色を変更できるようにするページがあります。私はgetPixels9 つのカラー ファミリーのパレットに基づいて色を変更するために使用しており、ファミリーごとに約 188 色から選択できます。画像操作はうまく機能しますが、製品を注文する前の最終確認である次のページに完成した画像を表示する方法がわかりません。

この完成した画像を次のページに移動するにはどうすればよいですか?

関連するコード (画像の 1 つのレイヤー):

    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

この完成した画像を次のページに移動するにはどうすればよいですか?

画像データを取得する方法の 1 つはWeb Storage次のとおりです (IE8 を含むすべての主要なブラウザーでサポートされています)。

画像を保存するには:

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

その後、同じドメイン内の他のページから、次の方法で取得できます。

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

異なるタブでも動作します (同じオリジンである限り)。

ブラウザによって異なる Web Storage のサイズ制限に注意してください (通常は 2.5 - 5 mb - さらに、文字列は 1 文字あたり 2 バイトかかるため、データ uri は安全のために 1 mb 未満にする必要があります)。JPEG 形式で問題ない場合は、画像を次のように指定できます。

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

「より安全な」サイズに対処します。

画像を永続的に保存したい場合は、localStorage代わりに使用できますsessionStorage。

于 2013-07-09T14:00:30.263 に答える