Le contenu de cet article concerne la réalisation de la fonction graffiti d'image sur toile (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Exigences
Vous devez annoter les images et les exporter.
N plusieurs images doivent être marquées et enfin enregistrées en même temps.
doit être étiqueté en fonction des données de zone du polygone (surface, couleur, nom).
Solution correspondante
Utilisez Canvas pour dessiner des graffitis, des cercles et des rectangles, et enfin générer un encodage base64 d'image pour le téléchargement
Le téléchargement par lots d'un grand nombre d'images prend du temps. Afin d'améliorer l'expérience utilisateur, nous implémentons uniquement le dessin de cercles et de rectangles, puis les enregistrons sous forme de coordonnées et les dessinons en fonction des coordonnées. la prochaine fois qu'ils seront affichés.
L'affichage de la zone du polygone est dessiné en fonction des points de coordonnées, et la position où le nom est affiché est le centre de gravité du polygone.
<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 scoped>
.canvas{
cursor: crosshair;
}
</style>Paramètres qui doivent être transmis dans
Chemin de l'image
url: string
Largeur de la zone de dessin
width: string
Hauteur de la zone de dessin
height: string
Sélectionnez les paramètres transmis
S'il peut être dessiné, la valeur par défaut est vraie
canDraw: boolean
Les informations de point de coordonnées, si elles ne sont pas transmises, elles ne seront pas dessinées
info: string
Qu'il puisse être dessiné, la valeur par défaut est vraie
canDraw: boolean
Couleur de dessin, rouge par défaut
lineColor: string
Largeur du stylo de dessin, par défaut 2
lineWidth: number
Type de stylo de dessin, enregistrement, cercle, enregistrement par défaut
lineType: string
OK Méthode appelée
Effacer le canevas
clean()
Renvoyer les informations sur les points de coordonnées
getInfo()
Instructions spéciales
L'objet canevas ne peut pas obtenir de coordonnées. est obtenu grâce aux coordonnées de l'élément parent, donc l'élément parent de ce composant Il ne peut pas y avoir trop de positionnement ou d'imbrication dans les niveaux ci-dessus, sinon les coordonnées du dessin seront décalées.
Les images avec des noms de domaine différents peuvent avoir des problèmes entre domaines. J'ai lu beaucoup d'informations et il n'y a pas de bonne solution dans le projet final, j'ai utilisé le service de nœud pour créer. une interface pour convertir des images en base64, puis résolu en dessinant sur toile. Cela peut ne pas être applicable à d'autres projets. S'il existe une meilleure solution, veuillez la partager.
L'exportation de données de points de coordonnées ne peut exporter que les points de coordonnées de motifs réguliers, car s'il y a trop de points de coordonnées griffonnés au hasard, cela s'effondrera (même si je n'ai pas essayé dans quelle mesure cela s'effondrera). Si vous disposez de méthodes de mise en œuvre performantes, veuillez les partager.
Si l'URL de l'image ne peut pas être demandée après l'avoir enregistrée après le graffiti, c'est à cause d'un problème de mise en cache CDN, qui peut être résolu en ajoutant un code aléatoire après le chemin de l'image.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
