页面转换为图片保存到手机html2canvas、base64ToPath

页面转换为图片保存到手机html2canvas、base64ToPath

本人只解决了 html2canvas、base64ToPath的引入问题，本文章解决方案并不完整

完整示例请参考uni-app 中使用 html2canvas 生成图片（支持多端）_不想搬砖。的博客-优快云博客

使用html2canvas将页面标签转换为图片。

1、引入html2canvas

因为uniapp中不好使用npm安装，我们到html2canvas官网下载他的集成js文件引入使用。

html2canvas地址：html2canvas - Screenshots with JavaScript *可能打不开需要用vpn

GitHub地址：https://github.com/niklasvh/html2canvas *没找到html2canvas.min.js文件

import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片

生成图片代码

<script lang="renderjs" module="canvasImage">
// 因为用使用dome操作，uniapp只能使用renderjs的方法操作dome
// 这里另外简历一个script 使用renderjs渲染图片避免与其他代码冲突
// canvasImage.generateImage标签中根据id来执行相应模块的事件
import html2canvas from "@/common/html2canvas.min.js"; //dom节点转canvas转图片

export default {
  methods: {
    imgsave(e,ownerFun) {
     ownerFun.callMethod('_showLoading','正在生成图片') // 生成图片的 loading 提示
      setTimeout(() => {
        const dom = document.getElementById('backBox') // 需要生成图片内容的 dom 节点
        html2canvas(dom, {
          width: dom.clientWidth, //dom 原始宽度
          height: dom.clientHeight,
          scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
          scrollX: 0,
          useCORS: true, //支持跨域
          // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
        }).then((canvas) => {
          // 生成成功
          // html2canvas 生成成功的图片链接需要转成 base64位的url
          ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
        }).catch(err=>{
          // 生成失败 弹出提示弹窗
          ownerFun.callMethod('_errAlert',`【生成图片失败，请重试】${err}`)
        })
      }, 300)
    },
  },
}
</script>

base64转path的方法在uni的插件市场搜索base64ToPath安装即可

i

mport { base64ToPath } from "../../../../../js_sdk/mmmm-image-tools/index"; // 图片地址转base64url

最近根据业务需求需要适配h5端，因为uni.saveImageToPhotosAlbum这个api无法在h5中使用，只能调用预览api uni.previewImage 将生成的图片预览出来，让用户自行保存图片

if (navigator) { // 判断是浏览器还是手机 true为手机false为app
        uni.showToast({
          title: "长按保存到手机",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.previewImage({ // 预览api
            urls: [filePath],// 需要数组的方式
            current: 0,
            indicator: "default",
          });
        }, 1000);
      } else {
        uni.saveImageToPhotosAlbum({
          filePath, // 需要临时文件路径，base64无法保存
          success: () => {
            this._showToast("保存图片成功");
          },
          fail: () => {
            this._showToast("保存图片失败，请重试");
          },
        });
      }