使用JavaScript从客户端上传压缩图像文件

我试图在一些低带宽设备上使用JavaScript在客户端压缩图像，而我目前在使用HTML5文件API时陷入了困境。我是新来的，如果我错过了一些重要的事情，请原谅我

我有一些输入标签，理想情况下可以打开手机摄像头，捕获单个图像，压缩并将文件发送到后端。虽然这可以通过启用多个上载的单个输入字段来完成，但我需要多个图像字段根据某些类别来分隔图像

以下是输入框：

<input type="file" name="file1" id="file1" capture="camera" accept="image/*">
<input type="file" name="file2" id="file2" capture="camera" accept="image/*">...

但这不起作用，因为它在tmp目录中查找用户选择的原始文件（例如，在我的示例中，实际的临时文件是C:\xampp\tmp\php25CB.tmp）

我尝试过的一件事是将输入字段放在表单标记之外，使用按钮启用单击行为，并使用表单中修改的数据创建新的输入字段，如：

var newinput = document.createElement("input");
newinput.type = 'file';
newinput.name = 'file1';
newinput.files[0] = event.url;
document.getElementById('parentdiv').appendChild(newinput);

不用说，这没有任何效果，PHP脚本无法识别任何文件

请指导我并建议JavaScript/PHP脚本中所需的任何更改，以便我可以接受修改后的文件，而不是输入字段中用户上传的原始文件

您只能使用另一个列表更改文件输入值
以下是操作方法：（也在示例中）

使用文件读取器浪费时间，CPU、编码和解码以及RAM…
请改用

不要使用canvas.toDataURL。。。改用

画布的压缩效果不好，请阅读前面的内容并查看…
如果您坚持使用画布来压缩大小，那么

首先，先尝试查看图像的大小是否合理

比较预先存在的图像

file.size

是否小于提供的图像，然后选择是要旧图像还是新图像

如果调整图像大小还不够，请查看此项，以更改质量，直到满足所需的文件大小和图像外观

如果没有任何测试，我也会这样重构您的代码：

/**
*@params{File[]}files要添加到文件列表的文件数组
*@return{FileList}
*/
函数fileListItems（文件）{
var b=新剪贴簿事件（“”）.clipboardData | |新数据传输（）
对于（变量i=0，len=files.length；i高度）{
如果（宽度>最大尺寸）{
高度*=最大尺寸/宽度
宽度=最大尺寸
}
}否则{
如果（高度>最大尺寸）{
宽度*=最大尺寸/高度
高度=最大尺寸
}
}
canvas.width=宽度
canvas.height=高度
canvas.getContext（'2d'）.drawImage（图像，0，0，宽度，高度）
const resizedImage=wait new Promise（rs=>canvas.toBlob（rs，'image/jpeg'，1））
//PS：您可能必须禁用事件侦听器，因为这可能是一个更改事件
//在循环中反复触发此函数，否则
input.files=文件列表项([
新文件（[resizedImage]，File.name，{type:resizedImage.type}）
])
}
jQuery（$=>{
//当导航离开页面并选择上载同一文件时，将值重置为（附加功能）
$（'#file1'）。在（'单击touchstart'，函数（）{
$（this.val（“”）
})
//当用户选择任何文件时触发操作
$（'#file1'）。更改（函数（e）{
调整照片大小（此，1024张）
})
})

仅供参考，canvas的压缩效果非常差，它可以将压缩良好的图像增加很多：让我们拍摄我的gravatar图像，不做任何更改，看看会发生什么：扰流板：大小增加2.33%您的答案非常全面，我学到了一些很棒的新东西。谢谢你。仅供参考，因为您没有测试此代码，所以我将

image.src=URL.createObjectURL（文件）

替换为

image.src=URL.createObjectURL（文件[0]）

，对于我来说效果非常好。再次感谢。我只是简单地问了一个问题，我试图在canvas.getContext（'2d'）.drawImage（image，0，0，width，height）行之后的同一resizePhotos函数中将画布图像显示到现有的画布id上，但对我来说不起作用。是否有方法将图像呈现到同一页面中的现有画布id上？在我的示例中，我创建了一个画布元素，您必须执行类似于

canvas=document.querySelector（'canvas'）

$file1 = $_FILES["file1"]["tmp_name"];
$file2 = $_FILES["file2"]["tmp_name"];
...

var newinput = document.createElement("input");
newinput.type = 'file';
newinput.name = 'file1';
newinput.files[0] = event.url;
document.getElementById('parentdiv').appendChild(newinput);