<template>
<canvas
ref="canvas"
:width="width"
:height="height"
@mousedown="startDraw"
@mousemove="draw"
@mouseup="endDraw"
@mouseleave="endDraw"
></canvas>
<div class="canvasButton">
<a-button @click="save" type="primary">保存</a-button>
<a-button @click="clear" style="margin-left: 15px;" danger>清除</a-button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Button as AButton, } from "ant-design-vue"
const canvas = ref(null);
const ctx = ref(null);
const isDrawing = ref(false);
const width = 650;
const height = 360;
const startDraw = (event) => {
isDrawing.value = true;
const rect = canvas.value.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
ctx.value.beginPath();
ctx.value.moveTo(x, y);
};
const draw = (event) => {
if (!isDrawing.value) return;
const rect = canvas.value.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
ctx.value.lineTo(x, y);
ctx.value.stroke();
};
const endDraw = () => {
isDrawing.value = false;
};
onMounted(() => {
ctx.value = canvas.value.getContext('2d');
});
const clear = () => {
ctx.value.clearRect(0, 0, width, height);
}
const save = () => {
// console.log(canvas.value.toDataURL('image/png'))
let imgBase64 = canvas.value.toDataURL('image/png')
console.log(imgBase64)
}
</script>
<style scoped>
canvas {
/* border: 1px solid #000; */
touch-action: none;
}
.canvasButton {
display: flex;
}
</style>
canvas融合
<template>
<canvas
ref="canvas"
:width="width"
:height="height"
@mousedown="startDraw"
@mousemove="draw"
@mouseup="endDraw"
@mouseleave="endDraw"
style="background: none;"
></canvas>
<canvas
ref="canvas1"
:width="width"
:height="height" style="display: none; pointer-events: none;position: absolute;"></canvas>
<div class="canvasButton">
<a-button @click="save" type="primary">保存</a-button>
<a-button @click="makeImg" type="primary">生成图片</a-button>
<a-button @click="clear" style="margin-left: 0px;" danger>清除</a-button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Button as AButton, } from "ant-design-vue"
const canvas = ref(null);
const canvas1 = ref(null);
const ctx = ref(null);
const ctx1 = ref(null);
const isDrawing = ref(false);
const width = 650;
const height = 360;
const emits = defineEmits(['generateBase64'])
const startDraw = (event) => {
isDrawing.value = true;
const rect = canvas.value.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;;
ctx.value.beginPath();
ctx.value.lineWidth = 20;
ctx.value.strokeStyle="#fff";
ctx.value.moveTo(x, y);
};
const draw = (event) => {
if (!isDrawing.value) return;
const rect = canvas.value.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
ctx.value.lineTo(x, y);
ctx.value.stroke();
};
const endDraw = () => {
isDrawing.value = false;
};
onMounted(() => {
ctx.value = canvas.value.getContext('2d');
ctx1.value = canvas1.value.getContext('2d');
ctx1.value.fillStyle = "rgba(0, 0, 0, 1)"
ctx1.value.fillRect(0, 0, width, height);
});
const clear = () => {
ctx.value.clearRect(0, 0, width, height);
}
const save = () => {
let canvasMerged = document.createElement('canvas');
canvasMerged.width = 650;
canvasMerged.height = 360;
let ctxMerged = canvasMerged.getContext('2d');
ctxMerged.drawImage(canvas1.value, 0, 0, width, height);
ctxMerged.drawImage(canvas.value, 0, 0, width, height);
console.log(ctxMerged.canvas.toDataURL('image/png'))
emits('generateBase64', ctxMerged.canvas.toDataURL('image/png'))
// let imgBase64 = canvas.value.toDataURL('image/png')
// console.log(imgBase64)
// emits('generateBase64', imgBase64)
}
const makeImg = () => {
let canvasMerged = document.createElement('canvas');
canvasMerged.width = 650;
canvasMerged.height = 360;
let ctxMerged = canvasMerged.getContext('2d');
ctxMerged.drawImage(canvas1.value, 0, 0, width, height);
ctxMerged.drawImage(canvas.value, 0, 0, width, height);
var link = document.createElement('a');
link.href = ctxMerged.canvas.toDataURL('image/png');
link.download = "download.png";
link.click();
}
defineExpose({
save
});
</script>
<style scoped>
canvas {
/* border: 1px solid #000; */
touch-action: none;
background: none;
}
.canvasButton {
display: flex;
}
</style>