在上传之前获取toDataUrl（）图像的大小？ [英] Get size of toDataUrl() image before upload?

问题描述

我在使用画布操作图像，裁剪，调整大小和优化之前上传它们。

I am using canvas to manipulate images, crop, resize and optimise before uploading them.

我正在使用 toDataUrl（）获取图像数据后获取图像数据的方法。我有基本64位编码的PNG网址。

I am using the toDataUrl() method to get the image data once it has been manipulated. I have the base 64 encoded PNG url from this.

我知道要开始的图像的文件大小但不确定如何获取图像的文件大小它已被裁剪等...没有上传图像。

I know the file size of the image to begin with but am unsure how to get the file size of the image after it has been cropped etc... Without uploading the image.

到目前为止，获取数据网址的长度似乎与图像大小无关...而且我不确定如何获取我正在寻找的信息：操作后的图像数据的文件大小，来自基础64编码的PNG网址。

Getting the length of the data url seems to have no relation to the image size as far as I can see... and I am unsure how to get the information that I am looking for: The file size of the image data after manipulation, from the base 64 encoded PNG url.

此时上传图像有点挫败了目的，因为我需要在客户端完成所有这些工作。我只需要确保图像<上传前最多。

Uploading the image at this point is kind of defeating the purpose as I need all of this to be done client side. I just need to ensure that the image is < max before uploading.

对任何地方的解释似乎都很少，任何信息都会有很大帮助。

There seems to be so little explanation of this anywhere, that any information at all would be of great help.

推荐答案

.toDataURL 返回画布的基本64位编码PNG图像，喜欢：

.toDataURL returns a base 64 encoded PNG image of the canvas, something like:

data:image/png;base64,iVBORw0KG...

基数为64的编码部分以逗号开头，即位置 22 。所以你需要做的就是解码字符串，从索引 22 开始： http://jsfiddle.net/eGjak/187/ 。

The base 64 encoded part starts after the comma, i.e. at position 22. So all you need to do is decoding the string, starting from index 22: http://jsfiddle.net/eGjak/187/.

var decoded = atob(cv.toDataURL().substr(22)); // atob decodes base 64

alert(decoded.length); // length of png file

这篇关于在上传之前获取toDataUrl（）图像的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！