canvas实现在线图片标注 vue下怎样利用canvas实现在线图片标注
嘀嗒嗒咚呲哒哒 人气:0想了解vue下怎样利用canvas实现在线图片标注的相关内容吗,嘀嗒嗒咚呲哒哒在本文为您仔细讲解canvas实现在线图片标注的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue canvas,canvas在线图片标注,vue canvas图片标注,下面大家一起来学习吧。
web端实现在线图片标注在此做下记录,功能类似微信截图时的标注,包含画线、框、箭头和文字输入,思路是利用canvas画布,先把要标注的图片使用drawImage方法画在画布上,然后定义画线、框、箭头和文字输入的方法调用
组件代码如下
<template> <div class="draw"> <div class="drawTop" ref="drawTop" v-if="lineStep == lineNum"> <div> <el-button type @click="resetAll">清空</el-button> <el-button type @click="repeal">撤销</el-button> <el-button type @click="canvasRedo">恢复</el-button> <el-button type @click="downLoad">下载</el-button> </div> <div style="width:22%"> 选择绘制类型: <el-radio-group v-model="type" size="medium"> <el-radio-button v-for="(item,index) in typeOption" :key="index" :label="item.value" @click.native="radioClick(item.value)" >{{item.label}} </el-radio-button> </el-radio-group> </div> <div style="width:15%"> 边框粗细: <el-slider v-model="lineWidth" :min="0" :max="10" :step="1" style="width:70%"></el-slider> </div> <div> 线条颜色: <el-color-picker v-model="strokeStyle"></el-color-picker> </div> <div> 文字颜色: <el-color-picker v-model="fontColor"></el-color-picker> </div> <div style="width:15%"> 文字大小: <el-slider v-model="fontSize" :min="14" :max="36" :step="2" style="width:70%"></el-slider> </div> </div> <div style="height: 100%;width: 100%;position:relative;"> <div class="content"></div> <input v-show="isShow" type="text" @blur="txtBlue" ref="txt" id="txt" style="z-index: 9999;position: absolute;border: 0;background:none;outline: none;"/> </div> </div> </template>
<script> export default { name: "callout", props: { imgPath: undefined, }, data() { return { isShow: false, canvas: "", ctx: "", ctxX: 0, ctxY: 0, lineWidth: 1, type: "L", typeOption: [ {label: "线", value: "L"}, {label: "矩形", value: "R"}, {label: "箭头", value: "A"}, {label: "文字", value: "T"}, ], canvasHistory: [], step: 0, loading: false, fillStyle: "#CB0707", strokeStyle: "#CB0707", lineNum: 2, linePeak: [], lineStep: 2, ellipseR: 0.5, dialogVisible: false, isUnfold: true, fontSize: 24, fontColor: "#CB0707", fontFamily: '微软雅黑', img: new Image(), }; }, mounted() { let _this = this; let image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.src = this.imgPath; image.onload = function () {//图片加载完,再draw 和 toDataURL if (image.complete) { _this.img = image let content = document.getElementsByClassName("content")[0]; _this.canvas = document.createElement("canvas"); _this.canvas.height = _this.img.height _this.canvas.width = _this.img.width _this.ctx = _this.canvas.getContext("2d"); _this.ctx.globalAlpha = 1; _this.ctx.drawImage(_this.img, 0, 0) _this.canvasHistory.push(_this.canvas.toDataURL()); _this.ctx.globalCompositeOperation = _this.type; content.appendChild(_this.canvas); _this.bindEventLisner(); } } }, methods: { radioClick(item) { if (item != "T") { this.txtBlue() this.resetTxt() } }, // 下载画布 downLoad() { let _this = this; let url = _this.canvas.toDataURL("image/png"); let fileName = "canvas.png"; if ("download" in document.createElement("a")) { // 非IE下载 const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = url; document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); } else { // IE10+下载 navigator.msSaveBlob(url, fileName); } }, // 清空画布及历史记录 resetAll() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.canvasHistory = []; this.ctx.drawImage(this.img, 0, 0); this.canvasHistory.push(this.canvas.toDataURL()); this.step = 0; this.resetTxt(); }, // 清空当前画布 reset() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(this.img, 0, 0); this.resetTxt(); }, // 撤销方法 repeal() { let _this = this; if (this.isShow) { _this.resetTxt(); _this._repeal(); } else { _this._repeal(); } }, _repeal() { if (this.step >= 1) { this.step = this.step - 1; let canvasPic = new Image(); canvasPic.src = this.canvasHistory[this.step]; canvasPic.addEventListener("load", () => { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(canvasPic, 0, 0); this.loading = true; }); } else { this.$message.warning("不能再继续撤销了"); } }, // 恢复方法 canvasRedo() { if (this.step < this.canvasHistory.length - 1) { if (this.step == 0) { this.step = 1; } else { this.step++; } let canvasPic = new Image(); canvasPic.src = this.canvasHistory[this.step]; canvasPic.addEventListener("load", () => { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(canvasPic, 0, 0); }); } else { this.$message.warning("已经是最新的记录了"); } }, // 绘制历史数组中的最后一个 rebroadcast() { let canvasPic = new Image(); canvasPic.src = this.canvasHistory[this.step]; canvasPic.addEventListener("load", () => { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(canvasPic, 0, 0); this.loading = true; }); }, // 绑定事件,判断分支 bindEventLisner() { let _this = this; let r1, r2; // 绘制圆形,矩形需要 this.canvas.onmousedown = function (e) { console.log("onmousedown"); if (_this.type == "L") { _this.createL(e, "begin"); } else if (_this.type == "R") { r1 = e.layerX; r2 = e.layerY; _this.createR(e, "begin", r1, r2); } else if (_this.type == "A") { _this.drawArrow(e, "begin") } else if (_this.type == "T") { _this.createT(e, "begin") } }; this.canvas.onmouseup = function (e) { console.log("onmouseup"); if (_this.type == "L") { _this.createL(e, "end"); } else if (_this.type == "R") { _this.createR(e, "end", r1, r2); r1 = null; r2 = null; } else if (_this.type == "A") { _this.drawArrow(e, "end") } else if (_this.type == "T") { _this.createT(e, "end") } }; }, // 绘制线条 createL(e, status) { let _this = this; if (status == "begin") { _this.ctx.beginPath(); _this.ctx.moveTo(e.layerX, e.layerY); _this.canvas.onmousemove = function (e) { console.log("onmousemove"); _this.ctx.lineTo(e.layerX, e.layerY); _this.ctx.strokeStyle = _this.strokeStyle; _this.ctx.lineWidth = _this.lineWidth; _this.ctx.stroke(); }; } else if (status == "end") { _this.ctx.closePath(); _this.step = _this.step + 1; if (_this.step < _this.canvasHistory.length - 1) { _this.canvasHistory.length = _this.step; // 截断数组 } _this.canvasHistory.push(_this.canvas.toDataURL()); _this.canvas.onmousemove = null; } }, // 绘制矩形 createR(e, status, r1, r2) { let _this = this; let r; if (status == "begin") { console.log("onmousemove"); _this.canvas.onmousemove = function (e) { _this.reset(); let rx = e.layerX - r1; let ry = e.layerY - r2; //保留之前绘画的图形 if (_this.step !== 0) { let canvasPic = new Image(); canvasPic.src = _this.canvasHistory[_this.step]; _this.ctx.drawImage(canvasPic, 0, 0); } _this.ctx.beginPath(); _this.ctx.strokeRect(r1, r2, rx, ry); _this.ctx.strokeStyle = _this.strokeStyle; _this.ctx.lineWidth = _this.lineWidth; _this.ctx.closePath(); _this.ctx.stroke(); }; } else if (status == "end") { _this.rebroadcast(); let interval = setInterval(() => { if (_this.loading) { clearInterval(interval); _this.loading = false; } else { return; } let rx = e.layerX - r1; let ry = e.layerY - r2; _this.ctx.beginPath(); _this.ctx.rect(r1, r2, rx, ry); _this.ctx.strokeStyle = _this.strokeStyle; _this.ctx.lineWidth = _this.lineWidth; _this.ctx.closePath(); _this.ctx.stroke(); _this.step = _this.step + 1; if (_this.step < _this.canvasHistory.length - 1) { _this.canvasHistory.length = _this.step; // 截断数组 } _this.canvasHistory.push(_this.canvas.toDataURL()); _this.canvas.onmousemove = null; }, 1); } }, //绘制箭头 drawArrow(e, status) { let _this = this; if (status == "begin") { //获取起始位置 _this.arrowFromX = e.layerX; _this.arrowFromY = e.layerY; _this.ctx.beginPath(); _this.ctx.moveTo(e.layerX, e.layerY); } else if (status == "end") { //计算箭头及画线 let toX = e.layerX; let toY = e.layerY; let theta = 30; let headlen = 10; let _this = this; let fromX = this.arrowFromX; let fromY = this.arrowFromY; // 计算各角度和对应的P2,P3坐标 let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI, angle1 = (angle + theta) * Math.PI / 180, angle2 = (angle - theta) * Math.PI / 180, topX = headlen * Math.cos(angle1), topY = headlen * Math.sin(angle1), botX = headlen * Math.cos(angle2), botY = headlen * Math.sin(angle2); let arrowX = fromX - topX, arrowY = fromY - topY; _this.ctx.moveTo(arrowX, arrowY); _this.ctx.moveTo(fromX, fromY); _this.ctx.lineTo(toX, toY); arrowX = toX + topX; arrowY = toY + topY; _this.ctx.moveTo(arrowX, arrowY); _this.ctx.lineTo(toX, toY); arrowX = toX + botX; arrowY = toY + botY; _this.ctx.lineTo(arrowX, arrowY); _this.ctx.strokeStyle = _this.strokeStyle; _this.ctx.lineWidth = _this.lineWidth; _this.ctx.stroke(); _this.ctx.closePath(); _this.step = _this.step + 1; if (_this.step < _this.canvasHistory.length - 1) { _this.canvasHistory.length = _this.step; // 截断数组 } _this.canvasHistory.push(_this.canvas.toDataURL()); _this.canvas.onmousemove = null; } }, //文字输入 createT(e, status) { let _this = this; if (status == "begin") { } else if (status == "end") { let offset = 0; if (_this.fontSize >= 28) { offset = (_this.fontSize / 2) - 3 } else { offset = (_this.fontSize / 2) - 2 } _this.ctxX = e.layerX + 2; _this.ctxY = e.layerY + offset; let index = this.getPointOnCanvas(e); _this.$refs.txt.style.left = index.x + 'px'; _this.$refs.txt.style.top = index.y - (_this.fontSize / 2) + 'px'; _this.$refs.txt.value = ''; _this.$refs.txt.style.height = _this.fontSize + "px"; _this.$refs.txt.style.width = _this.canvas.width - e.layerX - 1 + "px", _this.$refs.txt.style.fontSize = _this.fontSize + "px"; _this.$refs.txt.style.fontFamily = _this.fontFamily; _this.$refs.txt.style.color = _this.fontColor; _this.$refs.txt.style.maxlength = Math.floor((_this.canvas.width - e.layerX) / _this.fontSize); _this.isShow = true; setTimeout(() => { _this.$refs.txt.focus(); }) } }, //文字输入框失去光标时在画布上生成文字 txtBlue() { let _this = this; let txt = _this.$refs.txt.value; if (txt) { _this.ctx.font = _this.$refs.txt.style.fontSize + ' ' + _this.$refs.txt.style.fontFamily; _this.ctx.fillStyle = _this.$refs.txt.style.color; _this.ctx.fillText(txt, _this.ctxX, _this.ctxY); _this.step = _this.step + 1; if (_this.step < _this.canvasHistory.length - 1) { _this.canvasHistory.length = _this.step; // 截断数组 } _this.canvasHistory.push(_this.canvas.toDataURL()); _this.canvas.onmousemove = null; } }, //计算文字框定位位置 getPointOnCanvas(e) { let cs = this.canvas; let content = document.getElementsByClassName("content")[0]; return { x: e.layerX + (content.clientWidth - cs.width) / 2, y: e.layerY }; }, //清空文字 resetTxt() { let _this = this; _this.$refs.txt.value = ''; _this.isShow = false; } } }; </script>
<style scope> * { box-sizing: border-box; } body, html, #app { overflow: hidden; } .draw { height: 100%; min-width: 420px; display: flex; flex-direction: column; } .content { flex-grow: 1; height: 100%; width: 100%; } .drawTop { display: flex; justify-content: flex-start; align-items: center; padding: 5px; height: 52px; } .drawTop > div { display: flex; align-items: center; padding: 5px 5px; } div.drawTopContrllor { display: none; } @media screen and (max-width: 1200px) { .drawTop { position: absolute; background-color: white; width: 100%; flex-direction: column; align-items: flex-start; height: 30px; overflow: hidden; } .drawTopContrllor { display: flex !important; height: 30px; width: 100%; justify-content: center; align-items: center; padding: 0 !important; } } </style>
然后在页面中引入组件,传入图片链接。
在开发过程中遇到的问题
文字输入功能在用户输入文字后,如果不再点击别的地方直接点击别的功能按钮的话,最后输入的文字将不会再画布上生成,通过监控输入框的blur事件来在画布上生成文字,避免这个问题。
文字输入时字体的大小会影响生成文字的位置,这里发现文字的大小和位置有一个偏移量:
let offset = 0; if (_this.fontSize >= 28) { offset = (_this.fontSize / 2) - 3 } else { offset = (_this.fontSize / 2) - 2 }
在画布上生成文字的时候需要加上这个偏移量,这里字体范围是14~36,别的字体大小没有校验,不一定适用这个计算方式。
绘制矩形的时候需要先清空画布,在清空之前先保存一次画布然后再清空再重新画一下画布,负责矩形框会不停的出现轨迹,并且之前画的元素会消失。
撤销的时候需要考虑文字输入,判断input得v-show是否为true,如果是true需要先清空文字,再撤销,否则画布上会一直存在一个输入框。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容