微信小程序的图片色彩分析,解决画布网络图片报错问题,窃取网络图片的主色调

1、安装 Mini App Color Thief 包 

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

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

2、 问题和解决方案

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

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

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中需要放置

<canvas canvas-id="myCanvas" />
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()},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】:map和set的封装

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下set和map的封装&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结构…

【QT+QGIS跨平台编译】之三十八:【GDAL+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、gdal介绍二、文件下载三、文件分析四、pro文件五、编译实践一、gdal介绍 GDAL(Geospatial Data Abstraction Library)是一个用于读取、写入和处理地理空间数据的开源库。它支持多种栅格和矢量地理空间数据格式,包括常见的GeoTIFF、Shapefile、NetCDF、HDF5等,…

《Java 简易速速上手小册》第9章:Java 开发工具和框架 (2024 最新版)

文章目录 9.1 Maven 和 Gradle - 构建与依赖管理的神兵利器9.1.1 基础知识9.1.2 重点案例&#xff1a;使用 Maven 构建 Spring Boot 应用9.1.3 拓展案例 1&#xff1a;使用 Gradle 构建多模块项目9.1.4 拓展案例 2&#xff1a;利用 Gradle Wrapper 确保构建的一致性 9.2 Spring…

制作韦恩图常用软件或网站

韦恩图是一种用于可视化集合之间的关系的图表类型&#xff0c;通常用于显示集合之间的重叠和共同部分。以下是几种常用的制作韦恩图的软件或网站&#xff1a; Microsoft PowerPoint&#xff1a;虽然 PowerPoint 并不是专门用于制作韦恩图的软件&#xff0c;但它具有丰富的图表和…

专业130+总分420+厦门大学847信号与系统考研经验厦大信息系统与通信工程,真题,大纲,参考书。

今年很幸运被厦门大学录取&#xff0c;考研专业课847信号与系统130&#xff0c;数二130&#xff0c;总分420&#xff0c;回头看这将近一年的复习&#xff0c;还是有不少经验和大家分享&#xff0c;希望对大家复习有帮助。专业课&#xff1a; 厦门大学847信号与系统在全国各高校…

【doghead】bifrost的player 版本 windows构建

worker 直接用cmake 构建windows版本看起来也是可以的。我这里尝试用windows 添加文件的方式构建大神都是cmake直接windows构建的 可以参考 mediasoup-sfu-cpp 工程试试ouxianghui大神的vs2022构建bat脚本 D:\XTRANS\soup\mediasoup-server-sfu-ouxianghui-cpp\vc2022 Could No…

C++实现二分查找

目录 例1 例2 例3 例4 例5 例6 例1 704. 二分查找 注意&#xff1a; ①left < right,这里的号是最后一次通过下标mid来判断 ②在偶数的时候mid&#xff0c;左右无所谓&#xff0c;因为left和right都有1&#xff1b; 参考代码 class Solution { public:int search…

Gateway中Spring Security6统一处理CORS

文章目录 一、起因二、解决方法 一、起因 使用了gateway微服务作为整体的网关&#xff0c;并且整合了Spring Security6&#xff1b;还有一个system微服务&#xff0c;作为被请求的资源&#xff0c;当浏览器向gateway发送请求&#xff0c;请求system资源时&#xff0c;遇到CORS…

如何使用 Python 创建 Twitter 应用程序

简介 通过访问 Twitter API&#xff0c;您可以管理社交媒体账户&#xff0c;并且可以从社交媒体中获取数据。如果您代表一个企业或组织&#xff0c;这对品牌推广很有帮助&#xff1b;对于个人用户和业余程序员来说&#xff0c;这也可以是一种有趣的娱乐方式。 在本文中&#…

阿里(淘天)一面笔试算法原题

阿里撤资 "车来了" 近日&#xff0c;国内实时公交产品"车来了"关联公司武汉元光科技有限公司发生工商变更&#xff0c;阿里巴巴&#xff08;中国&#xff09;网络技术有限公司退出股东行列。 这很好理解&#xff0c;符合近期阿里收缩战线的行为一致性。 毕…

Oracle用BETWEEN AND查某年的数据可能会丢失条数

随便找一张有日期&#xff08;字段类型为DATE&#xff09;的表即可测试。 假设存在这样一张表HOLIDAY&#xff0c;里面存储的是某些国家(表字段为COUNTRY_CODE)某些年的法定假日日期(表字段为HOLIDAY_DATE)。 我想查中国在2023年和2024年的法定假日日期。 BETWEEN AND 首先想…

c语言container理解

最近看到一个宏定义如下&#xff1a; /** * rt_container_of - return the member address of ptr, if the type of ptr is the * struct type. */ #define rt_container_of(ptr, type, member) \ ((type *)((char *)(ptr) - (unsigned long)(&((type *)0)->mem…

微信小程序(四十四)鉴权组件插槽-登入检测

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.鉴权组件插槽的用法 2.登入检测示范 源码&#xff1a; app.json {"usingComponents": {"auth":"/components/auth/auth"} }app.js App({globalData:{//定义全局变量isLoad:false} })…

算法训练day26 leetcode39组合总和 40组合总和Ⅱ 131分割回文串

39 组合总和 题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以…

【动态规划】【数学】【C++算法】1449. 数位成本和为目标值的最大数字

作者推荐 【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目 本文涉及知识点 动态规划汇总 LeetCode1449. 数位成本和为目标值的最大数字 给你一个整数数组 cost 和一个整数 target 。请你返回满足如下规则可以得到的 最大 整数&#xff1a; 给当前结果添加…

文件包含知识点详细总结

如果想看图片和观感更好的话,可以直接去我的github或者gitbook github:https://github.com/kakaandhanhan/cybersecurity_knowledge_book-gitbook.22kaka.fun gitbook:http://22kaka.fun description: 这里将通过参考文章和做题一起进行总结,并且文件包含漏洞,很多都利用了…

【Linux】进程概念(冯诺依曼体系结构、操作系统、进程)-- 详解

一、冯诺依曼体系结构 1、概念 &#xff08;1&#xff09;什么是冯诺伊曼体系结构&#xff1f; 数学家冯诺伊曼于 1946 年提出存储程序原理&#xff0c;把程序本身当作数据来对待&#xff0c;程序和该程序处理的数据用同样的方式储存。 冯诺伊曼理论的要点是&#xff1a;计算…

【COMP337 LEC1】

Data Preprocessing Phase 数据预处理 1. Feature extraction 特征提取 1. An object is described by a collection of attributes 一个对象可以由一组特征来描述 2. A feature is a property or a characteristic of an objects 物体的属性 2. Data cleaning 数据清洗 Extra…

【EAI 019】Eureka: Human-Level Reward Design via Coding LLM

论文标题&#xff1a;Eureka: Human-Level Reward Design via Coding Large Language Models 论文作者&#xff1a;Yecheng Jason Ma, William Liang, Guanzhi Wang, De-An Huang, Osbert Bastani, Dinesh Jayaraman, Yuke Zhu, Linxi Fan, Anima Anandkumar 作者单位&#xff…

【ES6】Promise

Promise 回调地狱 const fs require(fs);fs.readFile(./a.txt, utf-8, (err, data) > {if(err) throw err;console.log(data);fs.readFile(./b.txt, utf-8, (err, data) > {if(err) throw err;console.log(data);fs.readFile(./c.txt, utf-8, (err, data) > {if(er…