使用jQuery加载二进制图像

Question

我想使用jquery ajax显示从特定URL下载的图像。我该如何实现它？（不设置图片.src）我还需要旋转和缩放该图像。

- Mark

---

你可以使用Data:url来完成。http://en.wikipedia.org/wiki/Data:_URL。请查看https://developer.mozilla.org/en/Canvas_tutorial/Using_images下的**通过data:url嵌入图像**部分的信息。 - Niklas

你能深入解释一下为什么需要这样的方法吗？请记住，jQuery是在HTML“旁边”运行的，迟早你会依赖于标签IMG或CSS的background-image来显示图像。 - Tuco

为什么不隐藏img，用src替换它，然后再淡入呢？ - NickAldwin

这似乎很公平。但是你能用Javascript编辑图像吗？例如重新缩放/旋转或在其上绘制吗？ - Mark

你可以使用JavaScript的Image对象来加载和操作图像，而无需将它们作为DOM的一部分。 （好吧，要“操作”它们，您需要使用画布，但是您可以从Image中获取画布，就像从img中获取一样） - Jamie Treworgy

Answer 1

为了防止图像闪烁，您可以在加载前先将图像 隐藏，并在 src 加载完成后再 显示。

$('<img>').hide().attr('src', 'img_url').onload(function() {$(this).show()});

如果要旋转或对图像进行其他变换，我建议使用Pixastic库，该库在各种浏览器上都兼容。

- steveyang

Answer 2

你可以创建一个 <canvas> 并将其填充为图像。加载后，可以旋转、缩放、绘制等操作图像。

这里有一个很好的教程（链接），可以完全满足你的需求。

为了在IE中运行它，我建议使用ExplorerCanvas。

- Simeon