# Html2Canvas 簡單的網頁擷取工具與下載說明


#### 如果想要製作將網頁其中一個區塊儲存成圖片之後下載到本地端的功能，那可以參考看看這個好用的套件~
#### 它的原理是將你指定的HTML區塊轉換為 canvas之後，再下載成png or jpg 檔案

## 首先先載入[Html2Canvas](https://html2canvas.hertzen.com/)所提供的套件

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

## HTML部分

<div class="box" id="Html2Canvas">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

## JS部分
- `clientWidth & clientHeight`是元素所包含的「子元素」的寬度及高度，其中包含了padding，但不包含邊界及捲軸。
- `useCORS` 允許使用跨網域資源共用，並可正常用`toBolb()`、`toDataURL()`或`getImageData()`等方法輸出並保存圖片。

let dom =document.querySelector("#Html2Canvas"); //---> 要擷取的區塊
html2canvas(dom,{
    width:dom.clientWidth, //------> 頁面寬
    height:dom.clientHeight, //------> 頁面高
    scrollX:0,
    scrollY:0,
    useCORS:true, //------> 允許使用跨網域資源共用
}).then(function (canvas) {
    let a = document.createElement("a");
    a.href = canvas.toDataURL("image/png", 1.0) //---> 1.0 算是原圖輸出了
    console.log(a.href) // -->可以看要下載的圖片內容
    a.download = "image.png";
    a.click();
});

## 注意事項
- Html2Canvas針對一些CSS3的語法會有不支援的情況發生，所以遇到不支援的問題可以利用`javascript`另闢出路。
- Html2Canvas 暫不支援的 CSS 樣式屬性:
:::danger

`background-blend-mode`、`background-clip: text`、`box-decoration-break`、`repeating-linear-gradient()`、`font-variant-ligatures`、`mix-blend-mode`、`writing-mode`、`border-image`、`box-shadow`、`filter`、`zoom`、`transform`
:::
- 之後會出另一篇遇到不支援的問題的一些小方法~
- 新的文章出來拉～[點我！點我！在這邊](https://hackmd.io/@LindaLiu/SJv753S6h)
---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果註解哪裡有錯誤或有問題，歡迎提出來一起討論~~~~