当前位置: 首页 > news >正文

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

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()},
})

相关文章:

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

1、安装 Mini App Color Thief 包 包括下载包&#xff0c;简单使用都有&#xff0c;之前写了&#xff0c;这里就不写了 网址&#xff1a;微信小程序的图片色彩分析&#xff0c;窃取主色调&#xff0c;调色板-CSDN博客 2、 问题和解决方案 问题&#xff1a;由于我们的窃取图片的…...

Leetcode 121 买卖股票的最佳时机

题意理解&#xff1a; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交…...

SQL语言复习-----1

1&#xff0c;前言 SQL是计算机的一门基础语言&#xff0c;无论在开发还是数据库管理上都是非常重要&#xff0c;最近总结归纳了一下相关知识&#xff0c;记录如下。 2&#xff0c;归纳 SQL是结构化查询语言。 关系数据库有三级模式结构。 基本表和视图一样都是关系。 举例…...

爬虫2—用爬虫爬取壁纸(想爬多少张爬多少张)

先看效果图&#xff1a; 我这个是爬了三页的壁纸60张。 上代码了。 import requests import re import os from bs4 import BeautifulSoupcount0 img_path "./壁纸图片/"#指定保存地址 if not os.path.exists(img_path):os.mkdir(img_path) headers{ "User-Ag…...

学习Android的第九天

目录 Android Button 按钮 基本的按钮 StateListDrawable 范例 使用颜色值绘制圆角按钮 自制水波纹效果 Android ImageButton 图片按钮 ImageButton 不同状态下的 ImageButton Android RadioButton 单选按钮 RadioButton 获得选中的值 Android Button 按钮 在 And…...

课时21:内置变量_脚本相关

2.4.1 脚本相关 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 脚本相关的变量解析 序号变量名解析1$0获取当前执行的shell脚本文件名2$n获取当前执行的shell脚本的第n个参数值&#xff0c;n1…9&#xff0c;当n为0时表示脚本的文…...

ubuntu22.04@laptop OpenCV Get Started: 006_annotating_images

ubuntu22.04laptop OpenCV Get Started: 006_annotating_images 1. 源由2. line/circle/rectangle/ellipse/text 应用Demo3 image_annotation3.1 C应用Demo3.2 Python应用Demo3.3 重点过程分析3.3.1 划线3.3.2 画圆3.3.3 矩形3.3.4 椭圆3.3.5 文字 4. 总结5. 参考资料 1. 源由 …...

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏10(附项目源码)

本节最终效果演示 文章目录 本节最终效果演示系列目录前言快捷栏绘制UI代码控制快捷列表信息 源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第23篇中&#xff0c;我们将探索如何制作…...

uniapp vue3怎么调用uni-popup组件的this.$refs.message.open() ?

vue2代码 <!-- 提示信息弹窗 --><uni-popup ref"message" type"message"><uni-popup-message :type"msgType" :message"messageText" :duration"2000"></uni-popup-message></uni-popup>typ…...

【深度学习:语义分割】语义分割简介

【深度学习&#xff1a;语义分割】语义分割简介 什么是图像分割&#xff1f;了解语义分割数据采集语义分割的深度学习实现全卷积网络上采样跳跃连接U-NetDeepLab多尺度物体检测金字塔场景解析网络&#xff08;PSPNet&#xff09; 语义分割的应用医学影像自动驾驶汽车农业图片处…...

前端开发_AJAX基本使用

AJAX概念 AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。 简单点说&#xff0c;就是使用XMLHttpRequest对象与服务器通信。 它可以使用JSON&#xff0c;XML&#xff0c;HTML和text文本等格式发送和接收数据。 AJAX最吸引人的就是它的“异步"特性&am…...

OnlyOffice-8.0版本深度测评

OnlyOffice 是一套全面的开源办公协作软件&#xff0c;不断演进的 OnlyOffice 8.0 版本为用户带来了一系列引人瞩目的新特性和功能改进。OnlyOffice 8.0 版本在功能丰富性、安全性和用户友好性上都有显著提升&#xff0c;为用户提供了更为强大、便捷和安全的文档处理和协作环境…...

【Go】一、Go语言基本语法与常用方法容器

GO基础 Go语言是由Google于2006年开源的静态语言 1972&#xff1a;&#xff08;C语言&#xff09; — 1983&#xff08;C&#xff09;—1991&#xff08;python&#xff09;—1995&#xff08;java、PHP、js&#xff09;—2005&#xff08;amd双核技术 web端新技术飞速发展&…...

杨中科 ASP.NETCORE 高级14 SignalR

1、什么是websocket、SignalR 服务器向客户端发送数据 1、需求&#xff1a;Web聊天;站内沟通。 2、传统HTTP&#xff1a;只能客户端主动发送请求 3、传统方案&#xff1a;长轮询&#xff08;Long Polling&#xff09;。缺点是&#xff1f;&#xff08;1.客户端发送请求后&…...

哪家洗地机比较好用?性能好的洗地机推荐

在众多功能中&#xff0c;我坚信洗地机的核心依旧是卓越的清洁能力以及易于维护的便捷性&#xff0c;其他的附加功能可以看作是锦上添花&#xff0c;那么如何找到性能好的洗地机呢&#xff1f;我们一起看看哪些洗地机既能确保卫生效果还能使用便利。 洗地机工作原理&#xff1…...

学习与非学习

学习与非学习是人类和动物行为表现中的两种基本形式&#xff0c;它们在认知过程和行为适应上有着根本的区别。理解这两者之间的差异对于把握认知发展、心理学以及教育学等领域的核心概念至关重要。 学习 学习是一个获取新知识、技能、态度或价值观的过程&#xff0c;它导致行为…...

牛客网SQL进阶127: 月总刷题数和日均刷题数

官网链接&#xff1a; 月总刷题数和日均刷题数_牛客题霸_牛客网现有一张题目练习记录表practice_record&#xff0c;示例内容如下&#xff1a;。题目来自【牛客题霸】https://www.nowcoder.com/practice/f6b4770f453d4163acc419e3d19e6746?tpId240 0 问题描述 基于练习记录表…...

19:Web开发模式与MVC设计模式-Java Web

目录 19.1 Java Web开发模式19.2 MVC设计模式详解19.3 MVC与其他Java Web开发模式的区别总结19.4 应用场景总结 在Java Web应用程序开发领域&#xff0c;有效的架构模式和设计模式对提高代码可维护性、模块化以及团队协作至关重要。本文将探讨Java Web开发中的常见模式——模型…...

Z字形变换

问题&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你…...

飞书上传图片

飞书上传图片 1. 概述1.1 访问凭证2. 上传图片获取image_key1. 概述 飞书开发文档上传图片: https://open.feishu.cn/document/server-docs/im-v1/image/create 上传图片接口,支持上传 JPEG、PNG、WEBP、GIF、TIFF、BMP、ICO格式图片。 在请求头上需要获取token(访问凭证) …...

s2-pro效果展示:高保真语音生成——呼吸感、重音、语速变化细节还原

s2-pro效果展示&#xff1a;高保真语音生成——呼吸感、重音、语速变化细节还原 1. 专业级语音合成新标杆 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;正在重新定义文本转语音的技术标准。不同于市面上常见的机械式语音合成&#xff0c;这款工具能够精准还…...

如何在普通PC上低成本部署Qwen3?VLLM轻量化配置指南

如何在普通PC上低成本部署Qwen3&#xff1f;VLLM轻量化配置指南 对于大多数个人开发者和小型团队来说&#xff0c;高性能服务器和顶级显卡往往是可望而不可及的奢侈品。但别担心&#xff0c;即使你只有一台普通PC&#xff0c;也能通过合理的配置和优化手段成功部署Qwen3这样的大…...

Nunchaku FLUX.1-dev效果实测:低光照/夜景/逆光等复杂场景表现

Nunchaku FLUX.1-dev效果实测&#xff1a;低光照/夜景/逆光等复杂场景表现 你是不是也遇到过这样的烦恼&#xff1f;想用AI生成一张夜景照片&#xff0c;结果画面一片死黑&#xff0c;细节全无&#xff1b;或者想创作一张逆光人像&#xff0c;结果人物脸部黑成一团&#xff0c…...

微信小程序点餐毕业设计开题报告怎么写:从实战需求到技术架构的完整拆解

最近在辅导学弟学妹做毕业设计&#xff0c;发现很多同学在写“微信小程序点餐系统”的开题报告时&#xff0c;都挺头疼的。大家普遍感觉&#xff0c;报告写出来要么是功能列表的堆砌&#xff0c;要么就是技术方案写得特别虚&#xff0c;什么“采用先进技术”、“保证高可用”&a…...

母版设置、讲义母版、模板设置

母版设置、讲义母版、模板设置一. 母版设置1.1 插入母版及版式1.2 重命名母版及版式1.3 版式设置1.4 例题二. 讲义母版2.1 讲义母版设置三. 模板设置3.1 导入模板3.2 例题一. 母版设置 1.1 插入母版及版式 插入母版 插入版式&#xff0c;先点击一下母版 1.2 重命名母版及版…...

GEM-2电磁感应仪:从50Hz到93kHz,如何用多频数据‘看透’地下三维结构?

GEM-2电磁感应仪&#xff1a;多频探测技术如何重塑地下三维成像 想象一下&#xff0c;你手持一支能调节光束的手电筒——低频光束能穿透厚重的地层照亮深部结构&#xff0c;而高频光束则精准聚焦于浅表细节。这正是GEM-2电磁感应仪的核心技术隐喻&#xff1a;通过50Hz到93kHz的…...

2025年卡膜优质企业TOP榜|亲测分享实践案例

引言随着包装材料市场对功能性、环保性及定制化需求的不断提升&#xff0c;卡膜作为高透明、高韧性的包装材料&#xff0c;广泛应用于文件收纳、相册制作、资料分类、礼品包装等领域。2025年&#xff0c;各大卡膜生产企业在生产工艺、原材料把控、定制服务能力及交付效率等方面…...

AI赋能Java开发:在快马平台轻松构建集成智能对话与代码分析的Java应用

最近尝试用Java结合AI能力做了个小项目&#xff0c;发现这种组合特别适合快速开发智能应用。在InsCode(快马)平台上实践后发现&#xff0c;整个过程比想象中简单很多&#xff0c;分享下具体实现思路。 项目框架搭建 用Spring Initializr创建基础项目&#xff0c;选择Web和Lombo…...

C++ vs .NET 数组原地反转实测:小数组 C++ 碾压,大数组 .NET

C vs .NET 数组原地反转实测&#xff1a;小数组 C 碾压&#xff0c;大数组 .NET 反杀&#xff1f; 前几天看到一篇文章&#xff1a;《将一个序列反序&#xff0c;在C与C#下性能比较》&#xff08;链接大家可以自行搜索&#xff09;。作者对比了 C# 的“托管/非托管”实现和 C 的…...

MOS管技术详解:从基础到工程应用

MOS管技术详解&#xff1a;从基础原理到工程应用1. MOS管基础概念与分类1.1 场效应管基本类型场效应管(FET)主要分为两大类型&#xff1a;结型场效应管(JFET)&#xff1a;Junction Field-Effect Transistor金属氧化物半导体场效应管(MOSFET)&#xff1a;Metal-Oxide-Semiconduc…...