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 = url
    image.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
      canvas.height = image.naturalHeight
      canvas.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.response
        var fileReader = new FileReader()
        fileReader.onloadend = function (e) {
          var result = e.target.result
          resolve(result)
        }
        fileReader.readAsDataURL(blob)
      }
    }
    xhr.onerror = function () {
      reject()
    }
    xhr.send()
  })
}
相关推荐
YL雷子1 小时前
纯前端使用ExcelJS插件导出Excel
前端·vue·excel
什么什么什么?1 小时前
el-table高度自适应vue页面指令
前端·javascript·elementui
码上暴富4 小时前
axios请求的取消
前端·javascript·vue.js
JefferyXZF5 小时前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
一只韩非子6 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师6 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager6 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴6 小时前
Int / Floor
前端·webgl
excel6 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment6 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js