最近專案需要做截圖功能，然而不是做APP呼叫裝置截圖，所以截圖通過HTML來實現，經過查詢資料，記錄一下。 

對於後臺，該部落格使用的是sun.misc.BASE64Decoder.jar來解析Base64圖片URL。但在專案構建過程中，發現Sun公司的sun.misc.BASE64Decoder.jar是非開源jar包，在maven庫沒有該包，而且通過資源顯示說sun.misc.BASE64Decoder該包安全性不高、又沒有開源，所以十分不推薦使用。

所以解析Base64圖片URL的時候，使用另外一個jar包解析commons-codec-1.10.jar。注意不要使用到JDK的包，可能由於專案遷移JDK版本不一樣或不存在而報錯。

// Base64解碼
org.apache.commons.codec.binary.Base64 base64 = new org.apache.commons.codec.binary.Base64();
byte[] bytes = base64.decode(base64StrImgData);

maven pom.xml配置

<dependencies> 
    <!-- Base64編碼需要 --> 
    <dependency> 
        <groupId>org.apache.commons</groupId> 
        <artifactId>codec</artifactId> 
        <version>1.10</version> 
        <scope>system</scope> 
        <systemPath>${project.basedir}/lib/commons-codec-1.10.jar</systemPath> 
    </dependency> 
</dependencies>
 

對於出現問題，

我遇到了html2canvas截圖時丟失樣式的問題。

但搜尋發現出現此問題提問的貼都沒有人回答， 經過自己的研究總結髮現是由於我使用了CSS3的樣式沒有寫入瀏覽器相容性樣式，導致截圖時樣式解析出錯。樣式應該考慮到相容性問題，例：

background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff));
background-image: -webkit-linear-gradient(#fff,#fff);
background-image: -moz-linear-gradient(#fff,#fff);
background-image: -ms-linear-gradient(#fff,#fff);
background-image: -o-linear-gradient(#fff,#fff);
background-image: linear-gradient(#fff,#fff);