需要下载 fabric.js
npm i fabric.js
导入完成之后
就可以
实列
<template>
<div>
<div style="margin: 100px"></div>
<div>
<div class="imgALL">
<canvas
id="canvas"
:width="240"
:height="240"
style="border: 1px dashed #ccc;"
></canvas>
<img class=" imgSrc" src="../../../assets/imgs/连线.png" />
<img
v-show="isnow"
:imgwidth="imgwidth"
:imgheight="imgheight"
:src="imag"
class="trueimg"
/>
</div>
<button @click="clear">清除</button>
<button @click="red">红色</button>
<button @click="bold">加粗</button>
<button @click="up">撤销</button>
<button @click="go">导出图片</button>
</div>
</div>
</template>
<script>
import { fabric } from "fabric";
export default {
data() {
return {
canvas: null,
stateArr: [],
imag: "",
isnow: false,
num: 2,
imgwidth: "",
imgheight: "",
screenWidth: document.body.clientWidth, // 屏幕宽度
};
},
mounted() {
this.freeOraw();
this.watchWidth();
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth;
this.screenWidth = window.screenWidth;
})();
};
},
methods: {
freeOraw() {
if (this.canvas == null) {
this.canvas = new fabric.Canvas("canvas");
this.canvas.backgroundColor = "#ffffff00";
this.canvas.isDrawingMode = true;
this.canvas.freeDrawingBrush.color = "black";
this.canvas.freeDrawingBrush.width = this.num;
this.canvas.renderAll();
}
},
clear() {
this.canvas.clear();
this.imag = "";
this.canvas.freeDrawingBrush.color = "black";
this.canvas.freeDrawingBrush.width = 2;
},
red() {
this.canvas.freeDrawingBrush.color = "red";
},
up() {
if (this.canvas._objects.length > 0) {
this.stateArr.push(this.canvas._objects.pop());
this.canvas.renderAll();
}
},
// 上一步
next() {
if (this.stateArr.length > 0) {
this.canvas.add(this.stateArr.pop());
this.canvas.renderAll();
}
},
go() {
const arr = this.canvas.toDatalessJSON(Array, 1);
const dataURL = this.canvas.toDataURL({
width: this.canvas.width,
height: this.canvas.height,
let: 0,
top: 0,
format: "png",
});
// console.log(dataURL)
if (arr.objects.length === 0) {
console.log(1);
} else {
// this.isnow = true
// this.imag = dataURL
console.log(2);
}
// console.log(arr.objects)
},
bold() {
this.canvas.freeDrawingBrush.width = this.num++;
},
watchWidth() {
if (this.screenWidth < 767 - 17 && this.screenWidth >= 320 - 17) {
this.canvas.setWidth(300);
this.canvas.setHeight(250);
this.imgwidth = 300;
this.imgheight = 250;
console.log(1);
} else if (this.screenWidth < 992 - 17 && this.screenWidth >= 768 - 17) {
this.canvas.setWidth(400);
this.canvas.setHeight(350);
this.imgwidth = 400;
this.imgheight = 350;
console.log(2);
} else if (this.screenWidth < 1200 - 17 && this.screenWidth >= 993 - 17) {
this.canvas.setWidth(500);
this.canvas.setHeight(450);
this.imgwidth = 500;
this.imgheight = 450;
console.log(3);
} else if (
this.screenWidth < 1919 - 17 &&
this.screenWidth >= 1201 - 17
) {
this.canvas.setWidth(500);
this.canvas.setHeight(450);
this.imgwidth = 500;
this.imgheight = 450;
} else {
this.canvas.setWidth(500);
this.canvas.setHeight(450);
this.imgwidth = 500;
this.imgheight = 450;
}
},
},
watch: {
screenWidth(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenWidth = val;
this.timer = true;
let that = this;
this.watchWidth();
setTimeout(function() {
// 打印screenWidth变化的值
console.log(that.screenWidth);
that.timer = false;
}, 100);
}
},
},
};
</script>
<style scoped>
* {
font-size: 16px;
}
.imgALL {
position: relative;
}
.imgSrc {
height: 100%;
position: absolute;
top: 0px;
z-index: -10;
}
.trueimg {
position: absolute;
top: 0;
border: 1px dashed black;
}
/* .imgColor {
position: absolute;
top: 0;
width: 250px;
}
.image {
position: absolute;
top: 0;
z-index: 999;
}
.canvas {
position: relative;
border: 1px dashed black;
margin-bottom: 2%;
z-index: 9999;
} */
</style>
有bug我也不会改(*-ω-)
