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

我正在尝试调整大图像以缩小图像大小。为此，我实现了以下代码。第一张图片保存在第二张图片上传中？

<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)));

，但是当我上传我的第一个图像的没有得到保存。但是在上传另一张图像后，第一张图像得到保存。同样的第二张，第三张等等。

那么我怎么能第一次尝试检索图像？

来源

2017-07-19 Vinay Kumar Sharma

维奈请致电阿贾克斯负载功能

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>

来源

2017-07-19 13:35:13 kailash

好吧，让我试试这个代码 –

是啊..它的工作.. –

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

回答

相关问题