From 172199d84e17b2285aef2c1112fbed3c6f25f27c Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 26 六月 2024 19:51:22 +0800
Subject: [PATCH] 涂色题
---
src/components/graffiti/index.vue | 62 +++++++++++++++++++++---------
1 files changed, 43 insertions(+), 19 deletions(-)
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 8980a01..de1beef 100644
--- a/src/components/graffiti/index.vue
+++ b/src/components/graffiti/index.vue
@@ -14,8 +14,7 @@
</div>
</div>
<div class="footer">
- <BrushSize :size="brushSize" @change-size="onChangeSize" />
- <ColorPicker :color="brushColor" @change-color="onChangeColor" />
+ <BrushSize :size="brushSize" @change-size="onChangeSize" @change-color="onChangeColor" />
<ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
</div>
</div>
@@ -23,11 +22,18 @@
<script>
import BrushSize from "./components/brushSize.vue";
-import ColorPicker from "./components/colorPicker.vue";
import ToolBtns from "./components/toolBtns.vue";
export default {
name: "graffiti",
- components: { BrushSize, ColorPicker, ToolBtns },
+ components: { BrushSize, ToolBtns },
+ props:{
+ page:{
+ type:Number
+ },
+ bcImg:{
+ type:String
+ }
+ },
data() {
return {
canvas: null,
@@ -42,16 +48,17 @@
top: 0,
},
backgroundImage:
- "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
+ "",
};
},
mounted() {
+ this.backgroundImage = this.bcImg
this.canvas = document.getElementById("canvas");
if (this.canvas.getContext) {
this.context = this.canvas.getContext("2d", { willReadFrequently: true });
this.initCanvas();
// window.addEventListener('resize', updateCanvasPosition);
- window.addEventListener("scroll", this.updateCanvasOffset); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
+ window.addEventListener("scroll",this.updateCanvasOffset,true); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
this.getCanvasOffset();
this.context.lineGap = "round";
this.context.lineJoin = "round";
@@ -61,6 +68,10 @@
this.canvas.addEventListener("mouseleave", this.closePaint);
}
this.toolClear();
+ const oldData = localStorage.getItem('graffiti-data')
+ if(oldData) {
+ this.backgroundImage = oldData
+ }
},
methods: {
changeBackground(imgUrl) {
@@ -143,6 +154,7 @@
},
onChangeTool(tool) {
this.brushTool = tool;
+ console.log(tool);
switch (tool) {
case "clear":
this.toolClear();
@@ -159,18 +171,30 @@
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.resetToolActive();
},
+ // 鍘熶繚瀛樻柟娉�
toolSave() {
- const imageDataUrl = this.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();
+ var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:800,});
+ localStorage.setItem('graffiti-data',imgData)
+ },
+ // 淇濆瓨鏂规硶锛屼繚瀛樹负涓�寮犲浘鐗囧苟涓嬭浇
+ saveImgData() {
+ var link = document.createElement("a");
+ var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
+ var strDataURI = imgData.substr(22, imgData.length);
+ var blob = dataURLtoBlob(imgData);
+ var objurl = URL.createObjectURL(blob);
+ link.download = "grid1.png";
+ link.href = objurl;
+ link.click();
+
+ function dataURLtoBlob(dataurl) {
+ var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+ while(n--){
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new Blob([u8arr], {type:mime});
+ }
},
toolUndo() {
if (this.historyData.length <= 0) {
@@ -180,13 +204,13 @@
const lastIndex = this.historyData.length - 1;
this.context.putImageData(this.historyData[lastIndex], 0, 0);
this.historyData.pop();
-
this.resetToolActive();
},
// 瀛樺偍鏁版嵁
saveData(data) {
this.historyData.length >= 50 && this.historyData.shift(); // 璁剧疆鍌ㄥ瓨涓婇檺涓�50姝�
this.historyData.push(data);
+ console.log('鏁版嵁',this.historyData);
},
// 娓呴櫎銆佹挙閿�銆佷繚瀛樼姸鎬佷笉闇�瑕佷繚鎸侊紝鎿嶄綔瀹屽悗鎭㈠绗斿埛鐘舵��
resetToolActive() {
@@ -202,7 +226,7 @@
.page {
display: flex;
flex-direction: column;
- width: 1038px;
+ width:100%;
height: 866px;
}
--
Gitblit v1.9.1