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/25160748pAOyCI3rDY.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>
如果有哪里看不懂的地方，欢迎留言😄
