前端canvas实现图片涂鸦(Vue2、Vue3都支持)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
先看一下效果图吧
代码组成:画笔大小、颜色、工具按钮都是组件,通俗易懂,可以按照自己的需求调整。
主要代码App.vue
<template>
<div class="page">
<div class="main">
<div id="canvas_panel">
<canvas id="canvas" :style="{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }">当前浏览器不支持canvas。</canvas>
</div>
</div>
<div class="footer">
<BrushSize :size="brushSize" @change-size="onChangeSize" />
<ColorPicker :color="brushColor" @change-color="onChangeColor" />
<ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import BrushSize from './components/BrushSize.vue';
import ColorPicker from './components/ColorPicker.vue';
import ToolBtns from './components/ToolBtns.vue';
let canvas = null;
let context = null;
let painting = false;
const historyData = []; // 存储历史数据,用于撤销
const brushSize = ref(5); // 笔刷大小
const brushColor = ref('#000000'); // 笔刷颜色
const brushTool = ref('brush');
// canvas相对于(0, 0)的偏移,用于计算鼠标相对于canvas的坐标
const canvasOffset = {
left: 0,
top: 0,
};
const backgroundImage = ref('https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF'); // 默认背景图为空
function changeBackground(imgUrl) {
backgroundImage.value = imgUrl;
}
function initCanvas() {
function resetCanvas() {
const elPanel = document.getElementById('canvas_panel');
canvas.width = elPanel.clientWidth;
canvas.height = elPanel.clientHeight;
context = canvas.getContext('2d', { willReadFrequently: true }); // 添加这一行
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'black';
getCanvasOffset(); // 更新画布位置
}
resetCanvas();
window.addEventListener('resize', resetCanvas);
}
// 获取canvas的偏移值
function getCanvasOffset() {
const rect = canvas.getBoundingClientRect();
canvasOffset.left = rect.left * (canvas.width / rect.width); // 兼容缩放场景
canvasOffset.top = rect.top * (canvas.height / rect.height);
}
// 计算当前鼠标相对于canvas的坐标
function calcRelativeCoordinate(x, y) {
return {
x: x - canvasOffset.left,
y: y - canvasOffset.top,
};
}
function downCallback(event) {
// 先保存之前的数据,用于撤销时恢复(绘制前保存,不是绘制后再保存)
const data = context.getImageData(0, 0, canvas.width, canvas.height);
saveData(data);
const { clientX, clientY } = event;
const { x, y } = calcRelativeCoordinate(clientX, clientY);
context.beginPath();
context.moveTo(x, y);
context.lineWidth = brushSize.value;
context.strokeStyle = brushTool.value === 'eraser' ? '#FFFFFF' : brushColor.value;
painting = true;
}
function moveCallback(event) {
if (!painting) {
return;
}
const { clientX, clientY } = event;
const { x, y } = calcRelativeCoordinate(clientX, clientY);
context.lineTo(x, y);
context.stroke();
}
function closePaint() {
painting = false;
}
function updateCanvasOffset() {
getCanvasOffset(); // 重新计算画布的偏移值
}
onMounted(() => {
canvas = document.getElementById('canvas');
if (canvas.getContext) {
context = canvas.getContext('2d', { willReadFrequently: true });
initCanvas();
// window.addEventListener('resize', updateCanvasPosition);
window.addEventListener('scroll', updateCanvasOffset); // 添加滚动条滚动事件监听器
getCanvasOffset();
context.lineGap = 'round';
context.lineJoin = 'round';
canvas.addEventListener('mousedown', downCallback);
canvas.addEventListener('mousemove', moveCallback);
canvas.addEventListener('mouseup', closePaint);
canvas.addEventListener('mouseleave', closePaint);
}
toolClear()
});
function onChangeSize(size) {
brushSize.value = size;
}
function onChangeColor(color) {
brushColor.value = color;
}
function onChangeTool(tool) {
brushTool.value = tool;
switch (tool) {
case 'clear':
toolClear();
break;
case 'undo':
toolUndo();
break;
case 'save':
toolSave();
break;
}
}
function toolClear() {
context.clearRect(0, 0, canvas.width, canvas.height);
resetToolActive();
}
function toolSave() {
const imageDataUrl = canvas.toDataURL('image/png');
console.log(imageDataUrl)
// const imgUrl = canvas.toDataURL('image/png');
// const el = document.createElement('a');
// el.setAttribute('href', imgUrl);
// el.setAttribute('target', '_blank');
// el.setAttribute('download', `graffiti-${Date.now()}`);
// document.body.appendChild(el);
// el.click();
// document.body.removeChild(el);
// resetToolActive();
}
function toolUndo() {
if (historyData.length <= 0) {
resetToolActive();
return;
}
const lastIndex = historyData.length - 1;
context.putImageData(historyData[lastIndex], 0, 0);
historyData.pop();
resetToolActive();
}
// 存储数据
function saveData(data) {
historyData.length >= 50 && historyData.shift(); // 设置储存上限为50步
historyData.push(data);
}
// 清除、撤销、保存状态不需要保持,操作完后恢复笔刷状态
function resetToolActive() {
setTimeout(() => {
brushTool.value = 'brush';
}, 1000);
}
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
width: 1038px;
height: 866px;
}
.main {
flex: 1;
}
.footer {
display: flex;
justify-content: space-around;
align-items: center;
height: 88px;
background-color: #fff;
}
#canvas_panel {
margin: 12px;
height: calc(100% - 24px);
/* 消除空格影响 */
font-size: 0;
background-color: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
#canvas {
cursor: crosshair;
/* background: url('https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF') no-repeat !important; */
}
</style>
接下来就是三个组件
BrushSize.vue(画笔大小)
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
size: {
type: Number,
default: 5,
},
});
const brushSize = computed(() => props.size);
</script>
<template>
<div class="wrap-range">
<!-- 为了不在子组件中变更值,不用v-model -->
<input
type="range"
:value="brushSize"
min="1"
max="30"
title="调整笔刷粗细"
@change="event => $emit('change-size', +event.target.value)"
/>
</div>
</template>
<style scoped>
.wrap-range input {
width: 150px;
height: 20px;
margin: 0;
transform-origin: 75px 75px;
border-radius: 15px;
-webkit-appearance: none;
appearance: none;
outline: none;
position: relative;
}
.wrap-range input::after {
display: block;
content: '';
width: 0;
height: 0;
border: 5px solid transparent;
border-right: 150px solid #00ccff;
border-left-width: 0;
position: absolute;
left: 0;
top: 5px;
border-radius: 15px;
z-index: 0;
}
.wrap-range input[type='range']::-webkit-slider-thumb,
.wrap-range input[type='range']::-moz-range-thumb {
-webkit-appearance: none;
}
.wrap-range input[type='range']::-webkit-slider-runnable-track,
.wrap-range input[type='range']::-moz-range-track {
height: 10px;
border-radius: 10px;
box-shadow: none;
}
.wrap-range input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
margin-top: -1px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 8px #00ccff;
position: relative;
z-index: 999;
}
</style>
ColorPicker.vue(颜色)
<script setup>
import { ref, computed } from 'vue';
const props = defineProps(['color']);
const emit = defineEmits(['change-color']);
const colorList = ref(['#000000', '#808080', '#FF3333', '#0066FF', '#FFFF33', '#33CC66']);
const colorSelected = computed(() => props.color);
function onChangeColor(color) {
emit('change-color', color);
}
</script>
<template>
<div>
<span
v-for="(color, index) of colorList"
class="color-item"
:class="{ active: colorSelected === color }"
:style="{ backgroundColor: color }"
:key="index"
@click="onChangeColor(color)"
></span>
</div>
</template>
<style scoped>
.color-item {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 4px;
box-sizing: border-box;
border: 4px solid white;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: 0.3s;
}
.color-item.active {
box-shadow: 0 0 15px #00ccff;
}
</style>
ToolBtns.vue(按钮)
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
tool: {
type: String,
default: 'brush',
},
});
const emit = defineEmits(['change-tool']);
const toolSelected = computed(() => props.tool);
const toolList = ref([
{ name: 'brush', title: '画笔', icon: 'icon-qianbi' },
{ name: 'eraser', title: '橡皮擦', icon: 'icon-xiangpi' },
{ name: 'clear', title: '清空', icon: 'icon-qingchu' },
{ name: 'undo', title: '撤销', icon: 'icon-chexiao' },
{ name: 'save', title: '保存', icon: 'icon-fuzhi' },
]);
function onChangeTool(tool) {
emit('change-tool', tool);
}
</script>
<template>
<div class="tools">
<button
v-for="item of toolList"
:class="{ active: toolSelected === item.name }"
:title="item.title"
@click="onChangeTool(item.name)"
>
<i :class="['iconfont', item.icon]"></i>
</button>
</div>
</template>
<style scoped>
.tools button {
/* border-radius: 50%; */
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #eee;
outline: none;
cursor: pointer;
box-sizing: border-box;
margin: 0 8px;
padding: 0;
text-align: center;
color: #ccc;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
transition: 0.3s;
}
.tools button.active,
.tools button:active {
/* box-shadow: 0 0 15px #00CCFF; */
color: #00ccff;
}
.tools button i {
font-size: 20px;
}
</style>
🐱 个人主页:TechCodeAI启航,公众号:SHOW科技
🙋♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫 优质专栏:前端主流技术分享
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼!
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)