调整图片大小并从javascript上传到php

Resize images and upload from javascript to php

本文关键字：javascript php 调整      更新时间：2023-09-26

下面是我的代码:

var data = new FormData();
var imagesData = "";
        $("#filesToUpload").on("change", function(){
            var filesToUpload = document.getElementById("filesToUpload");
            for(var i = 0; i < filesToUpload.files.length; i++){
                var file = filesToUpload.files[i];
                var img = new Image(600,400);
                var reader = new FileReader();
                reader.onload = function(e){
                    img.src = e.target.result;
                }
                reader.readAsDataURL(file);
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext('2d');
                canvas.width = 1600;
                canvas.height = 900;
                img.onload = function(){
                    ctx.drawImage(img,0,0,canvas.width,canvas.height);
                    var dataURL = canvas.toDataURL("image/jpg");
                    imagesData += dataURL + "~!!&&!!~";
                }
            }
        })
        $("#submit").on("click", function(){
            console.log(imagesData);
            //data.append("imagesData", dataURL);
            //var xhttp = new XMLHttpRequest;
            //xhttp.open("POST", "test.php", true);
            //        
            //xhttp.send(data);
        })

我想在上传到php之前在javascript中调整图像的大小。我已经设法调整和上传一个文件的时间，但现在我想这样做与多个文件。我的计划是将所有的dataURL放入一个字符串中，然后将该字符串发送到php，然后将它们分割成一个数组，并从那里继续。现在我已经尝试在将字符串发送到php之前在控制台中记录字符串，以查看它是否正确地将字符串放在一起，但它只包含一个dataURL和"~!!&&!!"~"分隔符(我将使用它将字符串分割成一个数组)。

有谁能说明我的情况吗?

我不推荐base64的图像，它会大3倍。使用FormData并添加blob代替

const fd = new FormData
const canvas = document.createElement('canvas')
const MAX_WIDTH = 800
const MAX_HEIGHT = 600
const ctx = canvas.getContext('2d')
function resize(img) {
  ctx.drawImage(img, 0, 0)
  
  let width = img.width
  let height = img.height
  // keep portration
  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
  ctx.drawImage(img, 0, 0, width, height)
  return new Promise(r => canvas.toBlob(r)) // use toBlob to get binaries (~3x smaller then base64)
}
$("#filesToUpload").on("change", async function() {
  for (let file of this.files) {
    try {
      // Help from "Screw-FileReader" to turn a blob to an image
      let blob = await file.image().then(resize) 
      fd.append('files', blob, file.name)
    } catch (err) {
      // not an image, or couldn't read
    }
  }
  
  // fetch('./upload', {method: 'post', body: fd})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script>
<input type="file" id="filesToUpload" multiple>

相关文章：