vue使用html2canvas开发截图功能和解决截图和顶部留白问题的坑

最新推荐文章于 2023-01-16 15:10:28 发布

原创

最新推荐文章于 2023-01-16 15:10:28 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #canvas #npm #前端 #css

本文介绍了如何在Vue2.0和Webpack3.0环境下开发年终报告，集成Swiper实现上下滑动效果，并利用html2canvas进行页面截图。在实现过程中，遇到了截图顶部空白的问题，通过设置CSS解决了该问题。最终通过调用cordova来保存截图到本地相册。

环境：vue2.0+ ； webpack3.0+

项目：开发年终报告，类似支付宝年终账单的功能，需要使用swiper，上下滑动并且用到html2canvas截图功能；

需要安装的包：

npm i html2canvas -S

template中的html代码：

<template>
    //添加一个class为page的div，里面包含所修改截图的html内容
    <div class="page"  @click="saveImg('page01')">...</div>
</template>

methods方法：

    saveImg(id) {
      this.htmToBase64(id).then(canvas => {
        //这就得到的截图的base64的格式了
        var base64 = canvas.toDataURL("image/png");
        if (!base64) {
          alert("获取图片失败");
          return;
        }
        var bs64 = base64.split("base64,")[1];
        //cordova是和app通信的框架，能吊起app保存图片到手机相册的权限，需要app配置和支持cordova才能执行下面的代码。
        window.cordova.exec(
          function(result) {
            alert("图片已保存到本地相册，请将图片分享给好友吧~");
          },
          function(error) {
            alert("调用失败");
          },
          "WorkPlus_Image",
          "action