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;});}
}
