Question

我正在尝试调整笨重的图像以减小图像尺寸。为此我已经实现了以下代码。

<html>
    <head>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <input type='file' id="fileUpload" />
        <canvas id="canvas" width="450" height="300"></canvas>  
    </body>

<script type="text/javascript">
function el(id) {
    return document.getElementById(id);
} 

var canvas  = el("canvas");
var context = canvas.getContext("2d");

function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.addEventListener("load", function() {
             context.drawImage(img, 0, 0);
             var MAX_WIDTH = 450;
             var MAX_HEIGHT = 300;
             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.mozImageSmoothingEnabled = true;
             ctx.webkitImageSmoothingEnabled = true;
             ctx.msImageSmoothingEnabled = true;
             ctx.imageSmoothingEnabled = true;
             ctx.drawImage(img, 0, 0, width, height);
           });
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    } else {
        alert("error");
        return false;
    }


    var canvas  = el("canvas");
    var dataURL = canvas.toDataURL();

    $.ajax({
          type: "POST",
          url: "http://localhost/newtry/lipak.php",
          data: { 
             imgBase64: dataURL
          }
    }).done(function(o) {
      console.log('saved'); 
    });
}

el("fileUpload").addEventListener("change",readImage);

</script>
</html>

在另一个php文件中，我有一个代码来检索此代码，如下所示

file_put_contents('photo.png', base64_decode(substr($_POST['imgBase64'], strpos($_POST['imgBase64'], ",")+1)));

但是当我上传我的第一张图片时，它没有被保存。但在上传另一张图片后，第一张图片被保存了......类似的第二张，第三张等等。

那么如何在第一次尝试时检索图像呢？

Answer 1

Vinay请在加载功能中调用ajax

 function readImage() {
        if ( this.files && this.files[0] ) {
            var FR= new FileReader();
            FR.onload = function(e) {
               var img = new Image();
               img.addEventListener("load", function() {
                 context.drawImage(img, 0, 0);
                 var MAX_WIDTH = 450;
                 var MAX_HEIGHT = 300;
                 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.mozImageSmoothingEnabled = true;
                 ctx.webkitImageSmoothingEnabled = true;
                 ctx.msImageSmoothingEnabled = true;
                 ctx.imageSmoothingEnabled = true;
                 ctx.drawImage(img, 0, 0, width, height);
$.ajax({
              type: "POST",
              url: "http://localhost/newtry/lipak.php",
              data: { 
                 imgBase64: dataURL
              }
        }).done(function(o) {
          console.log('saved'); 
        });
               });

               img.src = e.target.result;

            };       
            FR.readAsDataURL( this.files[0] );

        } else {
            alert("error");
            return false;
        }


        var canvas  = el("canvas");
        var dataURL = canvas.toDataURL();


    }

    el("fileUpload").addEventListener("change",readImage);

    </script>

第一张图片正在保存第二张图片上传？

1 个答案: