调整大小的图像保持efix通过ajax从blob上传文件
Iam使用此脚本调整jpg图像的大小并保留ifex数据。我可以在html正文中看到调整大小的图像,但我想用ajax上传调整大小的图像。我需要一些帮助调整大小的图像保持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
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;
}
找到我自己的解决方案。。。