如何使用 javascript 调整 Base64 编码的数据 URI PNG 的大小？

发布于 2024-11-28 02:06:22 字数 394 浏览 1 评论 0原文

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

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

在 javascript 或其某些风格中是否有一种方法可以将我收到的图像大小调整为较小的 Base64 数据 URI 等效项，例如动态生成给定图像的缩略图版本？

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

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

原文

I have a Base64 encoded PNG squeezed out of a web socket into a web page, that I display using Data URI

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

Is there a way in javascript or some of its flavours to resize the image I receive into a smaller base64 data URI equivalent, as to dinamically generate a thumbnail version of the given image?

Or maybe I could just duplicate the HTML Image object and play with it as a whole, using some obscure jQuery magic trick that I haven't find out yet.

If this can be done in javascript on client side, I could avoid another HTTP request to my server deamon, which would take some time to reprocess and deliver the resized image.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鞋纸虽美，但不合脚ㄋ〞 2024-12-05 02:06:23

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

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

You can clone image with jQuery, and as for resizing - maybe trivial changing width and height of html element?

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

回复收藏 0 原文

陌生 2024-12-05 02:06:23

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

尝试这样的事情：

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

尽管你给它一个图像，它返回一个画布，但我很挣扎，我花了几周的时间才明白发生了什么！
现在我使用我在网络上找到的 Canvas2Image 来返回图像。

The Pixastic library will do that and it work surprisingly fast, even on a mobile device.

Try someting like :

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

I struggled though with the fact that you give it an image and it return a Canvas, took me weeks to understand what was going on !!!
Now I use Canvas2Image I found somewhere on the web to get back to an image.

回复收藏 0 原文