小程序开发过程中遇到的问题

时间:2021-06-16 19:50:07

一、canvas绘图接口drawImage,开发时遇到的问题

在使用drawImage绘图时,可以直接使用项目路径下的图片以及通过手机选择或拍摄的图片。如果使用网络图片,需要对网络图片进行一些处理。

1. 项目文件路径下的图片

ctx.drawImage("../images/demo.png", 0, 0, 150, 100)

2. 手机相册里的图片或者使用手机拍摄的图片

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

3. 在canvas上绘制网络图片

wx.getImageInfo({
      src: 'http://weixin.wedei.com/yx/LQXimages/images/scimgbg.jpg',
      success:function(res){
           console.log("--------");
           console.log(res.path); //现在可以使用`res.path`将网络图片绘制到自`canvas`上了
      }
})