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>

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

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

Android Studio中如何设置颜色拾色器工具
Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...
优动漫PAINT基础系列之拾色器教学
在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
屏幕拾色器轻松获取网页颜色代码
这几天去了趟上海,又是好几天没更新了,今天回来了,来更新点实用的东西吧-一款网页颜色代码获取工具,其实不只针对网页,所有颜色代码它都可以获取.对于学习设计,网页制作.软件开发的童鞋,准确的获得颜色代码 ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
Mac上的取色器（拾色器）的比较 - 正版Mac版的取色器软件
当我们看到某个网页上的颜色很适合做我们的网站页面的颜色时,我们会很快地想到微信.钉钉截图里的放大镜自带的取色功能.但是,你知道以下这个事实吗? Mac版的微信.Mac版的钉钉的取色器取到的颜色并不准确 ...
Android 养成记-1 --1.3 标签拾色器
直接上图: 创建seekBarDialog ,并将拾色器集成到dialog 中: public class MySeekBarDialog extends AlertDialog implements ...
Android Studio设置颜色拾色器工具Color Picker
你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色: 你可能也知道Android Studio自带一个颜色拾色器,通过下面 ...

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

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

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

最新文章

热门文章