在 JavaScript 中调整 Base-64 图像的大小而不使用画布

Question

我需要一种无需使用 HTML 元素即可在 JavaScript 中调整图片大小的方法。

我的移动 HTML 应用程序捕获照片，然后将它们转换为 base64 字符串。此后，我需要在将它们发送到 API 之前调整它们的大小以节省存储空间。

我正在寻找一种与使用画布元素不同且更合适的方法来调整大小，有什么方法吗？

Answer 1

您可以使用此处所示的原始 Base64 图像处理。

看起来很难（仅适用于 png）以及为什么许多人选择使用画布

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

Answer 2

避免主要 HTML 受到影响的一种方法是创建一个远离 DOM 树的屏幕外画布。

这将提供位图缓冲区和本机编译代码来编码图像数据。这样做很简单：

function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}

如果您想生成与 PNG（默认）不同的格式，只需像这样指定类型：

return canvas.toDataURL('image/jpeg', quality);  // quality = [0.0, 1.0]

值得注意的是，CORS 限制适用于 toDataURL()。

如果您的应用仅提供 base64 编码图像（我假设它们是带有 base64 数据的 data-uri？）那么您需要先“加载”图像：

var img = new Image;

img.onload = resizeImage;
img.src = originalDataUriHere;

function resizeImage() {
    var newDataUri = imageToDataUri(this, targetWidth, targetHeight);
    // continue from here...
}

如果源是纯 base-64 字符串，只需向其添加标头以使其成为 data-uri：

function base64ToDataUri(base64) {
    return 'data:image/png;base64,' + base64;
}

只需将image/png 部分替换为base64 字符串表示的类型（即，使其成为可选参数）。

Answer 3

Ken 的答案是正确的，但他的代码不起作用。我对其进行了一些调整，现在它可以正常工作了。调整数据 URI 的大小：

// Takes a data URI and returns the Data URI corresponding to the resized image at the wanted size.
function resizedataURL(datas, wantedWidth, wantedHeight)
    {
        // We create an image to receive the Data URI
        var img = document.createElement('img');

        // When the event "onload" is triggered we can resize the image.
        img.onload = function()
            {        
                // We create a canvas and get its context.
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                // We set the dimensions at the wanted size.
                canvas.width = wantedWidth;
                canvas.height = wantedHeight;

                // We resize the image with the canvas method drawImage();
                ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);

                var dataURI = canvas.toDataURL();

                /////////////////////////////////////////
                // Use and treat your Data URI here !! //
                /////////////////////////////////////////
            };

        // We put the Data URI in the image's src attribute
        img.src = datas;
    }
// Use it like that : resizedataURL('yourDataURIHere', 50, 50);

Answer 4

是的，你可以。这些解决方案不仅适用于将图像转换为 base64，还适用于调整大小。

1. 您可以通过jpg-js将js文件转换为图像位图。并且您只能通过此库调整大小，但是如果从非常大的图像调整到非常小的大小，质量会很差。高品质的最佳方式res images 是通过jpg-js将文件转换为位图，然后通过Pica lib调整此位图的大小。
2. 您可以通过jpg-js从文件中获取图像数据（或在画布上绘制图像），然后通过调整libpica的大小来调整canvasImageData的大小。 （适用于高分辨率图像，没有画布大小限制）
3. 您可以使用屏幕外画布，无需将画布附加到正文，并调整图像大小。此解决方案会更快，但对于高分辨率图像（例如 6000x6000 像素）来说会是更差的解决方案。在这种情况下，结果画布可能质量很差或只是空的，或者浏览器可能会因内存限制异常而下降。 （适用于普通和小图像）

JPG-js 和 Pica 根本不会使用 dom 元素。这些库仅适用于图像数据，没有 dom 元素（画布和图像）。

关于画布，尺寸限制见post

Answer 5

Pierrick Martellière 是最好的答案，我只是想指出您应该使用异步函数来实现它。之后，您将能够执行以下操作：

var newDataUri = await resizedataURL(datas,600,600);

这将等待函数的结果，然后再进行下一步。这是一种更简洁的代码编写方式。这是 Pierrick 的功能，稍作修改：

// Takes a data URI and returns the Data URI corresponding to the resized image at the wanted size.
function resizedataURL(datas, wantedWidth, wantedHeight){
    return new Promise(async function(resolve,reject){

        // We create an image to receive the Data URI
        var img = document.createElement('img');

        // When the event "onload" is triggered we can resize the image.
        img.onload = function()
        {        
            // We create a canvas and get its context.
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            // We set the dimensions at the wanted size.
            canvas.width = wantedWidth;
            canvas.height = wantedHeight;

            // We resize the image with the canvas method drawImage();
            ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);

            var dataURI = canvas.toDataURL();

            // This is the return of the Promise
            resolve(dataURI);
        };

        // We put the Data URI in the image's src attribute
        img.src = datas;

    })
}// Use it like : var newDataURI = await resizedataURL('yourDataURIHere', 50, 50);

更多详情可以查看 MDN 文档：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

Answer 6

我认为这种方法是解决此问题的最佳方法。

function base64Resize(sourceBase64, scale , callBack) {

    const _scale = scale;
    var img = document.createElement('img');
    img.setAttribute("src", sourceBase64);

    img.onload = () => {
        var canvas = document.createElement('canvas');
        canvas.width = img.width * _scale;
        canvas.height = img.height * _scale;

        var ctx = canvas.getContext("2d");
        var cw = canvas.width;
        var ch = canvas.height;
        var maxW = img.width * _scale;
        var maxH = img.height * _scale;

        var iw = img.width;
        var ih = img.height;
        var scl = Math.min((maxW / iw), (maxH / ih));
        var iwScaled = iw * scl;
        var ihScaled = ih * scl;
        canvas.width = iwScaled;
        canvas.height = ihScaled;
        ctx.drawImage(img, 0, 0, iwScaled, ihScaled);
        const newBase64 = canvas.toDataURL("image/jpeg", scl);

        callBack(newBase64);
    }
}

重要的是你应该使用img.onload事件。