获取 HTML5 canvas 元素的图像 src 属性值
我一直在寻找 - 我认为我想做的事情是不可能的，但我想我会检查一下。
我在 HTML 页面上有一些画布，如下所示：（下面是 ID）
- canvasMain - 这将显示 图像
- canvasThumbnail1 的大版本 - 这将是 显示缩略图
- canvasThumbnail2 - 与 上面...等
我让它在我用缩略图的内容绘制canvasMain的地方工作。问题是，由于画布是直接的，所以当像素从 canvasThumbnail 转移到 canvasMain 时，它会复制像素。这导致放大的像素化图像。
我想要做的是单击其中一个 canvasThumbnails，并能够以字符串形式获取 Image.src 属性，然后将其拉入 canvasMain，而不是实际将像素从一个画布复制到另一个画布。本质上，只需获取我可以提取图像的地址（本地地址或 Flickr 上的地址）即可。将图像拉入画布似乎可以很好地缩放它。
据我所知，我不认为 Image.src 值可以通过 2d 上下文访问。我枚举了它的属性，只找到了嵌套对象或本机代码返回。
我想，如果我单击 canvasThumbnail，然后使用 (this) 获取对该画布元素的引用，然后获取该画布的 2dcontext，我也许可以使用该上下文的属性来获取表示Image.src 的值。
有什么想法吗？ 谢谢
I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
- canvasMain - this is going to display
a large version of an image - canvasThumbnail1 - this is going to
display a thumbnail image - canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您以某种方式将图像绘制到
canvasThumbnail1上，大概是来自（高分辨率）图像元素。canvasThumbnail1 或任何与此相关的画布对于其上绘制的内容没有记忆。因此，如果您将大图像绘制到小画布上，则该小画布上不存在高分辨率数据。要获得它，您必须再次使用原始图像，否则您必须从头开始在更大的画布上绘画。
换句话说，您不需要将缩略图绘制到主图上，而是需要将 Image 元素（用于制作缩略图）重新绘制到主图上。
Somehow you painted the image onto
canvasThumbnail1, presumably from a (high resolution) Image element.The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.