3

次のようなbase64イメージがあります。 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCA......

上記のエンコードされた画像を使用してキャンバスにこれを描画する方法はありますか? 誰にもこの例がありますか。

編集:

これは私にとってはうまくいき、 base64ではなく画像である場合にのみ画像を描画します

これは機能します：

<script type="text/javascript">

        var pos = 0, ctx = null, ctx2 = null,saveCB, image = [], image2 = new Image();

        var canvas = document.createElement('canvas');


        var image2 = new Image();

        canvas.setAttribute('width', 320);
        canvas.setAttribute('height', 240);
        ctx = canvas.getContext('2d');
        image = ctx.getImageData(0, 0, 320, 240);

        var saveCB = function (data) {
            var col = data.split(';');
            var img = image;
            for (var i = 0; i < 320; i++) {
                var tmp = parseInt(col[i]);
                img.data[pos + 0] = (tmp >> 16) & 0xff;
                img.data[pos + 1] = (tmp >> 8) & 0xff;
                img.data[pos + 2] = tmp & 0xff;
                img.data[pos + 3] = 0xff;
                pos += 4;
            }

            if (pos >= 4 * 320 * 240) {
                ctx.putImageData(img, 0, 0);
                foto = canvas.toDataURL("image/png");
                $("#photo").val(foto);
                alert($("#photo").val()); 


                ctx2 = document.getElementById("canvas2").getContext("2d");
                ctx2.clearRect(0, 0, 320, 240);
                image2.src = 'http://blackberry12.com/uploads/allimg/110311/2-110311153Z90-L.jpg';
                ctx2.drawImage(image2,0,0);           

                pos = 0;
            }
        };
</script>

image2.src を foto または $("#photo").val() に変更すると、白いキャンバスだけが得られません。

編集済み 私の調査から、写真を撮ってエンコードするたびに同じbase64コードを取得しています。base64 コードは本当に白い画面のようです。誰でもここで助けてもらえますか、どこでエラーを起こしたのかわかりません。

4

1 に答える 1

9

Absolutely.

var img = new Image();
img.src = "data:image/png;base64,.............";
ctx.drawImage(img,0,0);

The image is immediately available for drawing.

于 2013-01-25T20:24:50.483 に答える