├── LICENSE
├── README.md
├── demo.html
├── image-color-picker.js
└── image-color-picker.min.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Dmitriy Lukin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JS Image Color Picker
2 | Pick color from image via javascript
3 |
4 | This is a javascript object made via this method:
5 | https://codepen.io/nakome/pen/nBKiF
6 |
7 | Check demo.html for details
8 |
--------------------------------------------------------------------------------
/image-color-picker.js:
--------------------------------------------------------------------------------
1 | var ImageColorPicker = function(img_selector, opt){
2 |
3 | // vars
4 | var x = '', y = '';
5 | var inst = this;
6 | var d = document;
7 |
8 | // constructor
9 | opt = (typeof opt === 'object') ? opt : {};
10 |
11 | inst.img = _(img_selector);
12 |
13 | if(!inst.img){
14 | return;
15 | }
16 |
17 | inst.img.style.cursor = 'crosshair';
18 |
19 | // create canvas
20 | if(opt.canvas){
21 | inst.canvas = opt.canvas;
22 | }
23 | else {
24 | inst.canvas = d.createElement('canvas');
25 | inst.img.parentNode.insertBefore(inst.canvas, inst.img.nextSibling);
26 | }
27 | inst.canvas.style.display = 'none';
28 |
29 | // optional public containers
30 | inst.preview = opt.preview ? _(opt.preview) : d.createElement('div');
31 |
32 | // default
33 | inst.result_hex = '';
34 | inst.result_rgb = [];
35 | inst.result_rgb_string = '';
36 |
37 | // callbacks
38 | var clicked = opt.clicked || function(){};
39 |
40 | // click function
41 | inst.img.addEventListener('click', function(e){
42 | // chrome
43 | if(e.offsetX) {
44 | x = e.offsetX;
45 | y = e.offsetY;
46 | }
47 | // firefox
48 | else if(e.layerX) {
49 | x = e.layerX;
50 | y = e.layerY;
51 | }
52 | useCanvas(inst.canvas, inst.img, function(){
53 | // get image data
54 | inst.result_rgb = inst.canvas.getContext('2d')
55 | .getImageData(x, y, 1, 1).data;
56 |
57 | var p = inst.result_rgb;
58 |
59 | // show info
60 | inst.result_hex = rgbToHex(p[0],p[1],p[2]);
61 | inst.result_rgb_string = 'rgb('+p[0]+','+ p[1]+','+ p[2]+')';
62 |
63 | // callback
64 | clicked(inst);
65 | });
66 | }, false);
67 |
68 | // preview function mousemove
69 | inst.img.addEventListener('mousemove', function(e){
70 | // chrome
71 | if(e.offsetX) {
72 | x = e.offsetX;
73 | y = e.offsetY;
74 | }
75 | // firefox
76 | else if(e.layerX) {
77 | x = e.layerX;
78 | y = e.layerY;
79 | }
80 |
81 | useCanvas(inst.canvas, inst.img, function(){
82 | // get image data
83 | var p = inst.canvas.getContext('2d')
84 | .getImageData(x, y, 1, 1).data;
85 |
86 | // show preview color
87 | inst.preview.style.background = rgbToHex(p[0],p[1],p[2]);
88 | });
89 | }, false);
90 |
91 | // default first pixel canvas
92 | useCanvas(inst.canvas, inst.img, function(){
93 | // console.log('first init');
94 | });
95 |
96 | // check img resize
97 | function checkCanvasSize(el, image){
98 | return el.width == image.width && el.height == image.height;
99 | }
100 |
101 | // canvas function
102 | function useCanvas(el, image, callback){
103 | if(!checkCanvasSize(el, image)){
104 | el.width = image.width; // img width
105 | el.height = image.height; // img height
106 |
107 | // draw image in canvas tag
108 | el.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
109 | }
110 |
111 | return callback();
112 | }
113 |
114 | // short querySelector
115 | function _(el){
116 | return d.querySelector(el);
117 | };
118 |
119 | // convert rgba to hex
120 | // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
121 | function componentToHex(c) {
122 | var hex = c.toString(16);
123 | return hex.length == 1 ? "0" + hex : hex;
124 | }
125 |
126 | function rgbToHex(r, g, b) {
127 | return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
128 | }
129 |
130 | function findPos(obj) {
131 | var curleft = 0, curtop = 0;
132 | if (obj.offsetParent) {
133 | do {
134 | curleft += obj.offsetLeft;
135 | curtop += obj.offsetTop;
136 | } while (obj = obj.offsetParent);
137 |
138 | return { x: curleft, y: curtop };
139 | }
140 | }
141 | };
--------------------------------------------------------------------------------
/image-color-picker.min.js:
--------------------------------------------------------------------------------
1 | var ImageColorPicker=function(e,t){var n="",a="",r=this,i=document;if(t="object"==typeof t?t:{},r.img=g(e),r.img){r.img.style.cursor="crosshair",t.canvas?r.canvas=t.canvas:(r.canvas=i.createElement("canvas"),r.img.parentNode.insertBefore(r.canvas,r.img.nextSibling)),r.canvas.style.display="none",r.preview=t.preview?g(t.preview):i.createElement("div"),r.result_hex="",r.result_rgb=[],r.result_rgb_string="";var s=t.clicked||function(){};r.img.addEventListener("click",function(e){e.offsetX?(n=e.offsetX,a=e.offsetY):e.layerX&&(n=e.layerX,a=e.layerY),c(r.canvas,r.img,function(){r.result_rgb=r.canvas.getContext("2d").getImageData(n,a,1,1).data;var e=r.result_rgb;r.result_hex=u(e[0],e[1],e[2]),r.result_rgb_string="rgb("+e[0]+","+e[1]+","+e[2]+")",s(r)})},!1),r.img.addEventListener("mousemove",function(e){e.offsetX?(n=e.offsetX,a=e.offsetY):e.layerX&&(n=e.layerX,a=e.layerY),c(r.canvas,r.img,function(){var e=r.canvas.getContext("2d").getImageData(n,a,1,1).data;r.preview.style.background=u(e[0],e[1],e[2])})},!1),c(r.canvas,r.img,function(){})}function c(e,t,n){var a,r;return r=t,((a=e).width!=r.width||a.height!=r.height)&&(e.width=t.width,e.height=t.height,e.getContext("2d").drawImage(t,0,0,t.width,t.height)),n()}function g(e){return i.querySelector(e)}function o(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function u(e,t,n){return"#"+o(e)+o(t)+o(n)}};
--------------------------------------------------------------------------------