vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker

1.需求：表格中主颜色和次颜色是需要从缩略图上吸取颜色，然后渲染色块，将色值传给后台

2.代码：

	1.先从后台获取缩略图数据
	listCarPicPic(flag) {
				var that = this;
				this.axiosXHR({
					type: "get",
					url: "xxx",//接口
					success: function(res) {
						res.data.data.map((item)=>{
							if(item.resourceUrl){
								if(item.resourceUrl.indexOf('http://')==-1){
									item.resourceUrl='http://'+item.resourceUrl;
								}
								item["newResourceUrl"]=item.resourceUrl;
								that.getBodymovinJson(item,'img-'+item.id);
							}else{
								item["newResourceUrl"]=null;
							}
						});
						that.picList = res.data.data;
					}
				})
			},
getBodymovinJson(data,id){
		      var that=this;
		      var image = new Image();  
		      image.crossOrigin = '';
				image.src = data.resourceUrl; 
				image.onload = function(){  
					that.picList.map((item)=>{
						if(item.id==data.id){
							Vue.set(item, 'newResourceUrl', that.getBase64Image(image))
						}
					})
					setTimeout(function(){
						 that.initCanvas(id,data.id);
					},1000)
				};
		    },
		    //这里将图片转化成base64，否者这里有跨域问题（因为我们的图片存在七牛，如果是自己服务器就没有跨域问题，可以省去这一步）
		    getBase64Image(img) {  
			     var canvas = document.createElement("canvas");  
			     canvas.width = img.width;  
			     canvas.height = img.height;  
			     var ctx = canvas.getContext("2d");  
			     ctx.drawImage(img, 0, 0, img.width, img.height);  
			     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
			     var dataURL = canvas.toDataURL("image/"+ext);  
			     return dataURL;  
			},
			initCanvas(id,dataId){
				var that=this;
				var img = document.getElementById(id);
				var canvas = this.draw(img);
				img.addEventListener('click', function(e) {
					var x = e.offsetX;
					var y = e.offsetY;
					var color = (canvas.getColor(x, y)).hex;
				    console.log(color);//这个值就是获取的坐标色值,在这里处理你后面的逻辑
				});
			},
			draw(img) {
				var style = window.getComputedStyle(img);
				var width = parseInt(style.width);
				var height = parseInt(style.height);
				var canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0,width,height);//这里一定要写上获取到图片的宽高，否则生成的图片和原图片大小不一样，吸取到的颜色不准
				// 获取坐标颜色
				function getPixelColor(x, y) {
					var imageData = ctx.getImageData(x, y, 1, 1);
					var pixel = imageData.data;
					var r = pixel[0];
					var g = pixel[1];
					var b = pixel[2];
					var a = pixel[3] / 255;
					a = Math.round(a * 100) / 100;
					var rHex = r.toString(16);
					r < 16 && (rHex = "0" + rHex);
					var gHex = g.toString(16);
					g < 16 && (gHex = "0" + gHex);
					var bHex = b.toString(16);
					b < 16 && (bHex = "0" + bHex);
					var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
					var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
					var hexColor = "#" + rHex + gHex + bHex;
					return {
						rgba: rgbaColor,
						rgb: rgbColor,
						hex: hexColor,
						r: r,
						g: g,
						b: b,
						a: a
					};
				}
				return {
					getColor: getPixelColor,
				};
			},

代码说明：这里有部分项目的业务代码，如果单纯的想要canvas获取坐标颜色的代码可以看下面代码

<template>
	<div>
		<h2>点击图片任意位置</h2>
		<div :style="{'background':bc}">
		<img id="img" :src="imgs" alt="">
		<!--<img id="img" src="./1.png" alt="">-->
		<h3 id="output"></h3>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'goodsBase',
		data: function() {
			return {
          imgs:null,
          bc:null
			}
		},
		mounted() {
			this.$nextTick(function() {
				var that = this;
				this.getBodymovinJson()
			})
		},
		methods: {
			getBase64Image(img) {  
	     var canvas = document.createElement("canvas");  
	     canvas.width = img.width;  
	     canvas.height = img.height;  
	     var ctx = canvas.getContext("2d");  
	     ctx.drawImage(img, 0, 0, img.width, img.height);  
	     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
	     var dataURL = canvas.toDataURL("image/"+ext);  
	     return dataURL;  
	},
		
    getBodymovinJson(){
    	  var that=this;
      	var image = new Image();  
      	image.crossOrigin = '';
			image.src = "http://bucket6.bba.vip/201125160748pAOyCI3rDY.png";  
			image.onload = function(){  
//					that.imgs=Base64.encode(image)
				that.imgs = that.getBase64Image(image);
				setTimeout(function(){
					 that.initCanvas();
				},1000)
				
			};
    },
			initCanvas(){
				var that=this;
				var img = document.getElementById('img');
				var output = document.getElementById('output');
				var canvas = this.draw(img);
				img.addEventListener('click', function(e) {
					var x = e.offsetX;
					var y = e.offsetY;
					that.setCursor(e.pageX, e.pageY);
					var color = (canvas.getColor(x, y)).rgba;
					document.body.style.background = color;
					console.log(color)
					that.bc=color;
					output.innerHTML = '坐标点颜色：' + color;
				});
			},
			draw(img) {
				var style = window.getComputedStyle(img);
				var width = parseInt(style.width, 10);
				var height = parseInt(style.height, 10);
				var canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0);
				
				document.body.appendChild(canvas);
				// 获取坐标颜色
				function getPixelColor(x, y) {
					var imageData = ctx.getImageData(x, y, 1, 1);
					var pixel = imageData.data;
						   console.log(pixel); 
					var r = pixel[0];
					var g = pixel[1];
					var b = pixel[2];
					var a = pixel[3] / 255;
					a = Math.round(a * 100) / 100;
					var rHex = r.toString(16);
					r < 16 && (rHex = "0" + rHex);
					var gHex = g.toString(16);
					g < 16 && (gHex = "0" + gHex);
					var bHex = b.toString(16);
					b < 16 && (bHex = "0" + bHex);
					var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
					var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
					var hexColor = "#" + rHex + gHex + bHex;
					return {
						rgba: rgbaColor,
						rgb: rgbColor,
						hex: hexColor,
						r: r,
						g: g,
						b: b,
						a: a
					};
				}
				return {
					getColor: getPixelColor,
				};
			},
			// 点击位置绘制一个十字坐标
			 setCursor(x, y) {
				// <div id="cursor" class="cursor"></div>
				var cursor = document.getElementById('cursor');
				if(!cursor) {
					cursor = document.createElement('div');
					cursor.id = 'cursor';
					document.body.appendChild(cursor);
				}
				cursor.style.left = x - 4 + 'px';
				cursor.style.top = y - 4 + 'px';
			}

		}
	}
</script>

如果有哪里看不懂的地方，欢迎留言😄