需求：表格中主颜色和次颜色是需要从缩略图上吸取颜色，然后渲染色块，将色值传给后台
代码：
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="" >
<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>推荐文章
