javascript 你可以通过操作base64代码来调整base64图像的大小或改变分辨率吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33291436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you resize or change resolution of base64 image through manipulating the base64 code?
提问by Pandafinity
There are lots of examples of encoding images to Base64. But is there a way of changing the size or resolution of that image by simply manipulating the actual Base64 code?
有很多将图像编码为 Base64 的示例。但是有没有办法通过简单地操作实际的 Base64 代码来更改该图像的大小或分辨率？
Your Base64 code might be:
您的 Base64 代码可能是：
iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE ...etc..
iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE ...等..
Is there an algorithm or equation that allows you to manipulate that Base64 string to change the size of the image or change the resolution?
是否有算法或方程可以让您操纵该 Base64 字符串来更改图像的大小或更改分辨率？
Thanks for your help in advance :)
提前感谢您的帮助:)
UPDATE
更新
I find it a little harsh that I am being downgraded for asking this question. Who is downgrading me and why?
我觉得我因为问这个问题而被降级有点苛刻。谁在降级我，为什么？
My question is aimed at people looking at progressive images, data manipulation and WebP formats..which is a lossless and lossy compression of images..
我的问题是针对那些看渐进式图像、数据处理和 WebP 格式的人。这是一种无损和有损的图像压缩。
I am not interested in creating Canvas elements and manipulating the contents of the canvas. I am interested in an approach that an be used on the Client or Server, and can be sent via http or socket communication.
我对创建 Canvas 元素和操作 Canvas 的内容不感兴趣。我对在客户端或服务器上使用的方法感兴趣，并且可以通过 http 或套接字通信发送。
So why am I being downgraded?
那为什么我会被降级？
UPDATE 2
更新 2
I'm not showing research because I know what I have already looked at.. Why is this not useful? Why is this unclear? I feel I am being downgraded because someone else just doesn't get it..which is not my fault.
我没有展示研究，因为我知道我已经看过什么..为什么这没有用？为什么这不清楚？我觉得我被降级了，因为别人就是不明白……这不是我的错。
回答by hampusohlsson
It is possible by using the <canvas>element
可以通过使用<canvas>元素
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 32; // target width
canvas.height = 32; // target height
var image = new Image();
document.getElementById("original").appendChild(image);
image.onload = function(e) {
ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, canvas.width, canvas.height
);
// create a new base64 encoding
var resampledImage = new Image();
resampledImage.src = canvas.toDataURL();
document.getElementById("resampled").appendChild(resampledImage);
};
image.src = "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABaFBMVEVMoUNNoURNokROokVPokZQo0dRpEhSpElTpUpUpUtVpk1Wpk1Xp09ZqFBZqFFaqFJbqVJbqVNdqlVeqlVeq1Zgq1hgrFhirFpirVtlrl5mr15nr2BpsGFqsWNssmRus2dvs2hwtGlxtGlytWtztWx4uHF5uXJ6uXR+u3d/vHiAvHqBvXqCvXyDvn2Evn6HwIGMw4aPxImRxYuUx46Vx5CWyJGbypacy5egzZuizp2kz5+kz6Cm0KGn0aKp0qSp0qWs1Kiu1Kmw1ayy1q602LC12LG627e83Lm+3bvF4cPI4sXJ48bK48jL5MjM5MrN5cvP5szQ5s7R58/S59DU6dLV6dPa7Nnf7t7g79/h79/i8OHj8OLk8ePm8uXn8ubp9Ojq9Onr9ers9evt9ezu9u3v9+7w9+/x+PDy+PHy+PL0+fP0+fT1+vX2+vX3+/f4+/j5/Pj5/Pn6/Pr7/fv9/v3+/v7+//7////VxbUKAAABVElEQVR4Ae3L65cKcQDH4e9YYe2utMnFsuu+rCyFKDVyKSTG/X6RVO5Ums+/r3HQOZz5zcyb7U3P+0drbcLKVRVF/DacVQSbnkL/oCJY+Axv4orgpAvOlMJYvJXU0GWgqBBSDd4ekhR7CINjClYGellJ21rwfocCWYUBcDUmHfkBj2IKlv4EPEhI54GKQlh4DjQOyKoBp2Syf1qemZtAN6PZV/Btr/xNdz5cnNeQVXKBK+uXvsNd+TsH9K4taujEF+D+1iw35uTP7gK4zlFL2vMCeL1vWUaJC208jzMbNFsHzijIxtPP8LzLz62z3UsKwTp+D8/Xyq7DUzKZ36nflq73AXpbZFSi49irKXm2lz9CVWZ3+KVVL6aT0ubcy90ye8JIs1ZYiStIYqVQa/JXXr4A/ZFMF+stPMsSYAojqVXbac+EDiPmwD/GH/431mAwhmA28RMGFbXqgVfHnwAAAABJRU5ErkJggg==";<p>Original (48x48)</p>
<div id="original"></div>
<p>Resampled (32x32)</p>
<div id="resampled"></div>