吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换

canvas-straw.vue ：吸取颜色组件

<template><div class="color-content" :style="{'--size': boxSize + 'px', '--pix-size': '10px'}" v-if="value"><div class="close-icon" @click="close">close</div><div class="img-box"><img :src="src" ref="img" crossOrigin  @load="initCanvas()" alt="origin-img"></div><div class="pix-box" :style="pixPos"><div class="center" :style="{'borderColor': `rgb(${color})`}"></div><div class="htmls" v-html="innerVal"></div></div></div>
</template>
<script>
export default {name: 'canvas-straw',model: {event: 'on-change',prop: 'value'},props: {boxSize: {type: Number,default: 100},value: {type: Boolean,default: false},src: {type: String,default: ''}},data () {return {color: '153, 153, 153',innerVal: '',mouseInfo: {clientY: 0,clientX: 0,space: 20,size: 100}}},computed: {pixPos () {const width = window.innerWidthconst height = window.innerHeightlet {clientY, clientX, space, size} = this.mouseInfolet left = clientXlet top = clientYif ((clientY + size) > height) {top = clientY - size - space} else {top += space}if ((clientX + size) > width) {left = clientX - size - space} else {left += space}return `left: ${left}px; top:${top}px`}},methods: {close () {this.$emit('on-change', false)},initCanvas () {let oImg = this.$refs.imglet canvas = this.draw(oImg)oImg.addEventListener('click', (e) => {const [r, g, b] = this.color.split(',')console.log({r, g, b})this.$emit('on-change', {r, g, b})})oImg.addEventListener('mousemove', (e) => {this.mouseInfo.clientY = e.clientYthis.mouseInfo.clientX = e.clientXlet x = e.offsetXlet y = e.offsetYthis.color = this.getPix(x, y, canvas.ctx)})},// 画图draw (img) {let style = window.getComputedStyle(img)let width = parseInt(style.width)let height = parseInt(style.height)img.style.width = width + 'px'img.style.height = height + 'px'img.style.maxWidth = width + 'px'img.style.maxHeight = height + 'px'let canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heightlet ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, width, height) // 这里一定要写上获取到图片的宽高，否则生成的图片和原图片大小不一样，吸取到的颜色不准return {ctx,canvas}},// 获取16进制颜色gethex (r, g, b) {r = r.toString(16)g = g.toString(16)b = b.toString(16)// 补0if (r.length === 1) r = '0' + rif (g.length === 1) g = '0' + gif (b.length === 1) b = '0' + blet hex = r + g + b// 简化处理,如 FFEEDD 可以写为 FEDif (r.slice(0, 1) === r.slice(1, 1) && g.slice(0, 1) === g.slice(1, 1) && b.slice(0, 1) === b.slice(1, 1)) {hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1)}return hex},// 获取像素颜色getPix (x, y, context) {const size = 10const num = this.boxSize / 2 / size // boxSize （必须是偶数 盒子大小） / 一半 / 每个像素大小x = x - num // 减掉自身像素个数的开始坐标y = y - num// 读取图片像素信息const w = num * 2 + 1 // 图片大小是 像素个数的2倍 （并多一行一列像素 为了视觉上的中心点 所以必须是奇数）const h = num * 2 + 1const centerPos = Math.ceil(w / 2) // 获取中心点坐标 向上取整let imageData = context.getImageData(x, y, w, h) // 截取 当前坐标下 w，h大小画图的数据const pos = this.getPos(imageData.data, w) // 计算当前截取画布下的像素信息（读取像素长度控制在千万以内 否则易导致浏览器崩溃）// 生成矩阵数据let arr = []Array(w).fill().map((item, index) => {let tx = index + 1const inners = Array(h).fill().map((item2, index2) => {let ty = index2 + 1const color = pos.get(`${tx},${ty}`)// 创建 10 * 10 px大小为单位的像素块arr.push(`<div data-set="${tx},${ty}" style="left:${index * 10}px; top:${index2 * 10}px; background: rgb(${color})"></div>`)return '#' + color})return inners})// 更新数据this.innerVal = arr.join('')// 返回当前中心坐标的 颜色值return pos.get(`${centerPos},${centerPos}`)},// 计算像素信息并返回getPos (data, imgWidth) {let pos = new Map()let length = data.lengthfor (let i = 0; i < length; i++) {if (i % 4 === 0) { // 每四个元素为一个像素数据 r,g,b,alphalet x = i / 4 % imgWidth + 1 // 横坐标let y = Math.floor(i / 4 / imgWidth) + 1 // 纵坐标let alpha = Math.round(data[i + 3] / 255 * 100) / 100 // alpha 值if (data[i + 3] === 255) { // 没有alpha 值// let hex = this.gethex(data[i], data[i + 1], data[i + 2])let hex = `${data[i]}, ${data[i + 1]}, ${data[i + 2]}`pos.set(`${x},${y}`, hex)} else if (alpha > 0) { // 有alpha 值let rgba = `${data[i]}, ${data[i + 1]}, ${data[i + 2]}, ${alpha}`pos.set(`${x},${y}`, rgba)}}}return pos}}
}
</script>
<style lang='less' scoped>
.color-content {background-color: rgba(0 , 0, 0, 0.5);z-index: 9999;position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;text-align: center;padding: 20px;.img-box {display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;}img {cursor: crosshair;max-width: 100%;max-height: 100%;}
}
.close-icon {position: fixed;right: 10px;top: 10px;cursor: pointer;transition: ease-in-out 0.3s;color: #ebebeb;&:hover{color: #ff0000;}
}
</style>
<style lang="less">@pix-size: 10px;.pix-box {z-index: 999;position: absolute;// left: 20px;top: 30px;width: calc(var(--size) + @pix-size + 2px);height: calc(var(--size) + @pix-size + 2px);box-sizing: border-box;border: #fff solid 1px;border-radius: 50%;overflow: hidden;box-shadow: 0px 0px 5px #999;div.htmls {position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;& > div {width: @pix-size;height: @pix-size;position: absolute;border: none;}}div.center {position: absolute;width: @pix-size;height: @pix-size;left: calc(var(--size) / 2);top: calc(var(--size) / 2);box-sizing: border-box;border: #999 solid 1px;z-index: 10;filter: invert(100%);}background: url('./images/bg-pixel.jpg')}</style>

使用方法：

在某个页面中引入 import canvasStraw from './canvas-straw.vue' 并注册组件

../index.vue

<template><div><i-button @click="show = !show">打开</i-button><canvas-straw src="http:../images/test.jpg" v-model="show"></canvas-straw></div>
</template>
<script>
import canvasStraw from './canvas-straw.vue'
export default {components: {canvasStraw},data () {return {show: false}}
}
</script>

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换相关推荐

html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效
特效描述:html5绘图工具 canvas 模拟笔迹绘画特效.html5绘图工具使用鼠标在网页上进行写字,canvas绘画模拟笔迹特效代码结构 1. HTML代码 sorry! //定义获取id ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
canvas模拟中国铁路运行图
原理说明 1.在知道canvas画布尺寸的情况下,需要将地理经纬度信息转换为canvas画布x,y坐标,因为中国地图地理经纬度坐标取值范围为73.33-135.05(经度)37-50(维度),所以第一 ...
html刮奖特效,用CANVAS模拟一个简单的刮奖效果
用CANVAS模拟一个简单的刮奖效果.html> * { padding: 0; margin: 0; } .box { position: relative; height: 400px; w ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
canvas换图时候会闪烁_基于Canvas实现的高斯模糊（上）「JS篇」
作者:iNahoo 转发链接:https://mp.weixin.qq.com/s/5TxPjznpEBku_ybSMBdnfw 目录基于Canvas实现的高斯模糊(上)「JS篇」本篇基于Canv ...
16进制颜色值与百分比颜色值的换算关系
16进制颜色值与百分比颜色值的换算关系 00直接对应0%,0不能当作除数.所以除开 16进制颜色表示是01~FF,换成十进制就是1~255,百分比是1%~100% 由此可知(255/100%)=(X/ ...
Js 实现颜色值转换_Js 实现十六进制颜色值和RGB颜色值转换整理
一.Js 实现颜色值转换处理 js实现十六进制颜色值转RGB颜色值 js实现 RGB颜色值转十六进制颜色值 var colorChange = {rgbToHex: function (val) ...
基于Vue.js模拟酒店预订移动App
说明:vue项目用的mui框架和mintUI框架. 自己做的主要完成: 基于vue.js的移动端app,基于vue2全家桶完成选择住宿时间,房型列表和购物车等功能页面开发,后端用外部json文件和m ...

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换相关推荐

最新文章

热门文章

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值 转换

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值 转换相关推荐

最新文章

热门文章

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换

吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换相关推荐