jQuery 網頁特定區塊的截圖外掛 html2canvas

待會再看

要把網頁的畫面做成截圖,通常需要用到 canvas 才有辦法。但是這件事情在某種程度上面是不太符合需求的。因為我們可能是要把畫面存檔,例如交易畫面之類的,或是特定的文字圖片區塊,如果說這些東西都要進到 canvas 裡面不太合理。

終於被我找到了這個外掛 html2canvas

一樣是要搭配 jQuery 的

可以先去一下官網看一下

用法非常的簡單

先掛上這個 js

html2canv.js

在 script 的部分

 html2canvas($("#canvas2"), {
                onrendered: function(canvas) {
                    window.open(canvas.toDataURL("image/png"));
                }
            });

這段是說當執行的時候就會把 id=canvas2 的內容做成 canvas 

接下來就可以使用 canvas 本身的功能 canvas.toDataURL("image/png") 來取得這張圖的 URL

 

 

番外篇:將圖檔快照後直接下載

通常我們在做這件事情的時侯,其實會需要把這張圖直接下載,不然拍起來要幹嘛呢?

不過很討厭的是,圖檔這種東西瀏覽器支援顯示,所以預設他會用開啟的方式打開,如果要下載就必須要在上面按右鍵。經過一番實驗被我找到方法了!!

先說 script

 html2canvas($("#canvas2"), {
                onrendered: function(canvas) {
                    $("#auto").attr('href', canvas.toDataURL("image/png"));
                    $("#auto").attr('download','download.png');
                    lnk = document.getElementById("auto");
                    lnk.click();
                }
            });

接下來是 html 的部分請加上一個 a 的標籤 id=auto 然後利用 style="display:none;"讓它隱藏起來

看一下上面這段 script 紅色的部分就是把圖檔的連結位址寫進去 a 標籤中,然後給一個 download 的參數,這個參數也是在 html5 之後多出來的,就是告訴瀏覽器說我要用這個檔名下載,請不要打開。

接著就讓它執行

lnk = document.getElementById("auto");
lnk.click();

這個是讓 id = auto 的東西被自動點擊,那麼這個圖檔就會順利的被下載下來而不是用瀏覽器打開瞜

文章編輯時間:2014-03-06