调整大小的图像保持efix通过ajax从blob上传文件

调整大小的图像保持efix通过ajax从blob上传文件,ajax,blob,image-resizing,exif,jscript,Ajax,Blob,Image Resizing,Exif,Jscript,Iam使用此脚本调整jpg图像的大小并保留ifex数据。我可以在html正文中看到调整大小的图像,但我想用ajax上传调整大小的图像。我需要一些帮助 import copyExif from "./copyExif.js"; document.getElementById("file").onchange = async ({ target: { files } }) => { const file = files[0], canvas

Iam使用此脚本调整jpg图像的大小并保留ifex数据。我可以在html正文中看到调整大小的图像,但我想用ajax上传调整大小的图像。我需要一些帮助

import copyExif from "./copyExif.js";

document.getElementById("file").onchange = async ({ target: { files } }) => {
  const file = files[0],
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    img = await blobToImage(file);
  resizeToFitWidth(img, canvas, 1280);
  ctx.drawImage(await blobToImage(file), 0, 0, canvas.width, canvas.height);
  canvas.toBlob(
    async blob =>
   document.body.appendChild(await blobToImage(await copyExif(file, blob))),
    "image/jpeg"
     
  );
};


const blobToImage = blob => {
  return new Promise(resolve => {
    const reader = new FileReader(),
      image = new Image();
    image.onload = () => resolve(image);
    reader.onload = ({ target: { result: dataURL } }) => (image.src = dataURL);
    reader.readAsDataURL(blob);
  });
}, resizeToFitWidth = (img, canvas, width) => {
  canvas.width = width;
  canvas.height = width * img.naturalHeight / img.naturalWidth;
}

找到我自己的解决方案。。。