javascript - 在不使用 Canvas 的情况下在 JavaScript 中调整 Base-64 图像的大小

Question

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

我的移动 HTML 应用程序捕获照片，然后将它们转换为 base64 字符串。最后，我想在将它们发送到 API 之前调整它们的大小。

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

Answer 1

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

这将提供位图缓冲区和 native 编译代码来对图像数据进行编码。这样做很简单:

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 字符串，只需向其添加一个 header 使其成为数据 uri:

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

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