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

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

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();

},