不能将base64转为图片路径，因其本身就是合法data uri；过滤器仅适合同步无副作用操作，无法处理mime缺失、前缀补全、空格清理等需求，易导致err_invalid_url或canvas跨域失败。
不能用过滤器把 Base64 转为“图片路径”——data:image/xxx;base64,... 本身就是可直接赋给 src 的合法 URI，不是路径，也不需要“转成路径”。强行塞进过滤器反而容易破坏响应头、触发跨域或导致 H5 端 canvas 绘图失败。
为什么不能写成过滤器？
uni-app 的过滤器（filters）本质是同步纯函数，只适合做字符串格式化、数字截断等无副作用操作。而 Base64 图片若来自接口返回，往往伴随 MIME 类型缺失、编码不规范（比如缺少 data:image/png;base64, 前缀）、或含空格/换行等脏数据。过滤器无法做异步校验、也无法动态补前缀或 trim 处理，一用就出错。
- 常见错误现象：
GET data:image/png;base64,... net::ERR_INVALID_URL（浏览器拒绝解析） - 小程序端更严格：未带完整 data URI 前缀的 Base64 会被静默丢弃，
image组件空白不报错 - canvas 绘图时若直接传 Base64 字符串给
ctx.drawImage()，H5 下会因跨域被拦截（即使同源）
正确做法：在 data 或 computed 中预处理
把 Base64 字符串标准化为合法 data URI，应在组件的 data 初始化或 computed 中完成，确保每次使用前都干净可用。
- 检查是否已含
data:前缀，没有就补上（例如后端只返回纯 base64 字符串） - 用
encodeURIComponent处理可能含空格或换行的 Base64（尤其从 OCR/AI 接口返回时） - 注意 MIME 类型：如果后端未明确类型，统一用
image/png（比image/jpeg兼容性更好）
data() {
return {
rawBase64: 'iVBORw0KGgoAAAANSUhEUgAA...' // 后端返回的纯 base64
}
},
computed: {
safeImageSrc() {
if (!this.rawBase64) return ''
const prefix = this.rawBase64.startsWith('data:')
? ''
: 'data:image/png;base64,'
return prefix + encodeURIComponent(this.rawBase64.trim())
}
}
H5 下 canvas 绘图必须绕过跨域？用 createObjectURL
直接用 new Image().src = safeImageSrc 在 H5 可显示，但往 <canvas></canvas> 里 draw 会触发跨域限制（哪怕 data URI 是同源）。此时不能靠过滤器，得用 Blob + URL.createObjectURL。
- 先将 Base64 转 Blob（注意 mime 类型必须匹配，否则 iOS Safari 会失败）
- 再生成对象 URL，赋给
Image.src，等加载完成再 draw 到 canvas - 绘图完成后记得调用
URL.revokeObjectURL防止内存泄漏
async drawBase64ToCanvas(base64Str) {
const blob = this.base64ToBlob(base64Str, 'image/png')
const url = URL.createObjectURL(blob)
const img = new Image()
img.onload = () => {
const ctx = this.canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
URL.revokeObjectURL(url) // 关键！
}
img.src = url
},
base64ToBlob(base64, mime = 'image/png') {
const raw = atob(base64.split(',')[1])
const u8a = new Uint8Array(raw.length)
for (let i = 0; i
<p>真正容易被忽略的点是：小程序和 App 端不需要 <code>createObjectURL</code>，但 H5 必须；而 <code>base64ToBlob</code> 里的 mime 如果写成 <code>image/jpg</code>（错拼），iOS Safari 就会静默失败——连 error 都不抛。别图省事硬编码，最好让后端返回明确的 <code>content-type</code> 或扩展名字段。</p>
