在 JavaScript 中调整 Base-64 图像的大小而不使用画布 [英] Resize a Base-64 image in JavaScript without using canvas

问题描述

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

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

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

解决方案

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

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

function imageToDataUri(img, width, height) {//创建一个离屏画布var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');//将其尺寸设置为目标尺寸画布.宽度 = 宽度；canvas.height = 高度；//将源图像绘制到离屏画布中:ctx.drawImage(img, 0, 0, 宽度, 高度);//使用 base64 版本的压缩图像将图像编码为 data-uri返回画布.toDataURL();}

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

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

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

如果您的应用只提供 base64 编码图像(我假设它们是带有 base64 数据的 data-uri?)那么您需要先加载"图像:

var img = new Image;img.onload = resizeImage;img.src = originalDataUriHere;函数 resizeImage() {var newDataUri = imageToDataUri(this, targetWidth, targetHeight);//从这里继续...}

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

function base64ToDataUri(base64) {返回'数据:图像/png；base64，'+ base64；}

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

I need a way to resize pictures in JavaScript without using a HTML element.

My mobile HTML app captures photos and then converts them to base64 strings. Thereafter I need to resize them before they are sent to the API in order to save storage space.

I'm looking for a different and more suitable way for resizing than using a canvas element, is there a way?

解决方案

A way to avoid the main HTML to be affected is to create an off-screen canvas that is kept out of the DOM-tree.

This will provide a bitmap buffer and native compiled code to encode the image data. It is straight forward to do:

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();
}

If you want to produce a different format than PNG (default) just specify the type like this:

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

Worth to note that CORS restrictions applies to toDataURL().

If your app is giving only base64 encoded images (I assume they are data-uri's with base64 data?) then you need to "load" the image first:

var img = new Image;

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

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

If the source is pure base-64 string simply add a header to it to make it a data-uri:

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

Just replace the image/png part with the type the base64 string represents (ie. make it an optional argument).

这篇关于在 JavaScript 中调整 Base-64 图像的大小而不使用画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！