Question

我使用load-image.js如下所示，以便在使用iPhone时使base64具有正确的方向。它工作，它将图像转换为base64，但如果我上传一个70k的图像，那么当它是base64图像时它将是701k？

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

那么如何才能让它更小 - 使用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就是我用的，那就是文件大小那么大了！我使用load-image.all.min.js文件。

我想要的只是将图像转换为base64，并且当我在iPhone上执行时，它从一开始就具有正确的方向。

任何输入都非常感谢，谢谢。

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

Answer 1

一旦base64＆＃39; ed，任何大约增加33％。

所以它不能 70K图像是70K base64流，除非在传输过程中丢失了某些内容，或者您在接收和base64解码后检查图像。每3个字节变为4个base64个字符，因此70K必须至少变为93K。

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

<强>的aspectRatio ：   将图像裁剪为给定的宽高比（例如16/9）。   设置aspectRatio也会启用裁剪选项。

<强> pixelRatio ：   定义画布像素与物理图像像素的比率   屏幕。除非缩放，否则应设置为window.devicePixelRatio   图像不会在屏幕上呈现。默认为1并需要画布：   真。

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

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

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

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

1 个答案: