获取HTML5 canvas元素的Image src属性值

时间:2011-05-03 04:26:37

标签: html5 canvas

我一直在寻找 - 我在想我想做什么是不可能的,但我想我会检查。

我在HTML页面上有一些画布如下:(这些是下面的ID)

  • canvasMain - 这将显示 图像的大版本
  • canvasThumbnail1 - 这是 显示缩略图
  • canvasThumbnail2 - 与...相同 以上...等

我将它用于绘制canvasMain的缩略图内容。问题是因为画布是立即的,它正在将像素从canvasThumbnail复制到canvasMain。这导致像素化图像放大。

我想要做的是点击其中一个canvasThumbnails,并能够将Image.src属性作为字符串抓取,然后将其拉入canvasMain,而不是实际将像素从一个画布复制到另一个画布。基本上只是从我可以拉入图像的地方获取地址(本地或说在Flickr上)。将图像拉入画布似乎可以很好地扩展它。

从我所看到的,我不认为Image.src值可以通过2D上下文访问。我枚举了它的属性,只发现了嵌套对象或本机代码返回。

我想如果我点击canvasThumbnail,然后使用(this)获取对该canvas元素的引用,然后获取该画布的2dcontext,我可以使用该上下文的属性来获取字符串表示Image.src的值。

有什么想法吗? 感谢

1 个答案:

答案 0 :(得分:0)

不知何故,您将图像绘制到canvasThumbnail1上,大概来自(高分辨率)图像元素。

canvasThumbnail1或任何画布对其上绘制的东西没有记忆。因此,如果您将一个大图像绘制到一个小的canvasThumbnail上,那么这个小画布上就不存在高分辨率数据。要获得它,你必须再次使用原始图像,否则你必须从一开始就画到更大的画布。

换句话说,您不需要将缩略图绘制到主缩放图上,而是需要将Image元素(用于制作缩略图)重新绘制到主图像上。