前端图片处理(二) --- Grade.js

sanye丶

已于 2022-08-19 18:32:21 修改

阅读量603

点赞数

分类专栏： vue JavaScript 文章标签： javascript 前端开发语言

于 2020-12-28 17:29:01 首次发布

本文链接：https://blog.csdn.net/weixin_42029374/article/details/111869646

版权

8 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

它的官网上是这么说它的：“This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.”，翻译过来大概就是：这个JavaScript库从提供的图像中计算出两种主要颜色生成互补渐变的背景。

npm install grade-js

import Grade from 'grade-js'

<div class="grade-image">
	<img src="img-url" width="100%" height="100%" crossorigin="anonymous">
</div>

window.addEventListener('load', function(){
	Grade(document.querySelectorAll('.grade-image'))
 })

一定要在图片加载完之后再执行，可以在window 的 load 事件触发时执行，或者在 img 的 load 事件触发时执行，不然会报错：
因为图片有可能跨域，所以后台图片一定要设置了 Access-Control-Allow-Origin，并且在前端图片（img 元素）要设置crossorigin属性，它有两个可选择：anonymous（对此元素的 CORS 请求将不设置凭据标志；和设置为''效果一样）、use-credentials（对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。）。如果不设置会出现如下报错：

关注