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

全栈开发日记

发布于 2025-02-10 11:24:21

15800

代码可运行

文章被收录于专栏：全栈开发日记全栈开发日记

运行总次数：0

代码可运行

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