DOM中基於像素的圖像處理

Question

作為使用Javascript開發的游戲的一部分，我想要：

1. 從URL加載圖像
2. 對它進行一些基於像素的操作（准確地說，對它進行一些濾色器操作）
3. 將經過處理的圖像作為<IMG>節點放入html文檔的dom

我已經有了一個好主意，該如何做前兩部分-我只是要將圖像繪制到一個看不見的畫布上。 但是我該怎么做最后一個呢？

我考慮過要從畫布中提取原始二進制數據，然后將其轉換為數據URL。 但這對我來說似乎很困難。 沒有更直接的方法可以做到這一點嗎？ 當有幫助時，我有jQuery和jQueryUI可用。

Answer 1

canvas元素具有toDataURL()方法 ，該方法為您提供了立即可用的數據URL。