如果您的应用仅提供 base64 编码的图像(我假设它们是带有 base64 数据的 data-uri?),那么您需要先加载"图像:var img = new Image;img.onload = resizeImage;img.src = originalDataUriHere;函数调整大小图像(){var newDataUri = imageToDataUri(this, targetWidth, targetHeight);//从这里继续...}如果源是纯 base-64 字符串,只需向其添加一个标头即可使其成为数据 uri:function base64ToDataUri(base64) {返回 '​​data:image/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 图像的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 07:29
查看更多