uni-app CanvasContext.drawImage在安卓系统无法绘制远程链接的.svg格式图片，本地的.svg格式图片可以正常绘制

uni-app CanvasContext.drawImage在安卓系统无法绘制远程链接的.svg格式图片，本地的.svg格式图片可以正常绘制

操作步骤：

// urlPath = '../../static/202105086095e27557ba6.svg'
CanvasContext.drawImage(urlPath, 0, 0, 100, 100)

预期结果：

实际结果：

bug描述：

url: 'https://apid.08cms.com/storage/images/qrcode/202105086095e27557ba6.svg'  
url: '../../static/202105086095e27557ba6.svg',  
CanvasContext.drawImage 在安卓app端绘制上面这张.svg图片。如果使用远程链接，绘制结果无法正常展示效果，如果将该格式图片下载放置本地，效果便可正常呈现

图片

图片

项目信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.1.12
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 全部安卓机型
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app CanvasContext.drawImage在安卓系统无法绘制远程链接的.svg格式图片，本地的.svg格式图片可以正常绘制的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

调用下载接口。然后如果需要再把路径转换成你需要的规范即可 let dtask = plus.downloader.createDownload(url, {}, function(d, status){
if(status == 200){
console.log("Download success 1 : " + d.filename);
console.log("Download success 2 : " +plus.io.convertLocalFileSystemURL(d.filename))
} else {
console.log("Download failed: " + status);
}
});
dtask.start();

更多关于uni-app CanvasContext.drawImage在安卓系统无法绘制远程链接的.svg格式图片，本地的.svg格式图片可以正常绘制的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app平台兼容性问题。CanvasContext.drawImage在Android端对远程SVG图片的支持存在限制，主要原因是：

  1. SVG格式解析差异：Android系统的Canvas底层实现无法直接解析网络SVG图片的矢量数据，而本地SVG文件在打包时可能已被处理为兼容格式。

  2. 跨域和安全限制：远程图片加载涉及网络请求和跨域问题，Android WebView对Canvas绘制远程SVG有更严格的安全策略。

解决方案：

  1. 转换为Base64：先将远程SVG下载并转换为Base64格式：
// 使用uni.downloadFile下载
uni.downloadFile({
  url: 'https://apid.08cms.com/storage/images/qrcode/202105086095e27557ba6.svg',
  success: (res) => {
    if (res.statusCode === 200) {
      const base64 = wx.arrayBufferToBase64(res.tempFilePath)
      CanvasContext.drawImage(`data:image/svg+xml;base64,${base64}`, 0, 0, 100, 100)
      CanvasContext.draw()
    }
  }
})
回到顶部