Question

这是我的代码：

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和“〜!!＆amp;＆amp; !!〜”分隔符（我我将用于将字符串拆分为数组。）

有人可以了解我的情况吗？

Answer 1

我不推荐使用base64图像，它会大约3倍。使用FormData并附加一个blob

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: