收藏
回答

小程序的canvas怎么插入图片呀?

js代码
//定义全局canvas
    let that = this
    const ctx = wx.createCanvasContext('shareCanvas');
    //绘制背景色
    ctx.setFillStyle('#42d7c8')
    ctx.fillRect(00350700)
    // 标题
    ctx.setFillStyle('#333333')
    ctx.setFontSize(20)
    ctx.font = 'normal bold 15px sans-serif'
    ctx.fillText('绿地新都会'2020)
    // 二维码
    // 填充一个白色矩形
    ctx.setFillStyle('white')
    ctx.setShadow(0516'rgba(185,185,185,0.5)');// 设置阴影
    ctx.fillRect(17140280200)
    wx.downloadFile({
      url'https://file-skg.skg.com/skg.com/20210113/e0abb00dae6f4e0782b002f0831662e6.jpg',
      successres =>{
        console.log("Res",res.tempFilePath)
        ctx.drawImage(res.tempFilePath,10,10,150,150)
      }
    })
    ctx.draw();  //实例化完成

// wxml 代码
<view class="container">
  <canvas  canvas-id="shareCanvas" class='canvas-style'>
  </canvas>
  <view class="linkcopy">
    <text>分享链接</text>
    <text bindtap="uploads">保存图片</text>
  </view>
</view>


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

2 个回答

  • LokNum🎣
    LokNum🎣
    2021-04-22

    cardImg 可以是本地或网络路径

    2021-04-22
    有用
    回复 3
    • LokNum🎣
      LokNum🎣
      2021-04-22
      downloadFile注意设置白名单
      2021-04-22
      回复
    • 山有扶苏
      山有扶苏
      2021-04-22
      多张图片怎么处理呢
      2021-04-22
      回复
    • LokNum🎣
      LokNum🎣
      2021-04-22回复山有扶苏
      那不就是drawIamge多几次吗
      2021-04-22
      回复
  • Z
    Z
    2021-04-22

    放在这,fail 还是要处理一下的还有就是获取图片 建议还是用getImageInfo吧

    2021-04-22
    有用
    回复 2
    • 山有扶苏
      山有扶苏
      2021-04-22
      那我要插入多张图片怎么办呀
      2021-04-22
      回复
    • Z
      Z
      2021-04-22回复山有扶苏
      可以使用canvas之前先把需要绘制的图片先获取到 然后在drawImage 多次就好了
      2021-04-22
      回复
登录 后发表内容