您可以通过操作base64代码来调整base64图像的大小或更改其分辨率吗? [英] Can you resize or change resolution of base64 image through manipulating the base64 code?

问题描述

有许多将图像编码为Base64的示例. 但是，有没有一种方法可以通过简单地操作实际的Base64代码来更改该图像的大小或分辨率?

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代码可能是:

Your Base64 code might be:

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE .....

iVBORw0KGgoAAAANSUhEUgAAAWQAAAFjCAIAAACFfObPAAAAA3NCSVQICAjb4U/gAAAgAE ...etc..

是否有一种算法或方程式可让您操纵Base64字符串来更改图像大小或更改分辨率?

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?

非常感谢您的帮助:)

更新

我因为提出这个问题而被降级，这有点苛刻.谁在降级我，为什么?

I find it a little harsh that I am being downgraded for asking this question. Who is downgrading me and why?

我的问题针对的是正在研究渐进式图像，数据处理和WebP格式的人们.这是对图像的无损压缩.

My question is aimed at people looking at progressive images, data manipulation and WebP formats..which is a lossless and lossy compression of images..

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

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.

那我为什么被降级?

我没有显示研究结果，因为我知道我已经看过什么. 为什么这没有用? 为什么不清楚? 我觉得我被降级了，因为别人没有得到它..这不是我的错.

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.

推荐答案

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

这篇关于您可以通过操作base64代码来调整base64图像的大小或更改其分辨率吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！