码迷,mamicode.com
首页 > Web开发 > 详细

玩转html2canvas以及常见问题解决

时间:2021-06-30 18:10:02      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:方式   canvas   round   压缩版   capture   常见   append   题解   接收   

前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大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版本就可以了。
希望官方早点解决这个问题,不然强制降版本也不是个事儿啊。

玩转html2canvas以及常见问题解决

标签:方式   canvas   round   压缩版   capture   常见   append   题解   接收   

原文地址:https://www.cnblogs.com/freephp/p/14952588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!