js网络图片通过canvas获取图片颜色

黄良钵

分类: 程序开发 0 1

依赖于 rgbaster 包,

安装rgbaster: yarn add rgbaster

import analyze from 'rgbaster'
export default {
  mounted() {
    this.getBackground()
  },
  methods: {
    getBackground() {
      const that = this
      function getBase64Image(img, suffix) {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        const dataURL = canvas.toDataURL('image/' + suffix) // 可选其他值 image/jpeg
        canvas = null // 释放
        return dataURL
      }

      function getColors(src, cb) {
        const image = new Image()
        const splits = src.split('.')
        const suffix = splits[splits.length - 1]
        image.setAttribute('crossOrigin', 'anonymous') // 支持跨域图片
        image.src = src + '?v=' + Math.random() // 处理缓存
        image.onload = function () {
          const base64 = getBase64Image(image, suffix)
          cb && cb(base64)
        }
      }

      getColors('https://cdn.huangliangbo.com/wp-content/uploads/2019/04/zh-2.jpg', async function (base64) {
        const result = await analyze(base64, { scale: 0.6 }) // also supports base64 encoded image strings
        that.bgColor = result[0].color
      })
    }
  }
}

部分内容来着:canvas图片问题浅析JS将图片转为base64编码

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
canvas、js获取图片颜色、rgbaster

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 1 条评论关于 “js网络图片通过canvas获取图片颜色”

Loading...