原生js实现吸取图片颜色

吸取图片颜色

利用canvas实现颜色的吸取和图片展示
可以根据图片的url
可以上传本地图片

通过图片的url实现颜色吸取

 var getUrl = document.querySelector('.getUrl')var submit = document.querySelector('.submit')onLoad()submit.addEventListener('click', function () {onLoad()})function onLoad() {var image = new Image()image.src = getUrl.value || "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1716737588,2183221507&fm=26&gp=0.jpg"image.crossOrigin = "anonymous"image.onload = function () {var canvas = document.getElementById('canvas');var testBag = document.querySelector('.test')var maxVal = getRgba(canvas, this)var splitArr = maxVal.split(",")var hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))testBag.style.backgroundColor = '#' + hex}}

通过上传图片的方式吸取颜色

    var oFile = document.querySelector('.file')var bagColor = document.querySelector('.bagColor')var canvasss = document.querySelector('.canvas')oFile.addEventListener("change", function (e) {var img = e.target.files[0];//检查能否读取图片if (!img) return// 检查图片类型 if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) return alert('图片只能是jpg,gif,png');// 限制图片大小 if (img.size > 500 * 1024) return alert('图片不能大于500K')var images = new Image()//获取图片地址images.src = window.URL.createObjectURL(img)images.onload = function () {var maxVal = getRgba(canvasss, this)var splitArr = maxVal.split(",")var hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))bagColor.style.backgroundColor = '#' + hex}})

获取ragba

   //获取function getRgba(canvas, that) {var imgWidth = that.widthvar imgHeight = that.height//给canvas赋宽高canvas.width = imgWidthcanvas.height = imgHeightvar context = canvas.getContext('2d');// 将图片按像素写入画布 context.drawImage(that, 0, 0, imgWidth, imgHeight)//读取图片像素信息var imgdatas = context.getImageData(0, 0, imgWidth, imgHeight);//获取rgba数据var imgdata = imgdatas.data;var newJson = {},length = imgdata.length;for (let i = 0; i < length; i++) {if (i % 4 === 0) { // 每四个元素为一个像素数据 r,g,b,alpha var alpha = Math.round(imgdata[i + 3] / 255 * 100) / 100; // alpha 值var rgba = imgdata[i] + ',' + imgdata[i + 1] + ',' + imgdata[i + 2] + ',' + alpha;if (!newJson[rgba]) {newJson[rgba] = 1} else {newJson[rgba]++}}}//取出现最多的rgbavar maxNum = 0,maxVal = "";for (let key in newJson) {if (newJson[key] > maxNum) {maxNum = newJson[key];maxVal = key;}}console.log('rgba:', maxVal + "; 次数:" + maxNum)return maxVal}

获取16进制颜色

 function getHex(...value) {r = value[0].toString(16);g = value[1].toString(16);b = value[2].toString(16);// 补0 r.length == 1 ? r = '0' + r : '';g.length == 1 ? g = '0' + g : '';b.length == 1 ? b = '0' + b : '';var hex = r + g + b;// 简化处理,如 FFEEDD 可以写为 FED if (r.slice(0, 1) == r.slice(1, 1) && g.slice(0, 1) == g.slice(1, 1) && b.slice(0, 1) == b.slice(1, 1)) {hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1);}return hex;}

HTML

<div class="box"><div class="left"><div class="url"><div>输入图片地址:https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2468497856,1121361906&fm=26&gp=0.jpg</div><input type="text" value="" class="getUrl"><button class="submit">确定地址</button></div><div><canvas id="canvas"></canvas></div><div class="test">获取到img出现最多的颜色，赋予背景色</div></div><div class="right"><div class="btn"><input type="file" accept="" name="" class="file" id=""><button class="">选择需要上传的图片</button><div class="bagColor">获取到img出现最多的颜色，赋予背景色</div></div><div class="win"><canvas class="canvas"></canvas></div></div></div>

style

  * {margin: 0;padding: 0;}.box {padding: 20px;display: flex;}.left {border: #eeeeee 1px solid;padding: 20px;}.url {line-height: 30px;}.getUrl {width: 400px;}.right {margin-left: 20px;width: 100%;border: #eeeeee 1px solid;padding: 20px;position: relative;}.btn {line-height: 48px;margin-bottom: 10px;}.file {position: absolute;top: 20px;left: 20px;opacity: 0;}

原生js实现吸取图片颜色相关推荐

原生js实现查看图片效果
网页查看图片原理:点击图片的时候创建一个div标签和一个img标签,将div标签通过appendChild方法加入body中,再将img标签加入div标签中.对html中的图片标签进行监听(并不是我们 ...
原生JS实现异步图片上传（预览）
效果实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
原生js代码实现图片放大境效果
hello 大家好! 这是我的第一篇博客文章,感谢大家前来阅读,希望我们都能在这个平台上相互交流.共同进步.查漏补缺. 今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实 ...
分享原生js代码实现图片放大境效果
<p>今天我给大家分享一下自己用js写的一个图片放大器效果,我在内涵图网<a target=_blank href="http://www.neipic.com" ...
html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介什么是图片懒加载懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...

原生js实现吸取图片颜色

吸取图片颜色

通过图片的url实现颜色吸取

通过上传图片的方式吸取颜色

获取ragba

获取16进制颜色

HTML

style

原生js实现吸取图片颜色相关推荐

最新文章

热门文章