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

colorThief+vite+react使用方法

 官网:

Color Thief

npm i --save colorthief

 第一种,import载入图片

经过尝试,在vite中,要引入.mjs版本
import ColorThief from 'colorthief/dist/color-thief.mjs'
第一种,通过import载入图片
import aa from '@/assets/123.jpg'const [resultColor,setResultColor]=useState('')
useEffect(()=>{var colorthief = new ColorThief();var img = document.getElementById('tupian')if (img.complete) {var res = colorthief.getColor(img);console.log('======网速很快', res);setResultColor(res)} else {img.addEventListener('load', function () {var res = colorthief.getColor(img)console.log('======事件监听', res);setResultColor(res)});}
},[])<img src={aa} id="tupian" />
<div style={{ width: '100px', height: '100px', backgroundColor: `rgba(${resultColor})` }}></div>

第二种,new Image实例

经过尝试,在vite中,要引入.mjs版本
import ColorThief from 'colorthief/dist/color-thief.mjs'import aa from '@/assets/123.jpg'const [resultColor,setResultColor]=useState('')
useEffect(()=>{var colorthief = new ColorThief();var img = new Image()img.src = '/123.jpg'if (img.complete) {var res = colorthief.getColor(img);console.log('======网速很快', res);setResultColor(res)} else {img.addEventListener('load', function () {var res = colorthief.getColor(img)console.log('======事件监听', res);setResultColor(res)});}
},[])<img src={aa} id="tupian" />
<div style={{ width: '100px', height: '100px', backgroundColor: `rgba(${resultColor})` }}></div>

图片如果设计跨域,那么需要在img标签上增加crossorigin,同时对应的图片服务器也要增加允许跨域,缺一不可.

附赠2个常用函数

export default function imgToBase64(url) {return new Promise((resolve, reject) => {const image = new Image()image.src = urlimage.onload = () => {const canvas = document.createElement('canvas')canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度canvas.height = image.naturalHeightcanvas.style.width = `${canvas.width / window.devicePixelRatio}px`canvas.style.height = `${canvas.height / window.devicePixelRatio}px`const ctx = canvas.getContext('2d')if (!ctx) {return null}ctx.drawImage(image, 0, 0)const base64 = canvas.toDataURL('image/png')return resolve(base64)}image.onerror = (err) => {return reject(err);}})
}export function getURLBase64(url) {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest()xhr.open('get', url, true)xhr.responseType = 'blob'xhr.onload = function () {if (this.status === 200) {var blob = this.responsevar fileReader = new FileReader()fileReader.onloadend = function (e) {var result = e.target.resultresolve(result)}fileReader.readAsDataURL(blob)}}xhr.onerror = function () {reject()}xhr.send()})
}

http://www.lryc.cn/news/290509.html

相关文章:

  • Hive(15)中使用sum() over()实现累积求和和滑动求和
  • 2024年Java搭建面试题
  • 二维数组的学习
  • Java集合(List集合)
  • 7、Json文件的操作总结【robot framework】
  • python 循环解压 解压多重压缩包
  • 基于C#制作一个连连看小游戏
  • Android-System 根据包名查找已安装应用apk方法
  • 洛谷-P4124题-手机号码-Java
  • 仅使用 Python 创建的 Web 应用程序(前端版本)第08章_商品详细
  • Stable Diffusion 长视频真人动画风格互转
  • 精要图示:园区金融数字化服务蓝图,以园区为支点推动信贷业务增长
  • 2024 中国(南京)国际口腔设备器械博览会
  • 【MyBatis】快速入门MyBatis(保姆式教学),你值得一看
  • git pull代码时候报错:error: cannot open .git/FETCH_HEAD: Permission denied
  • shell - 正则表达式和grep命令和sed命令
  • datawhale 大模型学习 第十二章-大模型环境影响
  • Qt WebEngine模块使用(开发环境安装和程序开发)
  • 网络体系结构 和网络原理之UDP和TCP
  • 将Android APP安装到sm8550 HDK的NVMe SSD
  • (Arcgis)Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • Linux:进度条的创建
  • treeview
  • Android开发中自定义View实现RecyclerView下划线
  • MySQL前百分之N问题--percent_rank()函数
  • 【高效开发工具系列】Wolfram Alpha
  • 分享7种SQL的进阶用法
  • protobuf-go pragma.go 文件介绍
  • C#设置程序开机启动
  • 爱可声助听器参与南湖区价值百万公益助残捐赠活动成功举行