獲取HTML5 canvas元素

我一直在尋找圖片src屬性值 - 在想什麼，我想做的事情是不可能的，但想到我會檢查。獲取HTML5 canvas元素

我有一個HTML頁面上的幾個畫布如下：（下面這些標識）

canvasMain - 這是要顯示一個大版本的圖像的
canvasThumbnail1 - 這是怎麼回事到顯示縮略圖
canvasThumbnail2 - 同上 ...等

我有它活像國王在那裏我畫的畫布主要與縮略圖的內容。問題是因爲畫布立即將畫布複製到canvasThumbnail的canvasMain中。這導致放大的像素化圖像。

我想要做的是點擊其中一個canvasThumbnails，並能夠將Image.src屬性作爲字符串獲取，然後將其拉到canvasMain中，而不是實際上將像素從一個畫布複製到另一個畫布。基本上只需抓住地圖（本地或在Flickr上說）就可以從圖像中拉出。將圖像拉入畫布似乎很好地縮放它。

從我所看到的，我不認爲Image.src值是通過2D上下文訪問。我通過它的屬性枚舉，只發現嵌套的對象或本機代碼返回。

我想如果我點擊canvasThumbnail，然後使用（this）獲取對該canvas元素的引用，然後獲取該canvas的2dcontext，我可能可以使用該上下文的屬性來獲取代表Image.src值的字符串。

任何想法？謝謝

來源

2011-05-03 Tom

不知何故，你把圖像繪製到canvasThumbnail1，大概是從（高分辨率）圖像元素。

的canvasThumbnail1，或任何與此有關的畫布，對事情畫上它沒有記憶。因此，如果您將大圖像繪製到小畫布上，則高分辨率數據不會存在於該小畫布上。爲了得到它，你必須再次使用原始圖像，否則你必須從一開始就畫到更大的畫布。

換句話說，而不是畫的縮略圖到主，你需要重新繪製的圖像元素（即你用來製作縮略圖）到主。

來源

2011-05-03 14:23:14

是的，這是正確的。我創建了一個畫布，然後獲取了上下文。然後我用Image.src創建了一個圖像對象，這是一個高分辨率圖像。基本上我希望能夠創建一個縮略圖，然後點擊它在更大的畫布上顯示它。 – Tom 2011-05-03 16:17:11

因此，所有你需要做的就是從Image對象繪製兩次 – 2011-05-03 16:23:15

是的，正確的。我創建了一個畫布，然後獲取了上下文。然後我創建了一個Image.src的圖像對象，這是一個高分辨率的圖像，並將其繪製到畫布上。基本上我希望能夠創建一個縮略圖，然後點擊它在更大的畫布上顯示它。我希望可能有一個可用的屬性，可以讓我從URI中提取圖像，而不是將像素複製過來。我用它做了一些測試，看到畫布可以很好地縮放任何尺寸的圖像。我只是想驗證我自己必須爲此編寫代碼。謝謝。 – Tom 2011-05-03 16:23:45

獲取HTML5 canvas元素

回答

相關問題