收藏
回答

cavas里面draw方法调用画布就空白,怎么保存图片啊

如题,画布保存图片的方法里面说要在draw方法回调里面写才能保证保存成功,但是调了这个方法页面都成空白了,要怎么保存图片呢

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

2 个回答

  • 杨春泓
    杨春泓
    2018-10-15

    var query = wx.createSelectorQuery();

    query.select('.getwidth').boundingClientRect(function (rect) {

    var context = wx.createContext('customCanvas');

    var scale = that.data.scale;

    var lefttext = 35 * scale;

    var radius = 240 * scale;

    //下载医生图片到本地

    wx.downloadFile({

    // url: doctor.headImg,

    url: img_path + 'doctor.jpg',

    success: function (res) {

    //下载二维码到本地

    wx.downloadFile({

    url: img_path + 'cardewm.jpg',

    success: function (erweima) {


    //白色背景

    context.rect(0, 0, 750 * scale, 480 * scale)

    context.setFillStyle('#fff')

    context.setStrokeStyle("#fff");

    context.fill()


    //绘制颜色块

    context.beginPath();

    context.setFillStyle("#fff");

    context.setStrokeStyle("#97ccff");

    context.rect(0, 316 * scale, Math.round(rect.width) + 5, 24)

    context.fill()

    context.stroke()


    //绘制颜色块

    context.beginPath();

    context.setFillStyle("#97ccff");

    context.setStrokeStyle("#97ccff");

    context.rect(0, 270 * scale, Math.round(rect.width) + 5, 24)

    context.fill()

    context.stroke()


    //绘制医院名

    context.setFontSize(26);

    context.setFillStyle('#333');

    context.font = 'normal  20rpx sans-serif';

    context.fillText(doctor.hospitalName, 0, 130 * scale);

    context.stroke();


    //绘制医生名

    context.setFontSize(28);

    context.setFillStyle('#96ccff');

    context.fillText(doctor.name, 0, 212 * scale);

    context.stroke();


    //绘制科室

    context.setFontSize(16);

    context.setFillStyle('#fff');

    // context.fillText(doctor.section, 15 * scale, 371 * scale);

    context.fillText('耳鼻喉科', 15 * scale, 308 * scale);

    context.stroke();

    //绘制职称

    context.setFontSize(16);

    context.setFillStyle('#97ccff');

    // context.fillText(doctor.jobTitle, 15 * scale, 371 * scale);

    context.fillText('主任医师', 15 * scale, 354 * scale);

    context.stroke();


    //绘制二维码小图标

    context.drawImage(erweima.tempFilePath, 0, 390 * scale, 144 * scale, 49 * scale);

    //绘制医生图片

    context.setStrokeStyle('rgba(0,0,0,0)')

    context.save()

    context.beginPath()

    context.arc(550 * scale, 240 * scale, radius, 0, Math.PI * 2, false);

    context.clip()

    context.drawImage(res.tempFilePath, 310 * scale, 0, radius * 2, radius * 2);

    context.restore()


    //绘制英文 SAMRT MEDICAL CARE.

    context.setFillStyle('#ccc');

    context.setFontSize(22);

    context.fillText('SAMRT MEDICAL CARE.', 0, 53 * scale);

    context.stroke();

    context.save();

    context.draw(true)


    // 配置分享名片

    wx.drawCanvas({

    canvasId: 'customCanvas',

    actions: context.getActions(),

    });


    wx.canvasToTempFilePath({


    2018-10-15
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-10-15

    你写错了吧。。代码看看呢。。看不到代码。不知道你错哪里

    2018-10-15
    有用
    回复 18
    • 杨春泓
      杨春泓
      2018-10-15

      确实不太会用cavas,是没有闭合路径什么造成的吗,还是别的问题啊,在看文档,找不到问题在哪儿

      2018-10-15
      回复
    • 卢霄霄
      卢霄霄
      2018-10-15回复杨春泓

      能做成代码片段吗?

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      首先你存图的代码要写到

      ctx.draw(true,()=>{

          //写到这里

      })

      2018-10-15
      回复
    • 杨春泓
      杨春泓
      2018-10-15回复卢霄霄

      问题是draw调用之前cavas是好好的,调用之后cavas就空白了,回调放进去也是白的啊

      2018-10-15
      回复
    • 杨春泓
      杨春泓
      2018-10-15回复卢霄霄

      不是空白了,但是图片没保存成功。。

      2018-10-15
      回复
    • 卢霄霄
      卢霄霄
      2018-10-15回复杨春泓

      能提供代码片段吗?

      那是不是图片就没下载成功呢?加了downloadFile白名单的吗?

      2018-10-15
      回复
    查看更多(13)
登录 后发表内容