Ionic3/angular4 颜色选择器

通过h5 canvas实现颜色选择器
封装颜色选择器组件 color-picker

A、color-picker.component.html

<div [ngStyle]="{'position': 'relative', 'height': height+'px', 'overflow': 'hidden'}">
    <canvas width="{{width}}" height="{{height}}" id="canvas_picker" [ngStyle]="{'border-radius': borderRadius + 'px'}" (click)="getOffersetInfo($event)"></canvas>
    <p [ngStyle]="{'position': 'absolute', 'left': markX + 'px', 'top': markY + 'px', 'width': '20px', 'height': '20px', 'border-radius': '50%', 'background': '#fff', 'border': '2px solid #555' }"></p>
</div>

B、color-picker.component.ts

import { OnInit, Component, Output, Input, EventEmitter } from '@angular/core';
@Component({
    selector: 'color-picker',
    templateUrl: './color-picker.component.html'
})
export class ColorPicker implements OnInit {
    // 接收父组件参数，设置颜色选择器高度
    @Input() height: number;
    // 接收父组件参数，设置颜色选择器宽度
    @Input() width: number;
    // 接收父组件参数，设置颜色选择器圆角
    @Input() borderRadius: number;
    // 触发父组件的方法，传递参数给父组件
    @Output() colorPickerClick = new EventEmitter();

    // 画布
    canvas: any;
    // 显示颜色取值
    rgbString: string = '#fff';
    // 选中颜色点的位置
    markX: number = 0;
    markY: number = 0;
    constructor() {}
    ngOnInit() {
        // 1. 取得界面节点，创建画布
        var c: any = document.getElementById('canvas_picker');
        this.canvas = c.getContext('2d');
        this.canvas.canvas.width = this.width;
        // 2. Canvas 元素设置一张背景图片
        var img = new Image();
        img.src = './assets/[e-mail]';
        // 延迟几秒等图片加载完成了再创建画布
        setTimeout(() => {
            this.canvas.drawImage(img, 0, 0, this.width, this.height);
        }, 500);
    }
    getOffersetInfo(event) {
        console.log(event, '点击画布事件');
        // 点击的时候取在画布上的坐标
        var x = event.offsetX;
        var y = event.offsetY;
        console.log(x, y);
        // 边界判断函数
        this.checkBorderFun(x, y, this.width, this.height);
        this.markX = x-10;
        this.markY = y-10;
        // 通过坐标取的rgb的值
        // getImageDate(x, y, width, height)
        // 可以去到画布上的点的 RGBA的值 
        // x: x坐标  y: y坐标  width: 取的宽度  height: 取的高度
        // mark的宽高是30，borer:2   那么 34/2=12
        var imgData = this.canvas.getImageData(x, y, 1, 1).data;
        console.log(imgData, '图片数据');
        var R = imgData[0];
        var G = imgData[1];
        var B = imgData[2];

        console.log('R=' + R + '' + 'G=' + G + '' + 'B=' + B, 'rgb');
        // 转换为16进制字符串
        this.rgbString = this.gbToHex(R, G, B);
        console.log(this.rgbString);

        this.colorPickerClick.emit({color: this.rgbString});
    }
    gbToHex(R, G, B) {
        return this.toHex(R) + this.toHex(G) + this.toHex(B);
    }
    // 色值16制转换函数
    toHex(n) {
        n = parseInt(n, 10);
        if (isNaN(n)) return '00';
        n = Math.max(0, Math.min(n, 255));
        return '0123456789ABCDEF'.charAt((n - n % 16) / 16) + '0123456789ABCDEF'.charAt(n % 16);
    }
    // 边界判断函数
    checkBorderFun(x, y, width, height) {
        if(x < 10) {
            x = 10;
        } else if(y < 10) {
            y = 10;
        } else if(x > width - 10) {
            x = width - 10
        } else if( y > height - 10) {
            y = height - 10
        }
    }
}

C、在父组件中使用 html文件

<!--
    颜色选择器组件
    --------------------
    height: 颜色选择器的高度
    width: 颜色选择器的宽度
    borderRadius: 颜色原则器框的圆角
    colorPickerClick: 颜色选择器单机传递选中的颜色值
-->
<div style="margin: 10px">
    <color-picker [height]="colorPickerHeight" [width]="colorPickerWidth" [borderRadius]="colorPickerBorderRadius" (colorPickerClick)="colorPickerFun($event)"></color-picker>
    <p [ngStyle]="{'width': '10px', 'height': '10px', 'border-radius': '50%', 'background': colorPickerValue}"></p>
    <p>color: {{colorPickerValue}}</p>
</div>

D、父组件中使用 .ts文件中

...

/*
        传递给颜色选择器组件初始化值
        ----------------------------------------
        colorPickerValue: 获取颜色的16进制值
        colorPickerHeight: 设置颜色选择框的高度
        colorPickerWidth: 设置颜色选择框的宽度
        colorPickerBorderRadius: 设置颜色选择器的圆角
    */
    colorPickerValue: string = '';
    colorPickerHeight: number;
    colorPickerWidth: number;
    colorPickerBorderRadius: number;

    constructor() {
        this.colorPickerHeight = 200;
        this.colorPickerWidth = window.innerWidth - 20;
        this.colorPickerBorderRadius = 5;
    }
    // 颜色选择器中事件，传递出来的值。
    colorPickerFun(event) {
        console.log(event, "单机组件返回的信息");
        this.colorPickerValue = "#" + event.color;
    }
...

参考文章：https://www.webdesignerdepot....

参考demoe: http://netdna.webdesignerdepo...