canvas 获取轮播图图片的颜色,开发者工具展示无问题,手机预览功能无效,求大佬看看啥问题?
发布于 6 年前 作者 xiuying52 4103 次浏览 来自 问答
// 获取的颜色
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)。

你应该会调试啊,打开调试工具多打点看看

图片地址 http ? 把图片地址修改为https 然后开放平台 配置 downloadFile合法域名

回到顶部