程序开发 js网络图片通过canvas获取图片颜色
依赖于 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编码
最新评论
北海の猫
博主您好!技术猫博客最近搬家了,前来通知小主更新一下域名及名称(顺便再来踢个门)
名称:Kitten's Blog
地址:http://blog.skillcat.cn
简介:设计成就梦想,细节成就品质。
图标:http://cn.gravatar.com/avatar/59cb46c14fe1df1292ca09a761b7cbe3
评:留言崔先森
效果真的一般般~
评:Linux QQ全新回归崔先森
deepin.用得挺爽?
评:在荣耀笔记本(Linux版)中拥有深度应用商店,几步就搞定!Jason
[img] /wp-content/uploads/comments/2162/20191017093509309002.jpg[/img] 测试图片上传
评:Vultr怎么解除信用卡绑定?挖站否
评论可以上传图片了?
评:Vultr怎么解除信用卡绑定?delong
中文域名好记
评:留言崔先森
哟,这次主题很牛逼啊~
评:留言saber
和qi一样的想法…
评:jQuery tab选项卡中的瀑布流挖站否
又换域名了?
评:jQuery tab选项卡中的瀑布流xiaomo
懂就是好,会玩
评:宝塔面板使用WebHook 更新nuxt网站