收藏
回答

canvas下载海报的问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug wx.createCanvasContext 客户端 6.5.3 2.0.0

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


做这个canvas的功能做了半个月,一直出现bug,现在遇到一个比较特殊的bug 就是我在真机上面测试是没有问题的下载也可以下载到手机相册,但是我把代码上传到体验版就出现了一个bug ,手机打开体验本,如果没有打开这个调试的,下载到手机的图片就只有文字没有图片。就是这样但是我把调试打开就行,求助各位大佬呀,欢迎评论给方法,感觉再做不出来这个功能都要离职了。


saveImg: function (e) {

var that = this;

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

let path1 = this.data.img1;

let path2 = this.data.img2;

let path3 = this.data.img3;

console.log(path1);

console.log(path2);

console.log(path3);

ctx.rect(0, 0, 650, 910);

ctx.fillStyle = "#ffffff";//设置的背景颜色

ctx.fill();

// ctx.fillRect(20, 20, 150, 100);//边框

ctx.drawImage(path1, 20, 20, 335, 180);

ctx.drawImage(path2, 140, 238, 100, 90);


ctx.setFontSize(12);//设置字体

ctx.fillStyle = "#888888";

ctx.fillText(this.data.tip, 140, 349, 220);//提示


ctx.drawImage(path3, 150, 388, 80, 80);


ctx.setFontSize(14);//设置字体

ctx.fillStyle = "#ffa42b";

ctx.fillText(this.data.user_name, 168, 475, 100);//名字


ctx.setFontSize(14);//设置字体

ctx.fillStyle = "#666666";

ctx.fillText(this.data.tuijian, 158, 520, 120);//推荐


ctx.setFontSize(14);//设置字体

ctx.fillStyle = "#333333";

ctx.fillText(this.data.courseInfo.course_name, 108, 540, 220);//课题

// ctx.fillText(this.data.className, 108, 540, 220);//课题


ctx.draw(false, () => {

wx.canvasToTempFilePath({

//把当前画布指定区域的内容导出生成指定大小的图片   

x: 0,

y: 0,

destWidth: 375 * 2,//输出图片宽度           

destHeight: 663 * 2,//输出图片高度           

canvasId: 'secondCanvas', //画布标识           

fileType: 'png', //保存的图片格式,默认是png           

success: function (res) {  //接口调用成功的回调函数     

console.log(res)

console.log(res.tempFilePath);

let imgUrl = res.tempFilePath;

// if (imgUrl.indexOf("https")==1){

//   imgUrl = imgUrl.replace(/^http/,"https")

// }

if (!res.tempFilePath) {

wx.showToast({

title: '图片绘制中,请稍后重试',

duration: 1500

})

}


// wx.saveImageToPhotosAlbum({

//   filePath: res.tempFilePath,//返回的临时文件路径,下载后的文件会存储到一个临时文件

//   success: function (res) {

//     wx.showToast({

//       title: '成功保存到相册',

//       icon: 'success'

//     })

//   }

// })

wx.saveImageToPhotosAlbum({

filePath: imgUrl,  // 此为图片路径

success: (res) => {

console.log(res)

wx.showToast({

title: '成功保存到相册',

icon: 'success'

})

},

fail: (err) => {

wx.getSetting({

success(res) {

// 进行授权检测,未授权则进行弹层授权

if (!res.authSetting['scope.writePhotosAlbum']) {

wx.authorize({

scope: 'scope.writePhotosAlbum',

success() {

wx.saveImageToPhotosAlbum({

filePath: imgUrl,  // 此为图片路径

success: (res) => {

console.log(res)

wx.showToast({

title: '成功保存到相册',

icon: 'success'

})

}

})

},

// 拒绝授权时,则进入手机设置页面,可进行授权设置

fail() {

wx.openSetting({

success: function (data) {

console.log("openSetting success");

},

fail: function (data) {

console.log("openSetting fail");

that.toAuthorize()

}

});

}

})

} else {

// 已授权则直接进行保存图片

wx.saveImageToPhotosAlbum({

filePath: imgUrl,  // 此为图片路径

success: (res) => {

console.log(res)

wx.showToast({

title: '成功保存到相册',

icon: 'success'

})

}

})

}

},

fail(res) {

console.log(res);

}

})

}

})


// that.saveImage(imgUrl);

// that.saveImageToPhotos(imgUrl);

}

})

})

},


// 按钮点击触发

clickSave() {

this.saveImg(function (res) {

this.saveImageToPhotos(res)

})

},


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

3 个回答

  • 徐来春风
    徐来春风
    2019-06-22

    应该是微信头像的问题,需要设置微信的域名 分别有两个thirdwx.qlogo.cn,wx.qlogo.cn

    2019-06-22
    赞同
    回复 1
    • 。
      2019-06-23

      可以了,感谢

      2019-06-23
      回复
  • 反方向的钟
    反方向的钟
    2019-06-21

    需要在微信公众平台,配置downfile域名。

    2019-06-21
    赞同
    回复
  • 拾忆
    拾忆
    2019-06-21

    web工具关掉不校验域名试一下,看看控制台的输出

    2019-06-21
    赞同
    回复 3
    • 。
      2019-06-21

      刚刚试了一下还是不行

      2019-06-21
      回复
    • 拾忆
      拾忆
      2019-06-21

      控制台 是否出现 downloadFile:fail url not in domain list

      如果有 说明  需要配置downfile域名

      没有 :找官方大大

                                  

      2019-06-21
      回复
    • 。
      2019-06-21回复拾忆

      downloadFile:fail url not in domain list没有出现这个问题

      2019-06-21
      回复
登录 后发表内容