uni-app中无法用canvas截图DOM区域，因App端不支持DOM操作；正确做法是手动用canvas绘制内容后通过uni.canvasToTempFilePath导出图片并保存。
uni-app 中用 canvas 截图指定 DOM 区域行不通
uni-app 的 web-view 和普通 H5 渲染层不一致，dom-to-image、html2canvas 这类依赖 DOM 操作的库在 App 端（尤其是 iOS）基本不可用，会报 document is not defined 或直接白屏。真机调试时你会发现 canvas 画布为空，或截图内容错位、缺失样式——这不是代码写错了，是运行环境根本不支持 DOM 快照。
可行路径只有一条：把要保存的内容提前用 canvas 绘制，或改用原生能力桥接。但后者需写 App 原生插件，成本高。更务实的做法是：**让需要长按保存的图片本身是 src 是本地路径或网络可直链地址**。
- 优先用
uni.downloadFile把网络图下载到本地临时路径，再传给uni.saveImageToPhotosAlbum - 如果图是动态生成（比如带文字水印），必须走
uni.canvasToTempFilePath，且 canvas 必须用uni.createCanvasContext在页面中显式声明并绘制 - 切勿尝试用
querySelector获取元素后转 canvas——App 端 DOM 不可访问
长按触发保存前，先判断平台和权限
uni.saveImageToPhotosAlbum 在 iOS 上必须提前申请相册权限，Android 部分版本也需要。不检查就调用，iOS 会静默失败，控制台无报错；Android 可能弹空权限框或直接拒绝。
- 用
uni.getSetting检查scope.writePhotosAlbum是否已授权 - 未授权时，用
uni.openSetting跳转设置页（注意：iOS 14+ 首次调用需用户手动开启“照片”权限，不能跳过） - H5 端不支持该 API，必须加平台判断：
uni.getSystemInfoSync().platform !== 'h5' - 微信小程序需额外配置
permission字段在manifest.json中
局部区域截图保存的正确姿势：用 canvas 手动绘制 + uni.canvasToTempFilePath
所谓“局部”，其实是你控制 canvas 绘制范围。比如只想截取一个带头像和昵称的卡片，那就新建一个固定尺寸 canvas，在上面 drawImage 头像、fillText 昵称，而不是去截页面某块 div。
// 模板：在页面 data 中定义 canvasId
data() {
return {
canvasId: 'myCardCanvas'
}
}
模板中放隐藏 canvas：
<canvas canvas-id="{{canvasId}}" style="width: 300px; height: 200px;" class="hidden"></canvas>
长按后执行：
const query = uni.createSelectorQuery().in(this);
query.select(`#${this.canvasId}`).fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const ctx = uni.createCanvasContext(this.canvasId, this);
<p>// 假设你要画一张 100x100 的头像 + 文字
ctx.drawImage('<a href="https://www.php.cn/link/4ca0d95c86f2ee0ebd3a49b6f448efc8">https://www.php.cn/link/4ca0d95c86f2ee0ebd3a49b6f448efc8</a>', 20, 20, 100, 100);
ctx.setFontSize(14);
ctx.fillText('张三', 20, 150);
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: this.canvasId,
success: (e) => {
uni.saveImageToPhotosAlbum({
filePath: e.tempFilePath,
success: () => uni.showToast({ title: '已保存' })
});
}
}, this);
});
});</p>
- 务必传
this到uni.createSelectorQuery().in(this)和uni.canvasToTempFilePath，否则真机找不到上下文 -
ctx.draw(false, callback)的false表示不立即渲染，避免闪动；callback 里再转文件 - canvas 宽高必须与
style中一致，否则导出图片拉伸或裁剪
长按事件绑定和防误触细节
直接用 @longpress 容易和滚动、点击冲突，尤其列表项。推荐用 touchstart + setTimeout 自行实现长按逻辑，并加 touchmove 清除定时器。
- 在
data中定义longPressTimer: null -
touchstart时设this.longPressTimer = setTimeout(() => { /* 触发保存 */ }, 500) -
touchmove或touchend里clearTimeout(this.longPressTimer) - 长按响应后，建议加
uni.showToast并禁用按钮 1 秒，防止连点触发多次保存 - App 端部分安卓机型对
longpress支持不稳定，自实现更可控
最常被忽略的一点：canvas 绘制的图片资源（如头像 url）必须是本地临时路径或 base64，网络地址在某些 Android 版本上 drawImage 会失败，得先 uni.downloadFile 下载后再用本地路径绘制。
