玩转html2canvas以及常见问题解决

前端小伙伴经常会遇到页面截图或者把网页中指定的区域（某个大div）的内容转换成png的图片。这个时候常常会用到html2canvas库来实现，js真的很强大。

我最近也遇到了一个需求，需要把输入的文本框里面的文字转换成带有字体样式的图片。于是去研究了一下html2canvas。

html2canvas官网是：http://html2canvas.hertzen.com/，当前最新版本是1.0.0-rc.7。
安装方式有三种，第1种是用npm进行安装：

npm install --save html2canvas

第二种是用yarn，命令如下：

yarn add html2canvas

第三种是直接下载html2canvas.js或者压缩版本html2canvas.min.js。然后直接script方式引入到需要使用这个js库的html文件中即可。

官网给的案例如下（usage）, 首先是html部分，有一个div:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">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 = canvas.toDataURL("image/png")
});

上面代码中的dataUrl是一个base64编码的图片URL地址。
在我的需求中，我需要把这个图片资源保存到服务器中，所以需要在后面发起一个ajax请求（或者post请求）到后端服务，后端接口需要接收这个dataURL，先base64解码，然后再把解码后的图片内容写入到png格式的文件中。
大致代码如下：

public function saveCustomTextToImage(Request $request) {
        $imageDataURL = $request->input('dataUrl');
        $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 = canvas.toDataURL("image/png");
    var downloadUrl = dataUrl.replace("image/png","image/octet-stream");//图片地址

    window.location.href = downloadUrl; // 跳转下载
});

常规玩法说完了，下面说一下常见的坑。
第一个我遇到的就是版本造成的api调用的问题，从上面的js代码可以看出最新的html2canvas是基于Promise实现的，所以可以用".then"的方式进行链式调用。而老版本的html2canvas只能用传统回调方式来写，我的同事就是用的0.4.1版本，所以他的写法和我不一样，如下所示：

html2canvas([document.getElementById('mydiv')], {
    onrendered: function(canvas) {
       document.body.appendChild(canvas);
       var data = canvas.toDataURL('image/png');
       // AJAX call to send `data` to server
    }
});

第二个遇到的问题是没有任何报错的前提下，生成的图片是空白的。国内的童鞋们对这个问题往往说是去设置初始化选项，就可以解决带有滚动条的页面截取出空白的问题。众所纷纭，还有人说要给被选中的div设置宽高才行。
然而我采用这种方法没有解决问题，Google了很久发现国外的开发真正解决了这个问题。其实还是和版本有关，将最新的版本降会1.0.0rc.0版本就可以了。
希望官方早点解决这个问题，不然强制降版本也不是个事儿啊。

freephp

玩转html2canvas以及常见问题解决