|
|
@@ -0,0 +1,142 @@
|
|
|
+<script>
|
|
|
+// 使用canvas绘制图片
|
|
|
+// 顺编在图片上绘制矩形框
|
|
|
+export default {
|
|
|
+ name: "canvasView",
|
|
|
+ props: {
|
|
|
+ imageUrl: "",
|
|
|
+ aiItems: [],
|
|
|
+ drawRect: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ // 获取父元素宽高
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.canvas = this.$refs.canvas;
|
|
|
+ this.getParentWH();
|
|
|
+ this.loadImage();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ imageUrl() {
|
|
|
+ this.loadImage();
|
|
|
+ },
|
|
|
+ drawRect() {
|
|
|
+ if (this.img) {
|
|
|
+ this.imgLoaded(this.img)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvas: null,
|
|
|
+ ctx: null,
|
|
|
+ parentWidth: 0,
|
|
|
+ parentHeight: 0,
|
|
|
+ img: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getParentWH() {
|
|
|
+ // 获取父元素的宽高, 用于限定图片显示区域
|
|
|
+ console.log('test')
|
|
|
+ let el = this.canvas;
|
|
|
+ console.log(el)
|
|
|
+ let parentEl = el.parentElement;
|
|
|
+ console.log(parentEl)
|
|
|
+ this.parentWidth = parentEl.clientWidth;
|
|
|
+ this.parentHeight = parentEl.clientHeight;
|
|
|
+ console.log(`width: ${this.parentWidth} height: ${this.parentHeight}`)
|
|
|
+ },
|
|
|
+ loadImage() {
|
|
|
+ let imageUrl = this.imageUrl;
|
|
|
+ let img = new Image();
|
|
|
+ img.onload = () => {
|
|
|
+ this.imgLoaded(img)
|
|
|
+ };
|
|
|
+ img.src = imageUrl;
|
|
|
+ },
|
|
|
+ imgLoaded(img) {
|
|
|
+ this.img = img;
|
|
|
+ this.ctx = this.canvas.getContext("2d");
|
|
|
+ let width = img.width;
|
|
|
+ let height = img.height;
|
|
|
+ console.log(`img width: ${width} height: ${height}`)
|
|
|
+ // 1 宽度超出父元素宽度 缩放父元素
|
|
|
+ let scale_w = this.parentWidth / width;
|
|
|
+ let scale_h = this.parentHeight / height;
|
|
|
+ // 获取缩放位置
|
|
|
+ let scale = Math.min(scale_w, scale_h);
|
|
|
+ console.log(`scale_w: ${scale_w} scale_h: ${scale_h}`)
|
|
|
+ // 尝试填满父元素宽度
|
|
|
+ if (scale_w * height < this.parentHeight) {
|
|
|
+ this.canvas.width = this.parentWidth;
|
|
|
+ this.canvas.height = scale_w * height;
|
|
|
+ scale = scale_w;
|
|
|
+ } else if (scale_h * width < this.parentWidth) {
|
|
|
+ this.canvas.width = scale_h * width;
|
|
|
+ this.canvas.height = this.parentHeight;
|
|
|
+ scale = scale_h;
|
|
|
+ }
|
|
|
+ // 缩放图片并绘制
|
|
|
+ this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
|
|
|
+ this.scale = scale;
|
|
|
+ if (this.drawRect) {
|
|
|
+ this.drawAiRect(scale);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawAiRect(scale) {
|
|
|
+ let aiItems = this.aiItems;
|
|
|
+ console.log(aiItems)
|
|
|
+ // "alarmId": 8634,
|
|
|
+ // "arithmetic": "1",
|
|
|
+ // "info": "火焰",
|
|
|
+ // "itemId": 8539,
|
|
|
+ // "similarity": "0",
|
|
|
+ // "trait": "fire",
|
|
|
+ // "x1": "1051.0",
|
|
|
+ // "x2": "1311.0",
|
|
|
+ // "y1": "763.0",
|
|
|
+ // "y2": "1114.0"
|
|
|
+ aiItems.forEach(item => {
|
|
|
+ console.log(item)
|
|
|
+ // 绘制矩形框, 将坐标转换成canvas坐标
|
|
|
+
|
|
|
+ let x = item.x1;
|
|
|
+ let y = item.y1;
|
|
|
+ x = x * scale;
|
|
|
+ y = y * scale;
|
|
|
+ let w = item.x2 * scale - x;
|
|
|
+ let h = item.y2 * scale - y;
|
|
|
+ this.ctx.strokeStyle = "red";
|
|
|
+ this.ctx.strokeRect(x, y, w, h);
|
|
|
+ // 尝试在上方绘制描述
|
|
|
+ let info_x = x;
|
|
|
+ let info_y = y;
|
|
|
+ // 绘制半透明矩形框
|
|
|
+ // this.ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
|
|
|
+ // this.ctx.fillRect(info_x, info_y, 80, 60);
|
|
|
+ // 绘制文字
|
|
|
+ this.ctx.fillStyle = "red";
|
|
|
+ this.ctx.font = "20px Arial";
|
|
|
+ let infoText = `${item.info}-${item.trait}(${item.similarity})`
|
|
|
+ this.ctx.fillText(infoText, info_x, info_y + 20);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <canvas ref="canvas">
|
|
|
+ </canvas>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
