前端⼩伙伴经常会遇到页⾯截图或者把⽹页中指定的区域（某个⼤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版本就可以了。
希望官⽅早点解决这个问题，不然强制降版本也不是个事⼉啊。
发布评论