Question

有许多将图像编码到Base64的示例。但有没有办法通过简单地操作实际的Base64代码来改变图像的大小或分辨率？

您的Base64代码可能是：

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U / gAAAgAE ...等..

是否有算法或公式允许您操作Base64字符串以更改图像大小或更改分辨率？

提前感谢您的帮助：）

更新

我发现因为提出这个问题而被降级，我觉得有点苛刻。谁在降级我，为什么？

我的问题是针对那些看着渐进式图像，数据处理和WebP格式的人......这是一种无损且有损的图像压缩。

我对创建Canvas元素和操作画布内容不感兴趣。我感兴趣的是在客户端或服务器上使用的方法，可以通过http或套接字通信发送。

那我为什么要降级呢？

更新2

我没有展示研究，因为我知道我已经看过了什么.. 为什么这没用？为什么不清楚？我觉得我被降级了，因为其他人都没有得到它......这不是我的错。

Answer 1

可以使用<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>

Answer 2

如果有人想知道节省费用以及如何保持宽高比：

将100kb jpg缩放到200像素宽时仅保存60％

https://www.base64-image.de/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Original</p>
<div id="original"></div>
<p>Resampled</p>
<div id="resampled"></div>
<script>
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    document.getElementById("original").appendChild(image);

    image.onload = function (e) {
        var pixelWidth = 200;
        var scale = pixelWidth / image.width;
        canvas.width = scale * image.width;
        canvas.height = scale * image.height;
        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);
        var a = image.src.length;
        var b = resampledImage.src.length
        alert('Savings: ' + Math.floor(100*(a-b)/a) + '%');
    };

    image.src = "data:image/jpeg;base64.... ADD YOUR CODE HERE";
</script>
</body>
</html>

Answer 3

还请注意，您也可以使用0到1作为第二个参数来更改图像质量。

{{1}}

Answer 4

这很老了，但是您可以将它作为带有url和background-size：contain;的背景使用。这样，图像应显示在高度范围内，并随您建立，而不会被容器剪切。

你能通过操纵base64代码来调整大小或改变base64图像的分辨率吗？

更新2

4 个答案: