收藏
回答

canvas用arc画圆安卓显示问题,获取微信头像不显示问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug canvasContext.arc 、canvasContext.drawImage 客户端 Android v1.02.1803210 1.9.91

代码如下:

onLoad(options) {

const height = app.globalData.window_height;

const width = app.globalData.window_width;

const options = {

    head_photo = 'https://wx.qlogo.cn/mmopen/vi_32/N78NX78hLfDwG56Ocyyjhibqro6sFjIZmUzJM5aI90ySicyqMeRToKLImXl7v8DRVwMmVggfMzy1m15d2P5beejg/0',

    qrcode='http://oixavq5ec.bkt.clouddn.com/yaliapi/1302/wechat/b07f9201804161810206895.png'

}

if (options) {

const optionsArr = Object.keys(options).filter(x => x != 'nickname');

optionsArr.map((x, k) => {

    if (x == 'head_photo' || x == 'qrcode') {

    this.downloadCanvasImg(x, options[x], (optionsArr.length - 1 == k ? true : false))

}

})

}

},

downloadCanvasImg(name, url, end) {

const options = immutable.fromJS(this.data.options).toJS();

wx.downloadFile({

url,

success: res => {

const urls = res.tempFilePath;

options[name] = urls;

this.setData({ options })

console.log(name, url, end, urls);

if (end) {

this.drawCanvas(this.data.options);

}

},

fail: fres => {

this.downloadCanvasImg(options, end)

}

})

},

drawCanvas(options) {

const { width, height, backgroundColor } = this.data;

const imgUrl = options.head_photo;

const qrcodeUrl = options.qrcode

const ctx = wx.createCanvasContext('myCanvas');

const grd = ctx.createLinearGradient(0, 0, 0, 160)

// grd.addColorStop(0, this.colorRgb(backgroundColor))

// grd.addColorStop(.2, this.colorRgb(backgroundColor))

// grd.addColorStop(1, this.colorRgb(backgroundColor, true))

grd.addColorStop(0, '#16ca4e')

grd.addColorStop(.2, '#16ca4e')

grd.addColorStop(1, '#16ca4e')

ctx.beginPath()

ctx.arc(width / 2, -180, width / 2 + 200, 2 * Math.PI) // height: width / 2 + 20

ctx.fillStyle = grd

ctx.fill()

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle('#ffffff')

ctx.setTextAlign('center')

ctx.setFontSize(55)

ctx.fillText('佣金升级', width / 2, 80)

ctx.fillText('福利双赢', width / 2, 130)

ctx.setTextAlign('center')

ctx.closePath()

ctx.save()

ctx.beginPath();

ctx.setFillStyle('white');

ctx.setShadow(0, 2, 5, 'rgba(0, 0, 0, .2)')

ctx.arc(width / 2, width / 2 + 20, 40, 0, 2 * Math.PI);

ctx.fill();

ctx.clip();

ctx.drawImage(imgUrl, width / 2 - 40, width / 2 - 20, 80, 80)

ctx.restore()

ctx.closePath()

ctx.beginPath()

ctx.arc(width / 2, 280, 50, 2 * Math.PI)

ctx.setFillStyle('red')

ctx.fill()

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle('#333')

ctx.setTextAlign('center')

ctx.setFontSize(16)

ctx.fillText('MaobabyDad', width / 2, width / 2 + 80)

ctx.setTextAlign('center')

ctx.closePath()

ctx.beginPath()

const grd2 = ctx.createCircularGradient(width / 2, width / 2 + 195, 127)

grd2.addColorStop(0, '#16ca4e')

grd2.addColorStop(.9, '#16ca4e')

grd2.addColorStop(1, '#16ca4e')

ctx.rect(width / 2 - 90, width / 2 + 105, 180, 180)

ctx.setFillStyle(grd2)

ctx.closePath()

ctx.beginPath()

const qrcode = ctx.drawImage(qrcodeUrl, width / 2 - 80, width / 2 + 115, 160, 160)

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle('#333')

ctx.setTextAlign('center')

ctx.setFontSize(16)

ctx.fillText('将海报发送给好友,赚取佣金', width / 2, width / 2 + 330)

ctx.setTextAlign('center')

ctx.closePath()

ctx.draw()

},

开发工具的效果是:


安卓(小米)机上的效果:


苹果(6sp)真机效果:



最后一次编辑于  2018-04-23  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 娇华
    娇华
    2018-04-25

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-04-25
    赞同
    回复 4
    • 🙏冰心雪莲🙏
      🙏冰心雪莲🙏
      2018-06-13

      如何解决的呢 , canvas不能把获取过来的头像直接绘制,出来的图片头像为空,这个怎么解决呢

      2018-06-13
      回复
    • afun
      afun
      2018-06-13回复🙏冰心雪莲🙏

      没有官复了 ,沉船了

      2018-06-13
      回复
    • 娇华
      娇华
      2018-06-13回复🙏冰心雪莲🙏

      你好,实在抱歉,没来得及回复,需要先把图片下载下来,再绘制

      2018-06-13
      回复
    • 小亮
      小亮
      2018-06-25

      nginx 反向代理 +

      wx.downloadFile


      2018-06-25
      回复
  • afun
    afun
    2018-04-25

    wechatide://minicode/gFheOWmz6OYq

    2018-04-25
    赞同
    回复
  • afun
    afun
    2018-04-23

    onLoad(options) {

    const height = app.globalData.window_height;

    const width = app.globalData.window_width;

    const options = {

        head_photo = 'https://wx.qlogo.cn/mmopen/vi_32/N78NX78hLfDwG56Ocyyjhibqro6sFjIZmUzJM5aI90ySicyqMeRToKLImXl7v8DRVwMmVggfMzy1m15d2P5beejg/0',

        qrcode='http://oixavq5ec.bkt.clouddn.com/yaliapi/1302/wechat/b07f9201804161810206895.png'

    }

    这里是错误的  存在了options  不能const options  只是方便测试,把从上一级页面传进来的options 写进了页面


    2018-04-23
    赞同
    回复