uni-app 无跨端“一键复制图片到剪贴板”API:H5 不支持图片复制,App/小程序仅支持文字;实际行为分保存相册(uni.saveImageToPhotosAlbum)或尝试写入剪贴板(兼容性差),且 H5 只能模拟下载。

uni-app 没有「一键复制图片到剪贴板」的跨端 API,H5 根本不支持图片复制,App 和小程序也仅支持文字;所谓“复制图片”,实际是两种完全不同的行为:保存到相册(uni.saveImageToPhotosAlbum)或生成 base64/Blob 后尝试写入剪贴板(navigator.clipboard.writeText / write),且后者兼容性极差。
uni.saveImageToPhotosAlbum 只能在小程序和 App 用,H5 调用直接报错
这个 API 的作用是把一张本地图片文件存进用户手机相册,不是“复制到剪贴板”。它只在微信/支付宝/字节等小程序,以及 iOS/Android App 中有效,H5 环境下会直接抛出 saveImageToPhotosAlbum is not a function 错误。
- 必须传
filePath,不能传网络地址(如https://xxx.jpg)——得先用uni.downloadFile或uni.getImageInfo拿到本地路径 - 微信小程序需提前在「开发管理 → downloadFile 合法域名」里配好图片域名,否则
getImageInfo失败 - 必须检查并申请
scope.writePhotosAlbum权限,失败时err.errMsg通常含auth deny - App 端可直接传远程 URL(如
uni.saveImageToPhotosAlbum({ filePath: 'https://xxx.jpg' })),但 iOS 有时会静默失败,建议统一走downloadFile流程
H5 没有相册概念,“保存图片”只能触发下载
H5 无法访问相册,uni.saveImageToPhotosAlbum 不能用,也不能用 navigator.clipboard 写入图片(浏览器策略禁止)。唯一可行的是模拟点击下载:
- 用
<a download="xxx.png" href="xxx.png">,但 href 必须同域或 CORS 开放;CDN 图片若没配Access-Control-Allow-Origin: *,会触发 CORS 错误 - 跨域图可用
canvas+toDataURL转 base64(需设image.crossOrigin = "anonymous"),再生成 Blob URL 绑定到<a>的 href —— 但 Safari 对 data URL 的download属性常忽略 - 不要用
document.execCommand('copy')尝试复制图片,它只对文本有效,对canvas.toDataURL()结果无效
App 和小程序里“复制图片到剪贴板”本质是障眼法
原生平台也不支持直接把图片塞进剪贴板供粘贴到微信/QQ 等应用。所谓“复制图片”,常见做法是:
- 安卓/iOS App:调用第三方插件(如
worry-clipboard),底层调用原生 API,但兼容性不一,部分机型失败无提示 - 小程序:微信/支付宝根本不开放图片写入剪贴板能力,
uni.setClipboardData只接受字符串,传 base64 会静默转空串 - 真·可行方案:用
canvas把文字 + 图片合成新图,再调用uni.saveImageToPhotosAlbum保存——用户手动长按相册里的图,选择“复制”
别硬封装“全端复制图片”,先分清场景要什么
用户点“复制图片”,他真正想要的大概率是以下之一:
- “保存到手机相册” → 用
uni.saveImageToPhotosAlbum(小程序/App)或<a download>(H5) - “发给微信好友” → 小程序里直接
uni.navigateTo({ url: '/pages/share/share?img=' + encodeURIComponent(url) }),让分享页渲染图片供转发 - “粘贴到其他 App” → 只有 App 端可能实现(靠插件),H5 和小程序做不到,必须明确告知用户限制
最容易被忽略的一点:很多开发者试图用 navigator.clipboard.write(...) 写入 Blob 或 ImageBitmap,这在当前所有 uni-app 支持的 H5 环境中均不可行——不是写法问题,是浏览器根本没开放该能力。


















