Load-image.js base64 图像的大小是 filereader base64 图像的 10 倍？

Question

当您使用 iPhone 时，我使用 load-image.js 来获得正确方向的 base64。它有效，它将图像转换为 base64，但是如果我上传一个 70k 的图像，那么当它是 base64 图像时它将是 701k？

如果我只使用 fileReader，那么它作为图像是 70k，作为 base64 是 70k！

那么如何使用 load-image.js 使其更小 - 更轻？

这就是我现在使用 load-image.js 的方式

var file='';
file = document.getElementById('file-input').files[0],
        options = {
            canvas: true,
            maxWidth: 600,
        };

    if (!file) {
        return;
    }

    // Use the "JavaScript Load Image" functionality to parse the file data
    loadImage.parseMetaData(file, function(data) {
        // Get the correct orientation setting from the EXIF Data
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }
        // Load the image from disk and inject it into the DOM with the correct orientation
        loadImage(
            file,
            function(canvas) {
                var imgDataURL = canvas.toDataURL();

所以 imgDataURL 中的 base64 是我使用的，而且文件大小变得如此之大！我使用加载-image.all.min.js文件。

我想要的只是将图像转换为 base64，并且当我在 iPhone.

上执行时，它从一开始就具有正确的方向

非常感谢任何意见，谢谢。

编辑：我刚刚意识到上传的图像是一个 .jpg 文件，当仅使用 filereader 上传时，它仍然是 base64 中的 .jpg 文件，但加载图像正在将其更改为 .png 图像。所以这就是我猜的问题。那么我怎样才能把它变成带有加载图像的 .jpg 文件呢？

Answer 1

经过 base64 编码后，任何东西 都会变大大约 33%。

所以不可能70K 图像是 70K base64 流，除非在传输过程中丢失了某些东西，或者您在接收和 base64 解码后检查图像。每3个字节变成4个base64字符，所以70K至少要变成93K

现在 - 什么可以使图像放大 10 倍？ load-image.js 具有缩放功能。您确定您发送的图像在到达时与离开时的尺寸相同（以像素为单位）吗？或者可能与 canvas 分辨率有关：

aspectRatio: Crops the image to the given aspect ratio (e.g. 16/9). Setting the aspectRatio also enables the crop option.

pixelRatio: Defines the ratio of the canvas pixels to the physical image pixels on the screen. Should be set to window.devicePixelRatio unless the scaled image is not rendered on screen. Defaults to 1 and requires canvas: true.

更新：要以给定的格式和质量发送图像，请明确指定它们：

    var imgDataURL = canvas.toDataURL('image/jpeg', 1.0);

默认值可能取决于浏览器。我在 Firefox 中成功上传了 JPEG 文件。除非你在某处设置了一些覆盖...?

Load-image.js base64 图像的大小是 filereader base64 图像的 10 倍？

Load-image.js base64 image gets 10 times as large as a filereader base64 image?

base64