javascript支持自定义色块的颜色选择器插件

使用方法

 var ColorPicker;

 (function() {

   function insertBefore(element, before) {
     parent = before.parentNode;
     parent.insertBefore(element, before);
   }

   function extend(defaults, options) {
     var extended = {};
     var prop;
     for (prop in defaults) {
       if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
         extended[prop] = defaults[prop];
       }
     }
     for (prop in options) {
       if (Object.prototype.hasOwnProperty.call(options, prop)) {
         extended[prop] = options[prop];
       }
     }
     return extended;
   };

   function hasClass(element, classname) {
     var className = " " + classname + " ";
     if ((" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" " + classname + " ") > -1) {
       return true;
     }
     return false;
   }

   function removeClass(node, className) {
     node.className = node.className.replace(
       new RegExp('(^|\\s+)' + className + '(\\s+|$)', 'g'),
       '$1'
     ).replace(/ +(?= )/g, '').trim();
   }

   function addClass(element, className) {
     if (!hasClass(element, className)) {
       element.className += ' ' + className;
       element.className = element.className.replace(/ +(?= )/g, '').trim()
     }
   }

   ColorPicker = function(element, options) {

     this.options = extend({
       color: '#e7e7e7',
       palettes: ['#646fff', '#fffa1d', '#ffa21f', '#ff391d'],
       onUpdate: function() {}
     }, options);

     this.options.palettes.unshift(this.options.color);

     this.hex = this.options.color;
     this.rgb = this.HEXtoRGB(this.hex);
     this.hsv = this.RGBtoHSV(this.rgb[0], this.rgb[1], this.rgb[2]);
     this.dom = {};
     this.dom.container = document.createElement('div');
     this.dom.container.className = 'color-picker-container';

     element.appendChild(this.dom.container);

     this.initPicker();

     this.initPalettes();
   }

   ColorPicker.prototype.initPicker = function() {

     this.dom.picker = {};
     this.dom.picker.container = document.createElement('div');
     this.dom.picker.container.className = 'picker-container';

     this.dom.container.appendChild(this.dom.picker.container);

     this.dom.picker.canvas = {};

     this.dom.picker.canvas.container = document.createElement('div');
     this.dom.picker.canvas.container.className = 'canvas-container';
     this.dom.picker.container.appendChild(this.dom.picker.canvas.container);

     this.dom.picker.canvas.canvas = document.createElement('canvas');
     this.dom.picker.canvas.canvas.className = 'canvas';

     this.dom.picker.canvas.pointer = document.createElement('div');
     this.dom.picker.canvas.pointer.className = 'pointer';

     var ctx = this.dom.picker.canvas.canvas.getContext('2d'),
       image = new Image,
       $this = this,
       dragging = false;

     this.dom.picker.canvas.canvas.setAttribute('width', 200);
     this.dom.picker.canvas.canvas.setAttribute('height', 200);
     this.dom.picker.canvas.container.appendChild(this.dom.picker.canvas.canvas);
     this.dom.picker.canvas.container.appendChild(this.dom.picker.canvas.pointer);

     // image.src = 'images/wheel copy.png';
     image.src = 'data:image/png;base64,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