微信小程序的图片色彩分析,窃取网络图片的主色调

1、安装 Mini App Color Thief 包

包括下载包,简单使用都有,之前写了,这里就不写了

网址:微信小程序的图片色彩分析,窃取主色调,调色板-CSDN博客

2、 问题和解决方案

  • **问题:由于我们的窃取图片的是需要画布的,**我需要使用网络图片去用画布时,微信小程序会报错,最后发现,需要本地图片才行,用网络图片会出问题
  • 解决方案:我们使用wx.downloadFile去下载该图片,然后获取临时路径去使用画布和Mini App Color Thief 包 窃取图片颜色,防止图片重复下载的话,我们去用微信小程序中的另一个api,FileSystemManager.access(Object object)去判断临时文件是否存在

3、配置downloadFile.js文件【放置在utils文件夹下】

javascript 复制代码
export default (url, path = "") => {
  return new Promise((resolve, reject) => {
    const fs = wx.getFileSystemManager()
    // 判断文件/目录是否存在
    fs.access({
      path,
      success(res) {
        // 文件存在,复用
        console.log(res)
        resolve(path)
      },
      fail(res) {
        // 文件不存在或其他错误,下载为临时文件
        console.log(res)

        wx.downloadFile({
          url,
          success(res) {
            if (res.statusCode === 200) {
              resolve(res.tempFilePath)
              wx.setStorageSync('bgcUrl', res.tempFilePath)
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      }
    })
  })
}

4、获取图片临时路径,开始窃取

注意:wxml中需要放置

html 复制代码
<canvas canvas-id="myCanvas" />
javascript 复制代码
import downloadFile from '../../utils/downloadFile'

Page({
  data: {
    palette: "",

    // 用户信息
    userInfo: {},
  },

  // 判断是否有背景图片的缓存文件,没有就下载为临时文件,最后绘画出来
  async bgcDownload() {
    let bgcUrl = wx.getStorageSync('bgcUrl')
    let result = await downloadFile(this.data.userInfo.backgroundUrl, bgcUrl)
    console.log(result);

    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(result, 0, 0, 100, 100);
    ctx.draw(false, () => {
      wx.canvasGetImageData({
        canvasId: "myCanvas",
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        success: res => {
          let palette = colorThief(res.data).color().getHex();
          this.setData({ palette })
        }
      });
    })
  },
  onReady: function () {
    this.bgcDownload()
  },
})
相关推荐
CoderYanger3 分钟前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
2501_915921433 分钟前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
ue星空6 分钟前
逆向分析光与影:33号远征队使用的UE技术栈
笔记·学习
CodeCraft Studio6 分钟前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking118 分钟前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI12 分钟前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI12 分钟前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
立志成为大牛的小牛15 分钟前
数据结构——二十二、并查集(王道408)
c语言·数据结构·笔记·学习·考研
IT_陈寒29 分钟前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia35 分钟前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈