在Javascript中调整图像大小后如何获得图像文件大小？

根据下面的脚本，我可以将图像的大小调整为图像的最大预定义尺寸，并将其显示在

画布中

：

$（函数（）{
$（“#文件_选择”）。更改（函数（e）{
var fileReader=newfilereader（）；
fileReader.onload=函数（e）{
var img=新图像（）；
img.onload=函数（）{
var MAX_WIDTH=100；
var最大高度=100；
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
var canvas=document.createElement（“canvas”）；
canvas.setAttribute（'id'，'canvas'）
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（“2d”）.drawImage（这个，0，0，宽度，高度）；
this.src=canvas.toDataURL（）；
document.body.appendChild（this）；//如果不想显示，请将其删除
}
img.src=e.target.result；
}
fileReader.readAsDataURL（e.target.files[0]）；
//log（'调整大小后的文件大小为…'）；
});
});

上传图片
上传你的照片。。。
您可以通过执行newImageData.length*3/4来计算以字节为单位的粗略大小


$（函数（）{
$（“#文件_选择”）。更改（函数（e）{
var fileReader=newfilereader（）；
fileReader.onload=函数（e）{
var img=新图像（）；
img.onload=函数（）{
var MAX_WIDTH=100；
var最大高度=100；
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
var canvas=document.createElement（“canvas”）；
canvas.setAttribute（'id'，'canvas'）
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（“2d”）.drawImage（这个，0，0，宽度，高度）；
//行添加
var canvasData=canvas.toDataURL（）；
//行编辑
this.src=画布数据；
//行添加
log（canvasData.length*3/4，'bytes'）；
document.body.appendChild（this）；//如果不想显示，请将其删除
}
img.src=e.target.result；
}
fileReader.readAsDataURL（e.target.files[0]）；
//log（'调整大小后的文件大小为…'）；
});
});

上传图片
上传你的照片。。。
它不适用于
newImageData。length
无法读取未定义的属性“length”。感谢检查是否正确计算了大小：）。旁注-由于某些原因，在我的浏览器上多次执行onload功能。在我的windows pc上，我右键单击并保存了图像文件，并检查了其大小。它显示大小：15.0 KB（15408字节），而计算大小为15425字节。这就是我所说的粗尺寸。啊，它是：），它是正确的，准确的。是的，正如旁注中所说，我不知道为什么它会无限期地这样执行，它消耗了如此多的CPU资源，我有没有办法摆脱它，非常感谢：（我通过定义变量
canvas
external
img.onload=function（）{..}
，解决了这个问题，它对我很有效。谢谢你的帮助：）