方案背景

需求

  1. 需要对图片进行标注,导出图片。
  2. 需要标注N多图片最后同时保存。
  3. 需要根据多边形区域数据(区域、颜色、名称)标注。

对应方案

  1. 用canvas实现涂鸦、圆形、矩形的绘制,最终生成图片base64编码用于上传
  2. 大量图片批量上传很耗时间,为了提高用户体验,改为只实现圆形、矩形绘制,最终保存成坐标,下次显示时根据坐标再绘制。
  3. 多边形区域的显示是根据坐标点绘制,名称显示的位置为多边形质心。

代码

<template>
<div>
<canvas
:id="radom"
:class="{canDraw: 'canvas'}"
:width="width"
:height="height"
:style="{'width':`${width}px`,'height':`${height}px`}"
@mousedown="canvasDown($event)"
@mouseup="canvasUp($event)"
@mousemove="canvasMove($event)"
@touchstart="canvasDown($event)"
@touchend="canvasUp($event)"
@touchmove="canvasMove($event)">
</canvas>
</div>
</template>
<script>
// import proxy from './proxy.js'
const uuid = require('node-uuid')
export default {
props: {
canDraw: { // 图片路径
type: Boolean,
default: true
},
url: { // 图片路径
type: String
},
info: { // 位置点信息
type: Array
},
width: { // 绘图区域宽度
type: String
},
height: { // 绘图区域高度
type: String
},
lineColor: { // 画笔颜色
type: String,
default: 'red'
},
lineWidth: { // 画笔宽度
type: Number,
default: 2
},
lineType: { // 画笔类型
type: String,
default: 'circle'
}
},
watch: {
info (val) {
if (val) {
this.initDraw()
}
}
},
data () {
return {
// 同一页面多次渲染时,用于区分元素的id
radom: uuid.v4(),
// canvas对象
context: {},
// 是否处于绘制状态
canvasMoveUse: false,
// 绘制矩形和椭圆时用来保存起始点信息
beginRec: {
x: '',
y: '',
imageData: ''
},
// 储存坐标信息
drawInfo: [],
// 背景图片缓存
img: new Image()
}
},
mounted () {
this.initDraw()
},
methods: {
// 初始化绘制信息
initDraw () {
// 初始化画布
const canvas = document.getElementById(this.radom)
this.context = canvas.getContext('2d')
// 初始化背景图片
this.img.setAttribute('crossOrigin', 'Anonymous')
this.img.src = this.url
this.img.onerror = () => {
var timeStamp = +new Date()
this.img.src = this.url + '?' + timeStamp
}
this.img.onload = () => {
this.clean()
}
// proxy.getBase64({imgUrl: this.url}).then((res) => {
// if (res.code * 1 === 0) {
// this.img.src = 'data:image/jpeg;base64,'+res.data
// this.img.onload = () => {
// this.clean()
// }
// }
// })
// 初始化画笔
this.context.lineWidth = this.lineWidth
this.context.strokeStyle = this.lineColor
},
// 鼠标按下
canvasDown (e) {
if (this.canDraw) {
this.canvasMoveUse = true
// client是基于整个页面的坐标,offset是cavas距离pictureDetail顶部以及左边的距离
const canvasX = e.clientX - e.target.parentNode.offsetLeft
const canvasY = e.clientY - e.target.parentNode.offsetTop
// 记录起始点和起始状态
this.beginRec.x = canvasX
this.beginRec.y = canvasY
this.beginRec.imageData = this.context.getImageData(0, 0, this.width, this.height)
// 存储本次绘制坐标信息
this.drawInfo.push({
x: canvasX / this.width,
y: canvasY / this.height,
type: this.lineType
})
}
},
Area (p0,p1,p2) {
let area = 0.0 ;
area = p0.x * p1.y + p1.x * p2.y + p2.x * p0.y - p1.x * p0.y - p2.x * p1.y - p0.x * p2.y;
return area / 2 ;
},
// 计算多边形质心
getPolygonAreaCenter (points) {
let sum_x = 0;
let sum_y = 0;
let sum_area = 0;
let p1 = points[1];
for (var i = 2; i < points.length; i++) {
let p2 = points[i];
let area = this.Area(points[0],p1,p2) ;
sum_area += area ;
sum_x += (points[0].x + p1.x + p2.x) * area;
sum_y += (points[0].y + p1.y + p2.y) * area;
p1 = p2 ;
}
return {
x: sum_x / sum_area / 3,
y: sum_y / sum_area / 3
}
},
// 根据坐标信息绘制图形
drawWithInfo () {
this.info.forEach(item => {
this.context.beginPath()
if (!item.type) {
// 设置颜色
this.context.strokeStyle = item.regionColor
this.context.fillStyle = item.regionColor
// 绘制多边形的边
if (typeof item.region === 'string') {
item.region = JSON.parse(item.region)
}
item.region.forEach(point => {
this.context.lineTo(point.x * this.width, point.y * this.height)
})
this.context.closePath()
// 在多边形质心标注文字
let point = this.getPolygonAreaCenter(item.region)
this.context.fillText(item.areaName, point.x * this.width, point.y * this.height)
} else if (item.type === 'rec') {
this.context.rect(item.x * this.width, item.y * this.height, item.w * this.width, item.h * this.height)
} else if (item.type === 'circle') {
this.drawEllipse(this.context, (item.x + item.a) * this.width, (item.y + item.b) * this.height, item.a > 0 ? item.a * this.width : -item.a * this.width, item.b > 0 ? item.b * this.height : -item.b * this.height)
}
this.context.stroke()
})
},
// 鼠标移动时绘制
canvasMove (e) {
if (this.canvasMoveUse && this.canDraw) {
// client是基于整个页面的坐标,offset是cavas距离pictureDetail顶部以及左边的距离
let canvasX = e.clientX - e.target.parentNode.offsetLeft
let canvasY = e.clientY - e.target.parentNode.offsetTop
if (this.lineType === 'rec') { // 绘制矩形时恢复起始点状态再重新绘制
this.context.putImageData(this.beginRec.imageData, 0, 0)
this.context.beginPath()
this.context.rect(this.beginRec.x, this.beginRec.y, canvasX - this.beginRec.x, canvasY - this.beginRec.y)
let info = this.drawInfo[this.drawInfo.length - 1]
info.w = canvasX / this.width - info.x
info.h = canvasY / this.height - info.y
} else if (this.lineType === 'circle') { // 绘制椭圆时恢复起始点状态再重新绘制
this.context.putImageData(this.beginRec.imageData, 0, 0)
this.context.beginPath()
let a = (canvasX - this.beginRec.x) / 2
let b = (canvasY - this.beginRec.y) / 2
this.drawEllipse(this.context, this.beginRec.x + a, this.beginRec.y + b, a > 0 ? a : -a, b > 0 ? b : -b)
let info = this.drawInfo[this.drawInfo.length - 1]
info.a = a / this.width
info.b = b / this.height
}
this.context.stroke()
}
},
// 绘制椭圆
drawEllipse (context, x, y, a, b) {
context.save()
var r = (a > b) ? a : b
var ratioX = a / r
var ratioY = b / r
context.scale(ratioX, ratioY)
context.beginPath()
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false)
context.closePath()
context.restore()
},
// 鼠标抬起
canvasUp (e) {
if (this.canDraw) {
this.canvasMoveUse = false
}
},
// 获取坐标信息
getInfo () {
return this.drawInfo
},
// 清空画布
clean () {
this.context.drawImage(this.img, 0, 0, this.width, this.height)
this.drawInfo = []
if (this.info && this.info.length !== 0) this.drawWithInfo()
}
}
}
</script>
<style lang="scss" scoped>
.canvas{
cursor: crosshair;
}
</style>

必须传入的参数

  • 图片路径
url: string
  • 绘图区域宽度
width: string
  • 绘图区域高度
height: string

选择传入的参数

  • 是否可以绘制,默认true
canDraw: boolean
  • 坐标点信息,不传入则不绘制
info: string
  • 是否可绘制,默认true
canDraw: boolean
  • 绘图颜色,默认red
lineColor: string
  • 绘图笔宽度,默认2
lineWidth: number
  • 绘图笔类型,rec、circle,默认rec
lineType: string

可以调用的方法

  • 清空画布
clean()
  • 返回坐标点信息
getInfo()

特殊说明

  • canvas对象不能获得坐标,是通过父元素坐标获取的,所以该组件的父元素以上的层级不能有太多的定位、嵌套,否则绘制坐标会偏移。
  • 域名不同的图片可能存在跨域问题,看过很多资料没有太好的办法,最后项目中是用node服务做了一个图片转为base64的接口,再给canvas绘制解决的。并不一定适用于其他项目,如果有更好的办法解决欢迎分享。
  • 导出坐标点数据只能导出规则图案的坐标点,因为随意涂鸦的坐标点太多时会崩溃的(虽然没试过具体到什么程度会崩溃),如果有高性能的实现方式欢迎分享。
  • 如果涂鸦后保存再请求图片url出现请求不到的情况,是因为CDN缓存的问题,在图片路径后面拼个随机码就可以解决。

原文地址:https://segmentfault.com/a/1190000016852958

vue组件:canvas实现图片涂鸦功能的更多相关文章

  1. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  2. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  3. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  4. vue 实现点击图片放大

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡 ...

  5. vue组件如何被其他项目引用

    自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...

  6. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  7. vue中图片放大镜功能

    仿淘宝详情页图片鼠标移过去可对图片放大显示在右侧 效果图如下图,此功能支持PC端与移动端 接下来进入代码实现环节: 先准备两张图片,一张小图片叫 '土味.jpg',大小160*91:一张大图片叫 ' ...

  8. 通过base64实现图片下载功能(基于vue)

    1. 使用场景 当我们处理图片下载功能的时候,如果本地的图片,那么是可以通过canvas获得图片的base64的,方法如下.但是如果图片的url存在跨域问题的话,下面的方法将行不通,这时候我们可以另辟 ...

  9. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

随机推荐

  1. [题解]luogu_P2155_BZOJ_2186沙拉公主的困惑

    题意求1~N!中与M!互质的数的个数, 首先证明gcd(a,b)=1时gcd(a-kb,b)=1 gcd(a,b)=1 gcd(a%b,b)=1 gcd(a-kb,b)=1 即a-kb与b互质 这样由 ...

  2. C# 文件异步操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. net core 认证及简单集群

    net core 认证及简单集群 在Asp.net WebAPI中,认证是通过AuthenticationFilter过滤器实现的,我们通常的做法是自定义AuthenticationFilter,实现 ...

  4. 《深入理解java虚拟机》笔记(5)垃圾回收算法及垃圾收集器

    一.标记-清除算法 算法:分为标记和清除两个阶段,首先标记出所有需要回收的对象,再对标记对象进行回收. 不足之处:效率不高,会产生大量不连续内存碎片,导致下次分配较大内存时,若内存不足不得不触发垃圾回 ...

  5. E. Karen and Supermarket

    E. Karen and Supermarket time limit per test 2 seconds memory limit per test 512 megabytes input sta ...

  6. C#/.net基础知识

    1 .NET  中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多.结构不能申明有默认的构造函数,为结构的副本是又编译器创建 和销毁的,所以不需要默认的构造函数和析构函数.结构 ...

  7. 微信小程序干货

    1.获取text文本框输入的信息 wxml代码 <view class="weui-cells"> <view class="weui-cell weu ...

  8. Lodash.js常用拷贝

    lodash.js 降低 array.number.objects.string 等等的使用难度从而让 JavaScript 变得更简单.非常适用于:遍历 array.object 和 string: ...

  9. 如何使用ABAP Restful API进行代码的全文搜索

    使用这个代码全文搜索的前提条件,是在事务码SFW5里激活业务功能:SRIS_SOURCE_SEARCH 只需要把这个url贴到浏览器里: https://:44355/sap/bc/adt/repos ...

  10. UVA 714 Copying Books 抄书 (二分)

    题意:把一个包含m个正整数的序列划分成k个非空的连续子序列.使得所有连续子序列的序列和Si的最大值尽量小. 二分,每次判断一下当前的值是否满足条件,然后修改区间.注意初始区间的范围,L应该为所有正整数 ...