收藏
回答

使用Canvas绘制网络图片的问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Canvas 客户端 6.7.2 2.3.2

使用Canvas绘制网络图片在模拟器上可以显示,在真机上不显示


Page({


/**

  * 页面的初始数据

  */

data: {

hidden: true

},


/**

  * 生命周期函数--监听页面加载

  */

onLoad: function(options) {



var giftName = options.giftName

var coverImage = options.coverImage

var joinedCount = options.joinedCount

var giftId = options.giftId


console.log(giftName + "==" + coverImage + "==" + joinedCount + "==" + giftId)


let promise1 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: coverImage,

success: function(res) {

resolve(res);

}

})

});

let promise2 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: '../../img/qrbg.png',

success: function(res) {

resolve(res);

}

})

});

Promise.all([

promise1, promise2

]).then(res => {

console.log(res[0].path)

const ctx = wx.createCanvasContext('shareImg')


//主要就是计算好各个图文的位置

ctx.drawImage(res[0].path, 158, 190, 210, 210)

ctx.drawImage('../../' + res[1].path, 0, 0, 545, 771)


ctx.setTextAlign('center')

ctx.setFillStyle('#ffffff')

ctx.setFontSize(22)

ctx.fillText('分享文字描述1', 545 / 2, 130)

ctx.fillText('分享文字描述2', 545 / 2, 160)


ctx.stroke()

ctx.draw()

})

},



/**

  * 生成分享图

  */

share: function() {

var that = this

wx.showLoading({

title: '努力生成中...'

})

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 545,

height: 771,

destWidth: 545,

destHeight: 771,

canvasId: 'shareImg',

success: function(res) {

console.log(res.tempFilePath);

that.setData({

prurl: res.tempFilePath,

hidden: false

})

wx.hideLoading()

},

fail: function(res) {

console.log(res)

}

})

},


/**

  * 保存到相册

  */

save: function() {

var that = this

//生产环境时 记得这里要加入获取相册授权的代码

wx.saveImageToPhotosAlbum({

filePath: that.data.prurl,

success(res) {

wx.showModal({

content: '图片已保存到相册,赶紧晒一下吧~',

showCancel: false,

confirmText: '好哒',

confirmColor: '#72B9C3',

success: function(res) {

if (res.confirm) {

console.log('用户点击确定');

that.setData({

hidden: true

})

}

}

})

}

})


}

})


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

2 个回答

  • 卢霄霄
    卢霄霄
    2018-11-29

    getImageInfo 需要加域名到 downloadFile白名单里哦

    2018-11-29
    有用
    回复 1
    • 张硕
      张硕
      2018-11-29

      嗯嗯 是这个问题   。。。

      2018-11-29
      回复
  • 张硕
    张硕
    2018-11-29

    刚试了一下在真机上 打开调试模式 就可以显示图片  关闭调试模式之后又不行了

    2018-11-29
    有用
    回复 4
    • 李先生
      李先生
      2018-11-29

      这个问题是网络图片下载时没加域名到白名单或使用http的图片,开发工具上又选择不校验https和白名单。

      2018-11-29
      1
      回复
    • 凯林
      凯林
      2019-02-25回复李先生

      我加载的图片是服务器地址  https的  安全域名有的 但是还是加载不出来

      2019-02-25
      回复
    • 凯林
      凯林
      2019-02-25回复李先生

      模拟器可以看到 手机看不到

      2019-02-25
      回复
    • 花脸喵
      花脸喵
      2019-05-30回复李先生

      你真棒!

      2019-05-30
      回复
登录 后发表内容