[英]Resize & compress uploaded image in JavaScript
我正在建立一个网站,其中会有很多用户上传的图片。 我想在将这些图像上传到服务器之前在客户端调整大小和压缩(最好将其格式更改为.jpg)。
人们将如何去做呢? 我找到了一些解决方案,但没有一个真正适用于上传的文件。 我尝试过的最新版本是Hermite-resize脚本。 应该很简单:
// Get images from input field
var uploadedImages = event.currentTarget.files;
var HERMITE = new Hermite_class();
HERMITE.resize_image(uploadedImages[1], 300, 100);
但是显然上uploadedImages
返回为null
。 虽然我还在其他地方使用它们,所以我100%肯定它们不是null
有人知道如何有效地对上载的文件使用此脚本吗? 或者,也许有更好的解决方案来在客户端调整图像大小或压缩图像?
提前致谢!
我试图在hermite上工作,但是它不是一个很好的类,因为它不断给我带来错误,因此您可以在小提琴上使用以下代码,hermit类也要使用img元素id
的HTML
<input type="file" id="fileOpload"><br>
<img src="" alt="Image preview..." id="image">
<canvas id="canvas" height=500 width=500></canvas>
Java脚本
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
var percentage = 0.75;
reader.addEventListener("load", function () {
preview.src = reader.result;
preview.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = canvas.width * (preview.height / preview.width);
var oc = document.createElement('canvas'),octx = oc.getContext('2d');
oc.width = preview.width * percentage;
oc.height = preview.height * percentage;
canvas.width = oc.width;
canvas.height = oc.height;
octx.drawImage(preview, 0, 0, oc.width, oc.height);
octx.drawImage(oc, 0, 0, oc.width, oc.height);
ctx.drawImage(oc, 0, 0, oc.width, oc.height,0, 0, canvas.width, canvas.height);
}
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
document.getElementById('fileOpload').addEventListener('change', previewFile);
我已经找到解决我问题的方法。 这对每个人都不好,但是这个人写了一个小脚本,非常适合我想要完成的任务:
https://stackoverflow.com/a/39235724/6756447
开箱即用! 我添加的唯一一件事是在将返回的Blob推送到数组之前为其赋予时间戳和其原始名称:
var images = event.currentTarget.files
resizeImage({
file: images[i],
maxSize: 500
}).then(function(resizedImage) {
resizedImage.lastModifiedDate = new Date()
resizedImage.name = images[i].name
uploadedImages.push(resizedImage)
}).catch(function(error) {
console.log(error)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.