收藏
回答

canvas Image加载失败

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Canvas Image 微信iOS客户端 8.0.39 2.33.0
Page({
    async draw() {
        let {node: cv, width, height} = await new Promise(r => {
            wx.createSelectorQuery()
                .select('#canvas')
                .fields({node: true, size: true}, r)
                .exec()
        })


        let dpr = wx.getWindowInfo().pixelRatio
    
        cv.width = width * dpr
        cv.height = height * dpr


        let c = cv.getContext('2d')


        c.scale(dpr, dpr)


        let i = cv.createImage()
        await new Promise(r => {
            i.onload = r
            i.onerror = e => {
                console.error('Image 加载失败:', e);
            }
            i.src = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAwIDMwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAyLjk1OCAxNjIuMjQ1IDk0LjM4OC00My41NzEgOTQuMjg2IDQzLjU3MS05NC4yODYgMjMuNzc2LTk0LjM4OC0yMy43NzZaIiBmaWxsPSIjMDAwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjg3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMzEuNzM1IDcxLjMyNmMtNS42MTIgMC05LjU5MiAxLjk0LTEyLjM0NyA0LjA4Mi0yLjg1NyAyLjE0My00LjI4Ni43MTQtNi45MzktMi4xNDMtMy4zNjctMy41NzEtMTEuNTMtMi4zNDctMTcuMDQxLTEuNzM0LTkuMzg3IDEuMDItMTYuNzM0IDguMjY1LTE3Ljc1NSAxNy42NTMtMS4zMjYgMTIuMTQyIDguMTY0IDIyLjM0NyAyMCAyMi4zNDcgMy43NzYgMCA3LjM0Ny0xLjAyMSAxMC40MDgtMi45NiA0LjA4Mi0yLjQ0OSA5LjA4Mi0yLjM0NyAxMy4xNjQuMTAyIDIuNTUxIDEuNTMxIDYuMDIgMi43NTYgMTAuNTEgMi43NTZzNy45NTktMS4yMjUgMTAuNTEtMi43NTZjNC4wODItMi40NDkgOS4xODQtMi42NTMgMTMuMTYzLS4xMDIgMy4wNjIgMS44MzcgNi42MzMgMi45NiAxMC40MDkgMi45NiAxMS44MzYgMCAyMS4zMjYtMTAuMjA1IDIwLTIyLjM0Ny0xLjAyMS05LjM4OC04LjM2OC0xNi43MzUtMTcuNzU2LTE3LjY1M2ExOS41OTUgMTkuNTk1IDAgMCAwLTE0LjM4NyA0LjA4MWMtMi44NTcgMi4xNDMtNi43MzUgMi4wNDEtOS41OTItLjEwMi0yLjc1NS0yLjM0Ny02LjczNS00LjE4NC0xMi4zNDctNC4xODRaTTI5MC43MTUgODMuMjY1YTMuODc4IDMuODc4IDAgMSAwIDAtNy43NTUgMy44NzggMy44NzggMCAwIDAgMCA3Ljc1NVoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNNzQuOTk5IDY0LjM4OEg2MC43MTNWNzguMDZoMTQuMjg2VjY0LjM4N1pNODkuMTgyIDUwLjUxSDc0Ljg5N3YxMy42NzNoMTQuMjg1VjUwLjUxWiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii44NyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjQ0Ljc5OCA1Mi41NWgtNS4yMDR2NS4yMDVoNS4yMDRWNTIuNTVaTTI4Ni42MzIgNTQuNjk1aC0zOS4wODF2MS4wMmgzOS4wODF2LTEuMDJaTTI5MS4xMjMgNTQuNjk2aC0xLjAydjEuMDJoMS4wMnYtMS4wMlpNMzIyLjI0NSA1NS43MTVoLTEuOTM5di0xLjAyaDEuOTM5djEuMDJabS03Ljc1NSAwaC0xLjkzOXYtMS4wMmgxLjkzOXYxLjAyWm0tNy44NTggMGgtMS45Mzh2LTEuMDJoMS45Mzh2MS4wMlptLTcuNzU1IDBoLTEuOTM5di0xLjAyaDEuOTM5djEuMDJaTTMyOS4wNzkgNTQuNjk1aC0xLjAydjEuMDJoMS4wMnYtMS4wMlpNMzMyLjM0OCA2MC4wMDFsLS41MS0uODE2IDYuMjI0LTMuNzc2LTYuMjI0LTQuMDgxLjYxMi0uOTE5IDcuNTUxIDUtNy42NTMgNC41OTJaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0ibTI4MS40MjggNDQuODk4IDcuNTUxLTkuMTgzTTI3NS43MTQgMjBsLTEzLjE2MyAyNi41M00xMjUuNzE2IDcxLjkzOGwxOS44OTggMjVNMTUwLjIwMyAzNy4yNDVsMTUuMTAyIDM2LjEyMiIgc3Ryb2tlPSIjREVERkVBIiBzdHJva2Utd2lkdGg9Ii44NyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+PHBhdGggZD0ibTIwMC40MDggMjAwLjkxOSAxOS4zODggNi4xMjNoMTIuNDQ5di02Ny4xNDNsMjAuOTE4IDE3LjE0M2M2LjgzNyA2LjYzMiAxNy44NTcgNi4yMjQgMjQuMDgyLTEuMDIxbDIwLjMwNi0yMy4zNjcgMTUuNjEyIDkuMDgyYzEuNDI5LjgxNiAzLjI2NS40MDggNC4xODQtLjkxOS45MTgtMS40MjguNTEtMy4zNjctLjkxOC00LjI4NWwtMTUtOS41OTIgMTUuMjA0IDkuNjk0YzEuMzI2LjkxOCAzLjE2My41MSA0LjA4MS0uODE3LjkxOS0xLjQyOC42MTItMy4yNjUtLjgxNi00LjE4M2wtMTQuNzk2LTkuNjk0IDE0LjU5MiA5LjU5MmMxLjUzIDEuMDIgMy42NzMuNjEyIDQuNjk0LS45MTkgMS4wMi0xLjUzLjYxMi0zLjY3My0uOTE5LTQuNjk0bC0xNC4zODctOS41OTIgMTQuNDg5IDkuNTkyYzEuNTMxIDEuMDIxIDMuNjc0LjYxMyA0LjY5NC0uOTE4IDEuMDIxLTEuNjMzLjYxMy0zLjc3Ni0xLjAyLTQuNzk2bC0yNC4yODYtMTUuMTAyIDguMzY3LTQuNTkyYzEuOTM5LTEuMDIgMi42NTQtMy4zNjcgMS42MzMtNS4zMDYtMS4wMi0xLjkzOS0zLjM2Ny0yLjc1NS01LjMwNi0xLjgzN2wtOC4xNjMgMy45OGMtNi4wMjEgMi45NTktMTAuODE3IDYuMzI2LTE0LjU5MiAxMC42MTJsLTE3LjU1MSAxOS42OTRzLTIyLjQ0OS0xOS43OTYtMzIuMjQ1LTI4Ljc3NWMtNC4wODItMy43NzYtOS4yODYtNi4xMjMtMTQuNzk2LTYuMDJsLTIyLjk1OS42MTFoMS4xMjItMS40MjggMS4xMjJsLTIyLjk1OS0uNjEyYy01LjUxLS4xMDItMTAuNzE0IDIuMjQ1LTE0Ljc5NiA2LjAyLTkuNzk2IDguOTgtMzIuMjQ1IDI4Ljc3Ni0zMi4yNDUgMjguNzc2bC0xNy41NTEtMTkuNjk0Yy0zLjc3NS00LjI4Ni04LjU3MS03Ljc1NS0xNC41OTItMTAuNjEybC04LjE2My0zLjk4Yy0xLjkzOS0uOTE4LTQuMzg4LS4yMDQtNS4zMDYgMS44MzctLjkxOCAxLjkzOS0uMjA0IDQuMjg2IDEuNjMyIDUuMzA2bDguMzY4IDQuNTkyLTI0LjI4NiAxNS4xMDJjLTEuNjMyIDEuMDItMi4wNCAzLjE2My0xLjAyIDQuNzk2IDEuMDIgMS41MzEgMy4xNjMgMS45MzkgNC42OTQuOTE4bDE0LjQ5LTkuNTkyLTE0LjM4OCA5LjU5MmMtMS41MyAxLjAyMS0xLjk0IDMuMTY0LS45MTkgNC42OTQgMS4wMiAxLjUzMSAzLjE2NCAxLjkzOSA0LjY5NC45MTlsMTQuNTkyLTkuNTkyLTE0Ljc5NiA5LjY5NGMtMS40MjguOTE4LTEuODM3IDIuODU3LS44MTYgNC4xODMuOTE4IDEuMzI3IDIuNzU1IDEuNzM1IDQuMDgxLjgxN2wxNS4yMDUtOS42OTQtMTUgOS41OTJjLTEuNDMuOTE4LTEuODM3IDIuODU3LS45MTkgNC4yODUuOTE5IDEuMzI3IDIuNzU1IDEuNzM1IDQuMTg0LjkxOWwxNS42MTItOS4wODIgMjAuMzA2IDIzLjM2N2M2LjIyNSA3LjI0NSAxNy4zNDcgNy42NTMgMjQuMDgyIDEuMDIxbDIwLjkxOC0xNy4xNDN2NjcuMTQzaDEyLjQ0OWwxOS4zODgtNi4xMjNoNS4zMDZaIiBmaWxsPSIjRkZDN0RFIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjg3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cGF0aCBkPSJNMjU5LjY5MyAxMjEuMTIzYy03LjQ0OS02LjYzMy0xOC42NzMtMTYuNjMzLTI0Ljg5OC0yMi4yNDUtNC4wODItMy43NzUtOS4yODYtNi4xMjItMTQuNzk2LTYuMDJsLTIyLjk1OS42MTJoMS4xMjItMS40MjggMS4xMjJsLTIyLjk1OS0uNjEyYy01LjUxLS4xMDItMTAuNzE0IDIuMjQ1LTE0Ljc5NiA2LjAyLTYuMjI0IDUuNzE0LTE3LjQ0OSAxNS43MTQtMjQuODk4IDIyLjI0NWwyMC42MTIgMjQuMzg4IDYuODM3LTUuNjEydjY3LjE0MmgxMi40NDlsMTkuMzg4LTYuMTIyaDYuMDJsMTkuMzg4IDYuMTIyaDEyLjQ0OXYtNjcuMTQybDYuODM3IDUuNjEyIDIwLjUxLTI0LjM4OFoiIGZpbGw9IiNGRjAwNkMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIuODciIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjxwYXRoIGQ9Ik0yOTIuMDQxIDExNS44MTdjNS45MTggMCAxMC43MTQtNC43OTYgMTAuNzE0LTEwLjcxNCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii44NyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJtMjk3LjU1MiAxMzIuNjUzLTMuMDYxLTEuNzM0LTcuMjQ1IDEzLjM2NyAxMC4zMDYtMTEuNjMzWiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii44NyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTAyLjg1OSAxMTUuODE3Yy01LjkxOSAwLTEwLjcxNS00Ljc5Ni0xMC43MTUtMTAuNzE1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjg3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Im05Ny4zNDcgMTMyLjY1MyAzLjA2MS0xLjczNSA3LjE0MyAxMy4zNjgtMTAuMjA0LTExLjYzM1oiIGZpbGw9IiMwMDAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIuODciIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTIxOS44OTcgODMuOThjLS43MTQgMC0xLjMyNi4xMDMtMS45MzguNDA5LTEuNzM1LTkuNDktMTAuMTAyLTE2LjYzMy0yMC4xMDItMTYuNjMzcy0xOC4yNjYgNy4xNDMtMjAuMTAyIDE2LjYzM2MtLjYxMy0uMjA0LTEuMjI1LS40MDgtMS45MzktLjQwOC0yLjg1NyAwLTUuMTAyIDIuMjQ1LTUuMTAyIDUuMTAyczIuMjQ1IDUuMTAyIDUuMTAyIDUuMTAyYy44MTYgMCAxLjYzMy0uMjA0IDIuMzQ3LS42MTMgMi4zNDcgOC41NzIgMTAuMzA2IDE0Ljg5OCAxOS42OTQgMTQuODk4IDkuMzg3IDAgMTcuMjQ1LTYuMzI2IDE5LjY5NC0xNC44OTguNzE0LjQwOSAxLjUzLjYxMyAyLjM0Ni42MTMgMi44NTggMCA1LjEwMy0yLjI0NSA1LjEwMy01LjEwMiAwLTIuODU4LTIuMjQ1LTUuMTAyLTUuMTAzLTUuMTAyWiIgZmlsbD0iI0ZGQzdERSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii44NyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+PHBhdGggZD0iTTE5Ny44NTUgNjcuNzU1cy0xNS42MTItLjYxMi0yMC4zMDYgMTcuMDQxYy43MTQuMzA2IDEuMzI2LjkxOSAxLjgzNyAxLjYzMy41MS43MTQgMS4wMi41MSAxLjAyLS4zMDYuNDA4LTQuNTkyIDMuMjY1LTguNzc2IDQuNDktOS44OTguNzE0LS42MTIuODE2LjQwOCAxLjIyNCAxLjMyNiAyLjY1MyA3LjA0MSAxNC4wODIgMTYuNTMgMjkuMTg0IDkuMTg0LjgxNi0uNDA4IDMuMTYzLTEuOTM5IDMuMTYzLTEuOTM5LTQuNjk0LTE3LjY1My0yMC4zMDYtMTcuMDQtMjAuMzA2LTE3LjA0aC0uMzA2WiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0xMDIuOTU4IDE2Mi4yNDZ2OTAuMzA2bDk0LjM4OCAyNy41NTF2LTk0LjA4MmwtOTQuMzg4LTIzLjc3NVpNMjkxLjczMyAxNjIuMjQ2djkwLjMwNmwtOTQuMzg3IDI3LjU1MXYtOTQuMDgybDk0LjM4Ny0yMy43NzVaIiBmaWxsPSIjQjZCQkUyIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjg3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cGF0aCBkPSJtMTAzLjQ2OSAxNzAuNzE1LjEwMiA0NS4zMDYgNTUuMzA2IDE1LjkxOCAzOC40NjktNDUuOTE4LTkzLjg3Ny0xNS4zMDZaTTI5MS40MyAxNzAuNzE1djQ1LjMwNmwtNTUuMzA2IDE1LjkxOC0zOC40Ny00NS45MTggOTMuNzc2LTE1LjMwNloiIGZpbGw9IiMwMDAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIuODciIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0ibTI5Mi4wNDIgMTYyLjI0NiA0NSAzNC4xODMtOTkuNjk0IDI3LjQ0OS0zOS43OTYtMzcuODU3IDk0LjQ5LTIzLjc3NVpNMTAyLjk1OSAxNjIuMjQ2IDYwIDE5NS4wMDFsOTcuNTUxIDI4Ljg3NyAzOS43OTYtMzcuODU3LTk0LjM4OC0yMy43NzVaIiBmaWxsPSIjREVERkVBIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjg3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='
        })


        c.drawImage(i, 0, 0, 320, 240)
    }
})


开发者工具正常


iOS 真机 onerror

Andriod 真机 onerror

回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2023-07-28

    不支持 svg 类型的 base64 数据

    2023-07-28
    有用
    回复 1
    • 从君华
      从君华
      2023-07-28
      不支持 svg 文档为什么不说明?
      2023-07-28
      回复
登录 后发表内容