使用JavaScript调整Base-64图像的大小，而不使用canvas
我需要一种方法来调整JavaScript中的图片而不使用HTML元素。
我的移动HTML应用程序拍照，然后将其转换为base64string。 此后，我需要在发送到API之前调整它们的大小以节省存储空间。
我正在寻找一种不同的，更合适的方式来调整它们，然后使用canvas元素。 有没有办法？
避免主要HTML受到影响的一种方法是创build一个不在DOM树之外的屏幕外的canvas。
这将提供一个位图缓冲区和本地编译代码来编码图像数据。 这是直截了当的做：
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不同的格式（默认），只需指定types如下：
return canvas.toDataURL('image/jpeg', quality); // quality = [0.0, 1.0]
值得注意的是， CORS限制适用于toDataURL() 。
如果你的应用程序只提供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-64string，只需添加一个头，使其成为一个数据URI：
function base64ToDataUri(base64) { return 'data:image/png;base64,' + base64; }
只需用base64string表示的typesreplaceimage/png部分（即将其设置为可选参数）。
肯的答案是正确的答案，但他的代码不起作用。 我做了一些调整，现在它完美的工作。 调整数据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);
是的你可以。 这些解决scheme适合resize，而不仅仅是将图像转换为base64。
- 您可以通过jpg-js将js文件转换为图像位图，并且只能通过这个libresize，但是在从非常大的图像调整为非常小的情况下，质量将会非常差。高分辨率图像的最佳方式是通过jpg-js将文件转换成位图，然后通过Pica lib调整这个位图的大小。
- 您可以通过jpg-js（或在canvas上绘制图像）从文件中获取图像数据，然后通过调整lib pica的大小来调整canvasImageData的大小。 （适用于高分辨率图像，不受canvas大小的限制）
- 您可以使用屏幕外canvas，而无需将canvas附加到身体上，并调整图像大小。 这种解决scheme将会更快，但对于高分辨率图像来说将是更糟的解决scheme，例如6000×6000像素。 在这种情况下，结果canvas可能质量差或只是空的，或者浏览器可能会因内存限制exception而下降。 （适合正常和小图片）
jpg-js和Pica根本不会使用dom元素。 这些库只与图像数据，没有DOM元素（canvas和图像）。
关于canvas，尺寸限制看这个职位
您可以使用原始的Base64image processing，如下所示。
看起来很难（只为PNG），为什么很多人select使用canvas
http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/
