如何使用 javascript 调整 Base64 编码的 Data URI PNG 的大小？答案

【问题标题】：How to resize a Base64 encoded Data URI PNG using javascript?如何使用 javascript 调整 Base64 编码的 Data URI PNG 的大小？
【发布时间】：2011-10-20 03:25:08
【问题描述】：

我有一个 Base64 编码的 PNG 从 Web 套接字中挤出到一个网页中，我使用 Data URI 显示它

    <img src="data:image/png;base64, --base64 png-- ">

在 javascript 或其某些风格中是否有办法将我收到的图像调整为较小的 base64 数据 URI 等效值，以便动态生成给定图像的缩略图版本？

或者也许我可以复制 HTML Image 对象并将其作为一个整体使用，使用一些我还没有发现的晦涩的 jQuery 魔术技巧。

如果这可以在客户端的 javascript 中完成，我可以避免向我的服务器守护程序发出另一个 HTTP 请求，这将需要一些时间来重新处理和传递调整大小的图像。

【问题讨论】：

标签： javascript jquery base64 image-resizing data-uri

【解决方案1】：

Pixastic 库可以做到这一点，而且运行速度惊人，即使在移动设备上也是如此。

试试类似的东西：

    Pixastic.process(image, "resize", { "width" : 200, "height" : 200 }, function (oCanvas){ //callback code here});

虽然你给它一个图像并且它返回一个画布，但我很挣扎，我花了几个星期才明白发生了什么！！！现在我使用我在网上某处找到的 Canvas2Image 来返回图像。

【讨论】：

【解决方案2】：

您可以使用 jQuery 克隆图像，以及调整大小 - 可能只是简单地更改 html 元素的宽度和高度？

$('.somewhere img').clone().appendTo('.elsewhere').width(16).height(16)

【讨论】：

【解决方案3】：

maxImage 插件声称能够调整图像大小。 TMMV，我自己没试过。

【讨论】：