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

问题描述

我正在使用画布在上传图像之前对其进行处理、裁剪、调整大小和优化.

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

我正在使用 toDataUrl() 方法来获取图像数据一旦被操作.我有这个 base 64 编码的 PNG url.

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.

据我所知，获取数据 url 的长度似乎与图像大小无关......而且我不确定如何获取我正在寻找的信息:图像数据的文件大小操作后，来自 base 64 编码的 PNG url.

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 返回画布的 base 64 编码 PNG 图像，类似于:

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

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

base 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屋！