html2canvas.js官網：http://html2canvas.hertzen.com/
1.前期準備
利用 html2canvas.js文件，如果沒有則可點擊下載：https://download.csdn.net/download/mufeng633/11159717
實現原理：
利用html2canvas.js文件，將渲染的html進行局部截圖生成圖片的Base64碼，之後，可以在後臺通過解析Base64 獲取到圖片。
實現方法有如下兩種：
第一種.
語法如下：
html2canvas(document.getElementById('id'))
.then(function(canvas){
document.body.appendChild(canvas);
});
實現如下
html2canvas($("#CCCCC"), {
width: 400, //這是我寫死的 寬 高 度
height: 220,
useCORS:true,
onrendered: function(canvas) {
gdzherf = canvas.toDataURL();
gdzherf = gdzherf.replace(/\s/g,"+");
console.log(gdzherf);
},
}).then(function(){
//下載文件
$.ajax({
type:'post',
url: $.contextPath+'/signet-management!downloadGdz.json',
data:{"gdzherf":encodeURI(encodeURI(gdzherf)),"id":id},
dataType : 'json',
success:function(data){
}
});
});
第二種.
html2canvas(document.getElementById("id"), {
useCORS: true, //是否跨域
background: "red", //背景
height: $("#id").outerHeight() + 20,
width: $("#id").outerWidth() + 20 ,
onrendered: function (canvas) {
url = canvas.toDataURL('image/jpeg', 1.0); //將圖片轉爲base64, 0-1 表示清晰度。默認爲 image/png
}
});
前端代碼：
1.先創建一個待截圖的HTML。
<div id="container2" style="color: #FF0000;display: inline-block; width: 300px;height: 120px" >
<div class="text"> 此<span class="sp"> </span>頁複印於我館 </div>
<div class="text">
<div class="qq"> 全宗<span id="FONDS_CODE" class="sp" style="display:block"></span>
目錄<span id="CATALOGUE_NO" class="sp"></span>
案卷 <span id="FOLDER_NO" class="sp"></span>
第<span id="PAGE_NO" class="sp"></span>頁
</div>
</div>
<div class="text date">
上海市xxxx檔案證明專用章
</div>
<div class="date">
<span id="year"></span>年<span id="month"></span>月<span id="day"></span>日
</div>
</div>
2.當點擊時，獲取到div的id，利用html2canvas.js中的 html2canvas 方法進行截圖
function turnExcel() {
var gdzherf = '';
html2canvas(document.getElementById("container2"),{
useCORS:true, //是否跨域
height: $("#container2").outerHeight() + 20,
width: $("#container2").outerWidth() + 20 ,
onrendered : function (canvas) {
//獲取Base64碼 默認爲 image/png 格式
gdzherf = canvas.toDataURL();
//防止後臺獲取到空格
gdzherf = gdzherf.replace(/\s/g,"+");
$.ajax({
type : "post",
url : "${basePath}moduleFile/downloadCanvas?gdzherf="+encodeURIComponent(encodeURIComponent(gdzherf)),
dataType : "json",
success : function (data) {
alert("保存完成");
}
})
}
})
};
後端實現
@RequestMapping(value = "downloadCanvas")
public void download(HttpServletRequest request) throws IOException {
String gdzherf = request.getParameter("gdzherf"); // Base64碼
gdzherf = java.net.URLDecoder.decode(gdzherf); //解碼
gdzherf=gdzherf.replace("data:image/png;base64,","");//替換生成的前綴
BASE64Decoder decoder = new BASE64Decoder();
byte[] bs = decoder.decodeBuffer(gdzherf);//解密
//生成到目標路徑
for(int k=0;k<bs.length;++k){
if(bs[k]<0){
bs[k]+=256;
}
}
String path = "C:\\Users\\Cc\\Desktop\\對比gc\\我的.png";
OutputStream out = out = new FileOutputStream(path);
out.write(bs);
out.flush();
out.close();
//等比例縮小。 可以不看
BufferedInputStream in = new BufferedInputStream(new FileInputStream("C:\\Users\\Cc\\Desktop\\對比gc\\妮妮2.png"));
Image bi = ImageIO.read(in);
int height=bi.getHeight(null);
int width =bi.getWidth(null);
BufferedImage tag = new BufferedImage(width / 3, height / 3, BufferedImage.TYPE_4BYTE_ABGR_PRE);
tag.getGraphics().drawImage(bi, 0, 0,width / 3, height / 3, null);
BufferedOutputStream out2 = new BufferedOutputStream(new FileOutputStream("C:\\Users\\Cc\\Desktop\\對比gc\\333.png"));
ImageIO.write(tag, "PNG",out2);
in.close();
out2.close();
}
補充：
1.因爲使用該工具不能截圖css屬性爲 display:none 的div. 所以將css設置屬性爲 z-index:-1；層級下沉，完美解決。
2.如果，前端生成的圖片Base64碼，通過在線Base64轉圖片是我們預期想要的結果，但是通過咱們的代碼進行轉換，圖片不是我們預期的結果，猜測是因爲在傳遞參數中，參數不一致導致的。解決方式如下幾種：
1.在前端通過替換空格。直接傳遞該參數。如
gdzherf = gdzherf.replace(/\s/g,"+");
2.在前端處理參數，將處理過的參數，傳遞到後端：如：
data:{"gdzherf":encodeURI(encodeURI(gdzherf))},
或
encodeURIComponent(encodeURIComponent(gdzherf)),
3.通過傳遞處理過的參數，在後臺需進行解碼：
gdzherf = java.net.URLDecoder.decode(gdzherf);
到此，完成。