0

アップロードした画像のサイズを変更しようとしています。送信する前に、入力要素に戻してください。

  $("#upload_button").click(function(){
            var imgToUpload = document.getElementById('id_picture').files;
            for (var x = 0; x < imgToUpload.length; x ++){
                var getImg = imgToUpload[x];
                console.log(typeof getImg);
                if (! imgToUpload[x].type.match(/image.*/)){
                    alert("not an image");
                    return false;
                }

                var img = document.createElement("img");
                img.src = window.URL.createObjectURL(getImg);

                var canvas = document.createElement("canvas");
                canvas.width  = 20;
                canvas.height = 20; 
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, 20, 20);

                var resizedUrl = canvas.toDataURL("image/jpeg",0.7);
                var byteString = atob(resizedUrl.split(",")[1]);

                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var index = 0; index < byteString.length; index++){
                    ia[index] = byteString.charCodeAt(index);
                }

                var bob =  new Blob([ab], {"type": getImg.type});

                var p = document.getElementById('id_picture');
                p.value = bob;

                $("#upload_form").submit();

            }
        });

に到達p.value = bobすると、前述の問題が発生します。私はそれを間違っていますか？

（私はそれを単に使用canvas.toDataURLして別の非表示の入力に設定できることを読みましたが、これが可能かどうかを確認しようとしています）

4

1 に答える 1

0

toDataURLを使用できます

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

クライアントの例： http ：//tutorials.jenkov.com/html5-canvas/todataurl.html

サーバー（PHP）の例http://html5stars.com/?p=99

于 2013-01-01T19:23:55.797 に答える