我需要一种无需使用 HTML 元素即可在 JavaScript 中调整图片大小的方法。
我的移动 HTML 应用程序捕获照片,然后将它们转换为 base64 字符串。此后,我需要在将它们发送到 API 之前调整它们的大小以节省存储空间。
我正在寻找一种与使用画布元素不同且更合适的调整大小的方法,有没有办法?
我需要一种无需使用 HTML 元素即可在 JavaScript 中调整图片大小的方法。
我的移动 HTML 应用程序捕获照片,然后将它们转换为 base64 字符串。此后,我需要在将它们发送到 API 之前调整它们的大小以节省存储空间。
我正在寻找一种与使用画布元素不同且更合适的调整大小的方法,有没有办法?
避免主要 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 字符串,只需向其添加一个标头即可使其成为数据 uri:
function base64ToDataUri(base64) {
return 'data:image/png;base64,' + base64;
}
只需将image/png
部分替换为base64 字符串表示的类型(即使其成为可选参数)。
肯的答案是正确的答案,但他的代码不起作用。我对其进行了一些调整,现在它可以完美运行。要调整数据 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);
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
是的你可以。这些解决方案不仅适用于将图像转换为 base64,还适用于调整大小。
Jpg-js 和 Pica 根本不会使用 dom 元素。这些库仅适用于图像数据,没有 dom 元素(画布和图像)。
关于画布,尺寸限制见这篇文章
您可以使用原始 Base64 图像处理,如下所示。
看起来很难(仅适用于 png)以及为什么许多人选择使用画布
http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/