微信小程序:真机上canvas使用canvasContext.drawImage图片不显示?

微信小程序 同时被 2 个专栏收录
39 篇文章 1 订阅
31 篇文章 1 订阅

首先,明确两点,很多人的博客在写的时候,都是直接将图片的路径修改为网络路径,然后就再也不理,因为他们觉得这样是可以得,也许,这样是错的哦

第二点,腾讯的文档,最好跟着来,他不会跟你任何的扩展性的!!!!!!!!!!!!!!!!!!!!!!!!!

好了,先来段代码:

// pages/T-canvas/T-canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mysrc: "https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=4ed20bae4ba98226accc2375ebebd264/b17eca8065380cd734352b36a944ad34588281c6.jpg"
  },

  onShow: function () {
    const that=this;
    wx.downloadFile({
      url: that.data.mysrc,
      success: function (sres) {
        console.log(sres);
        that.data.mysrc = sres.tempFilePath
      },fail:function(fres){

      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  click() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.data.mysrc, 30, 30, 500, 800)
    ctx.drawImage(this.data.mysrc, 0, 0, 300, 200)
    ctx.drawImage(this.data.mysrc, 0, 0, 100, 200)
    ctx.draw();
  },
})
当然,以上的代码有两个准备。

第一点,就是我们将这个图片的https域名加载在downfile里面了,这是第一点。

第二点,我们使用的图片是先经过下载!然后再使用到canvas里面!

第三点,手机有种就不要开调试!我们要模拟最真实的环境

好,开始,运行后,我们点击代码,


图片有点大。。。淡定。。可以看到,我们上面的代码的显示是正常的,现在,我们来排除第三点,允许你打开手机的调试,当然,显示之后是没有多大变化的,所以说在下载了图片的情况下,调试时没多大变化的,而不是说调试对这个毫无影响!实际上如果不先下载,。不先去使用htttps的情况下,使用调试还是可以达到图片的那种效果的(怕码字太多,后面各位大佬自己去做试验)

第二点,现在,我们去关闭掉图片下载这段代码。

结果是这样的:

请不要想多,我真的已经按下那个按钮了,所以说,我们需要先把图片缓存到本地,这时候,你开启调试的话么肯定是上面这光景吧,为啥?自己去想咯


所以,我们得出结论,第一!需要缓存(建议大家去改成使用getimageinfo,然后去使用缓存地址试试)

第二部!我们要去使用https,还得要去配置在downfile里面。真麻烦

  • 0
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值