你想反馈一个 Bug 还是 提一个需求?
如果是 Bug:
* Bug 表现是什么?预期表现是什么?
使用createLinearGradient绘图,保存到本地相册后,保存到相册的图片异常,看下面截图。
ios相册图片效果(异常)
安卓机相册图片效果(正常)
* 如何复现?
用ios终端微信6.6.3版本测试,
复现代码如下:
wxml:
<canvas canvas-id="myCanvas" style="border: 1px solid;width:300px;height:300px;">canvas>
<button bindtap='onSaveTap'>保存到相册button>
js:
let ctx
Page({
onLoad: function (options) {
ctx = wx.createCanvasContext('myCanvas')
},
onSaveTap(){
ctx.setFillStyle('#ff0000')
ctx.fillRect(0, 0, 300, 150)
const grd = ctx.createLinearGradient(0, 150, 0, 300)
grd.addColorStop(0, '#00ff00')
grd.addColorStop(1, '#0000ff')
ctx.setFillStyle(grd)
ctx.fillRect(0, 150, 300, 150)
draw()
.then(() => {
return canvasToUrl()
})
.then(res => {
save(res)
})
.catch(e => {
console.log(e)
wx.showToast({
title: '保存失败',
})
})
function draw() {
return new Promise((resolve, reject) => {
ctx.draw(false, function () {
resolve()
})
})
}
// canvas绘图转本地地址
function canvasToUrl() {
return new Promise((resolve, reject) => {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
resolve(res.tempFilePath)
},
fail: function (err) {
reject(err)
}
})
})
}
// 保存到相册:参数本地路径
function save(path) {
return new Promise((resolve, reject) => {
wx.saveImageToPhotosAlbum({
filePath: path,
success: function (res) {
setTimeout(function () {
wx.showToast({
title: '已保存至相册',
icon: 'success',
duration: 1000
})
resolve(res)
}, 500)
},
fail: function (err) {
reject(err)
}
})
})
}
},
})