javascript - 上传前获取 toDataUrl() 图片的大小？

Question

我正在使用 Canvas 来处理图像、裁剪、调整大小并在上传之前进行优化。

我正在使用 toDataUrl()处理图像数据后获取图像数据的方法。我从中获得了 base 64 编码的 PNG url。

我一开始就知道图像的文件大小，但不确定如何在裁剪后获取图像的文件大小等...而不上传图像。

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

此时上传图像有点违背了目的，因为我需要所有这些都在客户端完成。我只需要确保图像是 < max上传前。

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

Answer 1

.toDataURL 返回 Canvas 的 base 64 编码 PNG 图像，类似于:

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

Base 64 编码部分在逗号之后开始，即位置 22。所以您需要做的就是解码字符串，从索引 22 开始:http://jsfiddle.net/eGjak/187/ .

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

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