收藏
回答

canvasToTempFilePath 真机图片不显示

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug Android Android版本8.0.0 EMUI版本8.0.0 荣耀v9 Version 7.0.4

开发者工具 可以保存图片并显示,

而真机则保存的图片一直是黑色的,



onDownloadTap:function(e){

var query = wx.createSelectorQuery();

const ctx = wx.createCanvasContext('mycanvas', this);

query.select('.card').boundingClientRect()

query.exec((res) => {

var cardHeight = res[0].height; // 获取card高度

var cardWidth = res[0].width;

var cardX = res[0].left;

var cardY = res[0].top;

let _that = this;

var img = "https://7978-yxsc-28sz9-1255787772.tcb.qcloud.la/night.jpg?sign=75152903ca750d98823a703c3b4b2ae9&t=1558815924"

wx.getImageInfo({

src: img,

success(res) {

console.log(res)

_that.roundRect(ctx, res.path, 0, 0, cardWidth, cardHeight, 15)

ctx.draw(false, setTimeout(function () {

//回调方法

wx.canvasToTempFilePath({

canvasId: 'mycanvas',

success(res) {

console.log(res.tempFilePath)

_that.setData({

imgpath: res.tempFilePath

})

wx.saveImageToPhotosAlbum({

filePath: _that.data.imgpath,


success(res) {

wx.hideLoading();

wx.showModal({

title: '提示',

showCancel: false,

confirmText: '知道了',

confirmColor: '#0facf3',

content: '已成功为您保存图片到手机相册,请自行前往朋友圈分享。',

success: (res) => {

if (res.confirm) {

console.log('保存成功,隐藏模态框')

}

}

})

},

fail(res) {

console.log(res.errMsg)

wx.hideLoading();

if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {

wx.showModal({

title: '保存出错',

showCancel: false,

confirmText: '知道了',

confirmColor: '#0facf3',

content: '请开启相应的权限哦~',

success: (res) => {

console.log(res)

if (res.errMsg === "showModal:ok") {

console.log("打开设置窗口");

wx.openSetting({

success(settingdata) {

console.log(settingdata)

if (settingdata.authSetting["scope.writePhotosAlbum"]) {

console.log("获取权限成功,再次点击图片保存到相册")

} else {

console.log("获取权限失败")

}

}

})

}

}

})

}


}

})

},

fail(res) {

console.log(res)

}

}, _that)

}, 5000))

}

})

})

},


roundRect:function(ctx, img, x, y, w, h, r){

// 开始绘制

ctx.beginPath()

// 因为边缘描边存在锯齿,最好指定使用 transparent 填充

// 这里是使用 fill 还是 stroke都可以,二选一即可

ctx.setFillStyle("transparent")

//ctx.setStrokeStyle('transparent')

// 左上角

ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)


// border-top

ctx.moveTo(x + r, y)

ctx.lineTo(x + w - r, y)

ctx.lineTo(x + w, y + r)

// 右上角

ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)


// border-right

ctx.lineTo(x + w, y + h - r)

ctx.lineTo(x + w - r, y + h)

// 右下角

ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)


// border-bottom

ctx.lineTo(x + r, y + h)

ctx.lineTo(x, y + h - r)

// 左下角

ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)


// border-left

ctx.lineTo(x, y + r)

ctx.lineTo(x + r, y)


// 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应

ctx.fill()

// ctx.stroke()

ctx.closePath()

// 剪切

ctx.clip()


ctx.drawImage(img, 0, 0, w, h);


ctx.restore();

},


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

2 个回答

登录 后发表内容