首页 > 其他分享 >vue吸取图片主题色---ColorThief

vue吸取图片主题色---ColorThief

时间:2023-08-16 19:13:12浏览次数:44  
标签:vue hex ColorThief colorthief --- let data 图片

npm i --save colorthief

<template>
  <div>
    <img :src="coverLarge" crossorigin="anonymous" alt="" />
  </div>
</template>
<script>
import ColorThief from 'colorthief'
export default {
  data () {
    return {
      coverLarge:'',
    };
  },
  methods: {
    ImgColor() {
      let domImg = document.querySelector('img'); // 获取图片dom节点
      let colorthief = new ColorThief();
      domImg.addEventListener('load', () => { // 图片加载
        console.log('主色调', this.rgbaToHex(colorthief.getColor(domImg)));//图片主色调,第二个参数可选(1~10)
      })
    },
    rgbaToHex(rgba) { // rgba转16进制
      let hex = '#';
      for (const i of rgba) {
        hex += i.toString(16).padStart(2, '0');
      }
      return hex;
    },
    getMusicList () {
      return new Promise((resolve, reject) => {
        let sData = {}
        songInfo(sData).then(response => {
          const { data: res } = response
          this.coverLarge = res.data.coverLarge
          this.$nextTick(() => {
            this.ImgColor()
          })
        })
        resolve(true)
      }).catch(() => {
        reject(false)
      })
    },
  },
  mounted () {
    this.getMusicList()
  },
};
</script>

如果报错:The canvas has been tainted by cross-origin data.
说明跨域了,需要给图片设置属性:crossorigin="anonymous"

标签:vue,hex,ColorThief,colorthief,---,let,data,图片
From: https://www.cnblogs.com/chicidol/p/17635971.html

相关文章

  • 网络编程day01--socket套接字
    进程间通信-socket套接字基本特征:socket是一种接口技术,被抽象了一种文件操作,可以让同一计算机中的不同进程之间通信,也可以让不同计算机中的进程之间通信(网络通信)本地进程间通信编程模型:进程A                                        ......
  • 引入element-ui组件
    element-ui文档:https://element.eleme.io/#/zh-CN/component/quickstart 1、完整引入,按照如下红框中的引入即可,引入后即可使用element-ui中的各组件 2、按需引入,按照文档中引入即可 ......
  • xxl-job
    dockerdockerrun-ePARAMS="--server.port=9110--spring.datasource.url=jdbc:mysql://localhost:3306/xxl_job?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true--spring.data......
  • elementUI使用el-upload组件上传图片
    <el-form-itemlabel="上传图片":rules="[{required:true,message:'必须要上传图片',trigger:'blur'}]"prop="image"><el-upload:action=webSite......
  • 无涯教程-Perl - sprintf函数
    描述此函数使用FORMAT基于LIST中的值返回格式化的字符串。本质上与printf相同,但是返回格式化的字符串而不是将其打印。语法以下是此函数的简单语法-sprintfFORMAT,LIST返回值此函数返回SCALAR(格式化的文本字符串)。例以下是显示其基本用法的示例代码-#!/usr/bin/......
  • 免费-几款面向敏捷研发团队的敏捷项目管理工具
    在当今快节奏的商业环境中,许多企业纷纷开始转型Scrum敏捷开发。然而,要实现敏捷开发并确保项目的成功,不但要系统的学习敏捷,而且也需要好的敏捷工具来提高效率和促进团队协作。本文将介绍一些常用的敏捷项目开发工具,帮助您更好地管理和推动项目的进展。Leangoo领歌Leangoo领歌是Scrum......
  • 王道408---CO---存储系统知识点
    一、读写信号线一般是两根(如无特殊说明)二、如果DRAM采用复用技术,虽然地址线减半,但需要添加行片选线和列片选线三、SRAM与DRAM1、SRAM是六晶体管MOS(半导体材料),DRAM是电容2、SRAM依靠双稳态电路的两个稳定状态来分别存储0和1,DRAM依靠电容来存储信息四、U盘采用Flash存储技......
  • vue的template中el-uplaod属性使用变量的方法
    template<el-form-itemlabel="上传图片":rules="[{required:true,message:'必须要上传图片',trigger:'blur'}]"prop="image"><el-upload:action=webSit......
  • SQL注入-mysql绕过函数注入
    1.判断注入点通过测试发现,这里过滤了空格和等于号。所以咱们用/**/代替空格,用like代替=,最后将构造的语句进行url编码,使用的是小葵转化工具。所以咱们构造如下语句。//and//1//like//1结果如下图,页面正常显示。接着咱们再构造如下语句。/**/and/**/1/**/like/**/2发现页面报错,说明存......
  • 数字化格局下的引领者:百望云通过强制性国家标准GB18030-2022最高级别认证
    8月1日,强制性国家标准GB18030-2022《信息技术中文编码字符集》实施。8月15日,百望云“绿页阅读器”正式通过中国电子技术标准化研究院强制性国家标准GB18030-2022《信息技术中文编码字符集》最高级(实现级别3)认证,彰显了百望云在数字化信息处理领域对标国家标准的卓越技术实......