canvas 获取轮播图图片的颜色,开发者工具展示无问题,手机预览功能无效,求大佬看看啥问题?
// 获取的颜色
onColor(event) {
//canvas2d
return new Promise((resolve, reject) => {
var query = wx.createSelectorQuery();
var dpr = getApp().globalData.dpr;
query.select('#canvas-img').fields({
node: true,
size: true
}).exec((res) => {
//可能报错
if (res[0] == null || res[0].node == null) {
return;
};
var canvas = res[0].node;
var ctx = canvas.getContext('2d');
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
var img = canvas.createImage();
wx.downloadFile({
url: event.url,
success: ((x) => {
img.src = x.tempFilePath;
img.onload = (e) => {
ctx.drawImage(img, 20, 20, 343, 150);
var imageData = ctx.getImageData(21, 25, 343, 150).data;
var color = [];
for (var i = 0; i < 2; i++) {
var R = imageData[i == 0 ? 100 : 2800];
var G = imageData[i == 0 ? 101 : 2801];
var B = imageData[i == 0 ? 102 : 2802];
color.push("rgba(" + R + "," + G + "," + B + ")");
};
var color = [color[0], color[color.length - 1]];
resolve({
'color': color,
'i': event.i
});
};
}),
fail: ((err) => {})
});
});
});
},
//处理函数
getHomeSwipe() {
var that = this
$fn.post('getHomeSwipe').then(res => {
var arry = res.data.data;
arry.bannerList.map((item,index)=>{
console.log(index,item)
that.onColor({
'url': item.photoUrl,
'i': index
}).then((res) => {
console.log(1111)
arry.bannerList[res.i].color = res.color
this.setData({
['swipe[' + res.i + '].color']: res.color
})
})
})
that.setData({
swipe: arry.bannerList,
});
})
}
//swipe数组 bannerlist
swipe:[
{"id":"10",
"bannerName":"福袋",
"weight":8,
"photoUrl":"http://qiniuoss.vipcaihui.cn/1615198935408984944646",
"redirectUrl":"",
"remark":"",
"type":1,
"publishStatus":1,
"delStatus":0,
"createTime":"2020-12-08 02:02:35"
},
{"id":"11",
"bannerName":"福袋新年",
"weight":0,
"photoUrl":"http://qiniuoss.vipcaihui.cn/1611973057757306578063",
"redirectUrl":"",
"remark":"",
"type":1,
"publishStatus":1,
"delStatus":0,
"createTime":"2021-01-30 10:18:03"}]
麻烦大佬看看😂😂😂,是啥问题导致的
3 回复
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。