js upload pictures and get color codes

js upload image and get the color code is a local image upload color picker plug-in. Click the color pick button to get the color code contained in the image.
Part of js code
<script type="text/javascript"> (() => { let obj = {}; //获取DOM对象的方法 let $ = function(id){ return document.getElementById(id); } //获取预览图片路径 let getObjectURL = function(file){ let url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } //十六进制转换器 let hexadecimal = function(num) { var r = parseInt(num).toString(16); if (r.length == 1) { return '0' + r; } return r.toUpperCase(); } //判断颜色是否已存在 let checkHasColor = function(arr, r, g, b) { for (var i = 0; i < arr.length; i++) { var n = equalsColor(arr[0], arr[1], arr[2], r, g, b); if (n >= 0.8) { return true; } } return false; } //判断相同颜色 let equalsColor = function(r1, g1, b1, r2, g2, b2) { return (255 - Math.abs(r1 - r2) * 0.297 - Math.abs(g1 - g2) * 0.593 - Math.abs(b1 - b2) * 0.11) / 255; } //建立canvas画布 let canvas = function(obj,size,param){ let canvas = document.createElement("canvas"); if (!canvas.getContext) { alert("很遗憾,您浏览器版本太老了,无法使用我们的小工具 !"); return; } })() </script>
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article

24 Jun 2016
61 web page special effects that are very fashionable and have great visual effects

24 Jun 2016
Animation loading special effects implemented in pure css3

06 Jul 2016
jquery waterfall flow LightBox picture box special effects

24 Jun 2016
A batch of hover special effects implemented by CSS3

24 Jun 2016
Revealing the special effects in Tencent’s Burberry event page

06 Jul 2016
CSS3 mouse slides over animated line border special effects

24 Jun 2016
CSS3 input box shadow effects and other shadow effects


Hot Tools

jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!

Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!

Simple js love confession artifact
Simple native js love confession artifact

Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.

jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!
