2

ユーザーがディスクから画像を参照すると、スケーリングされた画像がキャンバスにプレビューとして表示される場所から画像をアップロードしようとしています。キャンバスからスケーリングされた画像を取得するには、dataurl画像に半分の画像しか表示されません。右クリックしてキャンバスから画像を表示しようとすると、完全な画像の URL が表示されます。これが私のコードです。

<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#fileupload').change(function(){
        var MAX_WIDTH = 180;
        var MAX_HEIGHT = 120;

        var file = this.files[0];
        var canvas = document.getElementById('canvas');

        var img = document.createElement("img");

        var reader = new FileReader();

        reader.onload = function(e) {
            img.src = e.target.result;
        }

        img.onload = function(){
            var width = img.width;
            var height = img.height;

            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }

            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.scale(1,1);
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL("image/png");
            alert(dataurl); //this path shows imcomplete image.

        }
        reader.readAsDataURL(file);
</script>
</head>
<body>
<input id="fileupload" type="file">
<canvas width="180" height="120" id="canvas"></canvas>
</body>
</html>
4

0 に答える 0