利用canvas的getImageData()方法制作《在线取色器》

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 setFiles = function(e,areaId){
	e = e || window.event;
	if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
        alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具 ！");
        return;
    }
	if(e.files.length > 0)$(areaId).src = getObjectURL(e.files[0]);
}

if (e["offsetX"]) {
    size.x = e.offsetX;
    size.y = e.offsetY;
} else {
    let offset = img.getBoundingClientRect();
    size.x = touch.clientX - offset.left;
    size.y = touch.clientY - offset.top;
}

//创建canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let newImg = new Image();
//当图片加载完的时候
canvas.width = newImg.width;
canvas.height = newImg.height;
ctx.drawImage(newImg, 0, 0);

//获取准确的在图片的位置
let x = newImg.width * size.x / imgWidth;
let y = newImg.height * size.y / imhHeight;
//获取(x,y,1,1)的像素数据对象
let imgData = ctx.getImageData(x, y, 1, 1);
//通过imgData.data获取imgData对象中data的数据

//十六进制转换器
let hexadecimal = function(num) {
    var r = parseInt(num).toString(16);
    if (r.length == 1) {
        return '0' + r;
    }
    return r.toUpperCase();
}

let color16 = '#'+ hexadecimal(imgData.data[0]) + hexadecimal(imgData.data[1]) + hexadecimal(imgData.data[2])；
str1 = '<p><span style="background:'+ color16 +'"></span>'+ imgData.data.slice(0,3) +'</p>';
str = '<p><span style="background:'+ color16 +'"></span>'+ color16 +'</p>';
//在html中显示颜色和对应的颜色码
$(obj.area16).innerHTML = str;
$(obj.areaRgba).innerHTML = str1;