【开发日记】Uniapp对指定DOM元素截长图

1、背景

使用uniapp开发的APP，需要对页面中指定的DOM（指定区域）进行长截图，长截图就是手机屏幕不足以通过一个屏幕展现完整的内容，并将截图保存到手机相册中。

2、完整实现

安装依赖

安装插件：https://ext.dcloud.net.cn/plugin?id=15050

点击以上的链接中的下载插件并导入HBuildeX按钮，将插件导入到项目中。

在项目中安装html2canvas的node包：

npm install html2canvas

页面核心代码

在页面中引入组件：

<!-- 需要截图的DOM区域 -->
<view id="render-dom" class="content-box"><!-- 你的页面内容 -->
</view><sp-html2canvas-render :useCORS="true" :allowTaint="true" domId="render-dom" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>

domId：指定截长图的DOM元素。

@renderOver：指定组件的emit事件，当完成截图使执行的回调函数。

renderOver回调函数：

import {base64ToPath} from "../../../uni_modules/sp-html2canvas-render/utils";/*** 截图完成* @param e 图片的base64格式*/
function renderOver(e) {base64ToPath(e).then(res => { // res是本地临时路径saveMediaToPhoto("image", res).then(() => {// TODO 保存成功的提示，或其他操作})})
}

可能存在的问题

如果DOM元素中包含网络图片，并且图片不支持跨域，则会报以下错误：

toDataURL on HTMLCanvasElement

需要将DOM元素中的网络图片转为Base64格式。

将本地或网络图片转为Base64格式推荐使用组件内置的方法：

import { urlToBase64,pathToBase64 } from "@/uni_modules/sp-html2canvas-render/utils/index.js";

示例：

/*** 将图片转成base64* @param url 路径* @param local 是否本地*/
function imgUrlToBase64(url,local = false) {if (!props.base64 || getMediaType(props.fileName) == "video") {previewUrl.value = url;return;}if(local){pathToBase64(url).then(res => {previewUrl.value = res;});}else{urlToBase64(url).then(res => {previewUrl.value = res;});}
}