放大镜拾色器vue+typescript+canvas

放大镜拾色器

效果图片**加粗样式**
代码

最近有项目需要用到放大镜拾色器，在网上找了很久都没有找到相关的实现案例。
于是就自己动手开发了一个。
下面给大家分享一下实现的方法和具体的源码，颜色是可以看看具体色号的。

效果图片加粗样式

代码

<template><div class="color-pick-up-home" ref="colorPickerView"><img class="logo" src="../assets/logo.png" /><div class="color-picker"><div class="color-picker-icon" @click="pickColor()"></div><div class="color-picker-text">拾色器</div><div class="pick-color" :style="pickUpColor"></div></div><div :style="magnifyBox" v-show="isShow" class="magnify-box"><div class="line-vertical"></div><canvas id="painter" width="180" height="180" margin="2px"></canvas></div></div>
</template>

import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import html2canvas from "html2canvas";@Component
export default class ColorPickUp extends Vue {@Prop({type: Object,default: null})private elDiv!: any;@Prop({type: Object,default: () => ({r: 255,g: 255,b: 255,a: 255})})private rgbaInfo!: { r: number; g: number; b: number; a: number };private moveX = 0;private moveY = 0;private imgSource!: any;private isShow = false;private dTop!: number;private dLeft!: number;private dWidth!: number;private dHeight!: number;private htmlUrl: any = null;private imagelUrl!: any;private elTop!: number;private elLeft!: number;private elWidth!: number;private elHeight!: number;private wRatio!: number;private hRatio!: number;private pickColorFlag = false;private griddingImage!: any;private griImg!: any;@Emit("colorSend") send(colorInfo: any) {console.log("colorInfo");}get magnifyBox() {return {position: "fixed",zIndex: 1,width: "180px",height: "180px",left: `${this.moveX}px`,top: `${this.moveY}px`,background: "#ffffff",border: "2px solid #ffffff",overflow: "hidden","border-radius": "50%"};} //放大镜get pickUpColor() {let info = this.rgbaInfo;let a = 255;return {background: `rgba(${info.r}, ${info.g}, ${info.b}, ${info.a / a}) `};} //获取当前颜色mounted() {this.drawGridding();this.drawImage();}//获取颜色的实现方法pickColor() {this.isShow = true;let elIcon: any;if (this.elDiv === null) {elIcon = document.body;} else {elIcon = this.elDiv;}this.elTop = elIcon.getBoundingClientRect().top;this.elLeft = elIcon.getBoundingClientRect().left;this.elWidth = elIcon.getBoundingClientRect().width;this.elHeight = elIcon.getBoundingClientRect().height * 3; //图片与实际大小出现了偏差，这里需要放大3倍html2canvas(elIcon, {backgroundColor: null,useCORS: true// tslint:disable-next-line:ter-arrow-parens}).then(canvas => {this.imagelUrl = canvas.toDataURL("image/png");});this.imgSource = new Image(this.elWidth, this.elHeight);this.imgSource.src = this.imagelUrl;this.griImg = new Image(this.elWidth, this.elHeight);this.griImg.src = this.griddingImage;this.imgSource.onload = () => {this.wRatio = this.imgSource.naturalWidth / this.elWidth;this.hRatio = this.imgSource.naturalHeight / this.elHeight;let moveCb = (e: MouseEvent) => {this.isShow = true;let canvas = document.getElementById("painter") as HTMLCanvasElement;let ctx = canvas.getContext("2d");let off = 90;this.moveX = e.clientX - off;this.moveY = e.clientY - off;if (ctx) {ctx.clearRect(0, 0, this.elWidth, this.elHeight);ctx.closePath();ctx.drawImage(this.imgSource as any,(e.clientX - off - this.elLeft + 2 + (off * 7) / 8) * this.wRatio,(e.clientY - off - this.elTop + 2 + (off * 7) / 8) * this.hRatio,off * 2 * this.wRatio,off * 2 * this.hRatio,0,0,off * 16,off * 16);ctx.beginPath();for (let i = 0; i < 16; i += 1) {ctx.moveTo(0, 15.5 + i * 10);ctx.lineTo(180, 15.5 + i * 10);}for (let j = 0; j < 16; j += 1) {ctx.moveTo(15.5 + j * 10, 0);ctx.lineTo(15.5 + j * 10, 180);}ctx.stroke();ctx.lineWidth = 1;ctx.strokeStyle = "#000000";ctx.closePath();ctx.beginPath();ctx.moveTo(85.5, 85.5);ctx.lineTo(95.5, 85.5);ctx.lineTo(95.5, 95.5);ctx.lineTo(85.5, 95.5);ctx.lineTo(85.5, 85.5);ctx.stroke();ctx.strokeStyle = "#999999";ctx.lineWidth = 1;ctx.closePath();}};let upCb = (e: MouseEvent) => {let canvas = document.getElementById("painter") as HTMLCanvasElement;let ctx = canvas.getContext("2d");let a = 180;if (ctx) {let info = ctx.getImageData(a / 2, a / 2, 1, 1).data;this.rgbaInfo.r = info[0];this.rgbaInfo.g = info[1];this.rgbaInfo.b = info[2];this.rgbaInfo.a = info[3];}this.isShow = false;document.removeEventListener("mousemove", moveCb);document.removeEventListener("mouseup", upCb);this.send(this.rgbaInfo);let info = this.rgbaInfo;};document.addEventListener("mousemove", moveCb);document.addEventListener("mouseup", upCb);};}//绘制放大镜drawGridding() {let canvas = document.querySelector("#painter") as HTMLCanvasElement;let ctx = canvas.getContext("2d");if (ctx) {for (let i = 0; i < 8; i += 1) {// tslint:disable-next-line:no-magic-numbersctx.moveTo(0, 20.5 + i * 20);// tslint:disable-next-line:no-magic-numbersctx.lineTo(180, 20.5 + i * 20);ctx.stroke();}for (let j = 0; j < 8; j += 1) {// tslint:disable-next-line:no-magic-numbersctx.moveTo(20.5 + j * 20, 0);// tslint:disable-next-line:no-magic-numbersctx.lineTo(20.5 + j * 20, 180);ctx.stroke();}ctx.lineWidth = 1;ctx.strokeStyle = "#999999";}this.griddingImage = canvas.toDataURL("image/png"); //canvas绘制字体转base64}//绘制图片drawImage() {let elIcon: any;if (this.elDiv === null) {elIcon = document.body;} else {elIcon = this.elDiv;}this.elTop = elIcon.getBoundingClientRect().top;this.elLeft = elIcon.getBoundingClientRect().left;this.elWidth = elIcon.getBoundingClientRect().width;this.elHeight = elIcon.getBoundingClientRect().height;html2canvas(elIcon, {backgroundColor: null,useCORS: true// tslint:disable-next-line:ter-arrow-parens}).then(canvas => {this.imagelUrl = canvas.toDataURL("image/png");});this.imgSource = new Image(this.elWidth, this.elHeight);this.imgSource.src = this.imagelUrl;this.imgSource.onload = () => {this.wRatio = this.imgSource.naturalWidth / this.elWidth;this.hRatio = this.imgSource.naturalHeight / this.elHeight;};}
}

项目源码: link.

放大镜拾色器vue+typescript+canvas相关推荐

vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
Mac上的取色器（拾色器）的比较 - 正版Mac版的取色器软件
当我们看到某个网页上的颜色很适合做我们的网站页面的颜色时,我们会很快地想到微信.钉钉截图里的放大镜自带的取色功能.但是,你知道以下这个事实吗? Mac版的微信.Mac版的钉钉的取色器取到的颜色并不准确 ...
UE4拾色器的实现，使用UE4自带的SColorPicker
我就奇怪了,csdn搞个资源这么难?链接: https://pan.baidu.com/s/1sn70iyT6mp89xmsgUVmDxg 提取码: 2yk2 这总有了吧(2020年7月3日22:14 ...
一款免安装、多平台兼容的拾色器(Color Picker)
文章目录视频教程场景需求场景需求 Chrome Google DevTools 中的拾色器用法其他浏览器视频教程浏览器自带的拾色器ColorPicker使用场景需求场景我是一个 ...
PS学习笔记——拾色器和色彩空间
作为绘图.修改.色彩调整的基础,拾色器是一个非常重要的工具.如果颜色不存在于画面上或图像内,而是需要人为设定,就需要使用拾色器. 位于工具面板下方,可以看到前景色/背景色选项.或者可以打开色板面板和颜 ...
拾色器插件 Farbtastic
基本用法 1.引入 farbtastic.js 和 farbtastic.css(注:基于jquery的,先把jquery引进去,css包含三张图别忘了设置正确路径,不然只能看到一个方块) <s ...
原生js实现的拾色器插件 - ColorPicker
对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇.这里奉上原生js版本的拾色器,由于是本人纯手工撸出来的,所以转载还请标明来源. 效果图: 讲下实现方式: 1.颜色除 ...
Python3制作鼠标拾色器并显示十六进制数值（有单独窗口显示取色）
Python3制作鼠标拾色器并显示十六进制数值(有单独窗口显示取色) 代码如下,结合OpenCV的鼠标事件,窗体大小的调整,我们可以轻松地制作拾色器并进行显示: import cv2import nu ...

放大镜拾色器vue+typescript+canvas

放大镜拾色器

效果图片加粗样式

代码

放大镜拾色器vue+typescript+canvas相关推荐

最新文章

热门文章