玩转html2canvas以及常见问题解决
前端⼩伙伴经常会遇到页⾯截图或者把⽹页中指定的区域(某个⼤div)的内容转换成png的图⽚。这个时候常常会⽤到html2canvas库来实现,js真的很强⼤。
我最近也遇到了⼀个需求,需要把输⼊的⽂本框⾥⾯的⽂字转换成带有字体样式的图⽚。于是去研究了⼀下html2canvas。
html2canvas官⽹是:
安装⽅式有三种,第1种是⽤npm进⾏安装:
npm install --save html2canvas
第⼆种是⽤yarn,命令如下:
yarn add html2canvas
第三种是直接下载html2canvas.js或者压缩版本html2canvas.min.js。然后直接script⽅式引⼊到需要使⽤这个js库的html⽂件中即可。
官⽹给的案例如下(usage), ⾸先是html部分,有⼀个div:
<div id="capture" >
<h4 >Hello world!</h4>
</div>
js部分如下:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
这段代码就是把id为capture的div传给html2canvas,回调中的canvas是被捕获的div对象。
如果要把这个div转换成图⽚,则还需要增加如下代码:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
// 新增代码返回图⽚的URL,设置为png格式
var dataUrl = DataURL("image/png")
});
上⾯代码中的dataUrl是⼀个base64编码的图⽚URL地址。
在我的需求中,我需要把这个图⽚资源保存到服务器中,所以需要在后⾯发起⼀个ajax请求(或者post请求)到后端服务,后端接⼝需要接收这个dataURL,先base64解码,然后再把解码后的图⽚内容写⼊到png格式的⽂件中。
⼤致代码如下:
public function saveCustomTextToImage(Request $request) {
$imageDataURL = $request->input('dataUrl');
pdf转html$encodeImage = explode(",", $imageDataURL)[1];
// 解码
$decodeImage = base64_decode($encodeImage);
$storePath = "./img/my-pic.png";
// 写⼊⽂件
file_put_contents($storePath, $decodeImage);
$resArray['success'] = true;
$resArray['url'] = "testme";
return response()->json($resArray);
}
如果是不想传给后端处理,想直接跳转浏览器下载,那么之前的js部分的代码可以改为:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
// 新增代码返回图⽚的URL,设置为png格式
var dataUrl = DataURL("image/png");
var downloadUrl = place("image/png","image/octet-stream");//图⽚地址
window.location.href = downloadUrl; // 跳转下载
});
常规玩法说完了,下⾯说⼀下常见的坑。
第⼀个我遇到的就是版本造成的api调⽤的问题,从上⾯的js代码可以看出最新的html2canvas是基于Promise实现的,所以可以⽤".then"的⽅式进⾏链式调⽤。⽽⽼版本的html2canvas只能⽤传统回调⽅式来写,我的同事就是⽤的0.4.1版本,所以他的写法和我不⼀样,如下所⽰:
html2canvas([ElementById('mydiv')], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var data = DataURL('image/png');
// AJAX call to send `data` to server
}
});
第⼆个遇到的问题是没有任何报错的前提下,⽣成的图⽚是空⽩的。国内的童鞋们对这个问题往往说是去设置初始化选项,就可以解决带有滚动条的页⾯截取出空⽩的问题。众所纷纭,还有⼈说要给被选中的div设置宽⾼才⾏。
然⽽我采⽤这种⽅法没有解决问题,Google了很久发现国外的开发真正解决了这个问题。其实还是和版本有关,将最新的版本降会1.0.0rc.0版本就可以了。
希望官⽅早点解决这个问题,不然强制降版本也不是个事⼉啊。