我在stackoverflow上找到了一些不同的帖子甚至问题来回答这个问题,我基本上实现的是和this post一样的东西。
所以这就是我的问题。当我上传照片时,我还需要提交表格的其余部分。下面是我的html:
<form id="uploadImageForm" enctype="multipart/form-data">
<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
<input id="name" value="#{name}" />
... a few more inputs ...
</form>
以前,我不需要调整图像的大小,所以我的javascript看起来像这样:
window.uploadPhotos = function(url){
var data = new FormData($("form[id*='uploadImageForm']")[0]);
$.ajax({
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
... handle error...
}
}
});
};
这一切都工作得很好...现在我需要调整图像的大小...我如何才能替换表单中的图像,以便调整大小的图像被张贴,而不是上传的图像?
window.uploadPhotos = function(url){
var resizedImage;
// Read in file
var file = event.target.files[0];
// Ensure it's an image
if(file.type.match(/image.*/)) {
console.log('An image has been loaded');
// Load the image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
resizedImage = canvas.toDataURL('image/jpeg');
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
// TODO: Need some logic here to switch out which photo is being posted...
var data = new FormData($("form[id*='uploadImageForm']")[0]);
$.ajax({
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
... handle error...
}
}
});
};
我曾考虑过将文件输入移出表单,并在表单中隐藏输入,将其值设置为调整大小后的图像的值...但我想知道是否可以替换表单中已经存在的图像。
5条答案
按热度按时间nzk0hqpo1#
这是我最后做的,效果很好。
首先,我将文件输入移到表单之外,这样它就不会被提交:
然后我修改了
uploadPhotos
函数,使其只处理大小调整:正如你所看到的,我使用
canvas.toDataURL('image/jpeg');
将调整大小后的图像更改为dataUrl,然后调用函数dataURLToBlob(dataUrl);
将dataUrl转换为blob,然后添加到表单中。创建blob时,我触发了一个自定义事件。下面是创建blob的函数:最后,这里是我的事件处理程序,它从自定义事件中获取blob,附加表单,然后提交它。
n3ipq98p2#
如果有兴趣,我做了一个 typescript :
这是javascript的结果
用法如下:
或(
async
/await
):tjrkku2a3#
如果你们中的一些人,像我一样,遇到了方向问题,我已经将这里的解决方案与exif方向修正结合起来
https://gist.github.com/SagiMedina/f00a57de4e211456225d3114fd10b0d0
lyr7nygr4#
我已经制作了自己的版本,实际上没有使用文件阅读器,而是使用大多数现代浏览器都支持的
createObjectUrl
。sg3maiej5#
2022年我们有一些新的API可以用,这是我想到的解决方案,我们不用再搞FileReader API或者图片加载回调。
下面的代码接受一个file对象或一个Blob对象,并输出一个经过裁剪、居中和调整大小的图像的blob,同时将其转换为webp。