lema/flagnote-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add html2canvas

Browse Source
This commit is contained in:
Jesse-Ma
2023-03-15 14:49:19 +08:00
parent b86cf176dd
commit 67035a0abf
3 changed files with 151 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -15,6 +15,7 @@
"crypto-js": "^4.1.1",
"escape-html": "^1.0.3",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"pako": "^2.1.0",
"qrcodejs2": "^0.0.2",
"view-design": "^4.7.0",

73
src/views/EditNote.vue
View File

@@ -113,18 +113,13 @@
<Button-group vertical size="large">
<Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu(); " icon="md-add"></Button>
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 14px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="crop" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="saveImage();switchMenu();"
icon="md-crop"></Button>
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
icon="md-download"></Button>
<Button aria-label="history text" v-show="model.showHistoryText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu(); "
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@@ -149,7 +144,7 @@
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0">
<Form :model="noteForm" :label-width="80">
<div id="wrapper" style="border-left: 2px solid #ed4014;">
<div ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
<Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
@on-keydown="recordEventKdown" />
@@ -201,6 +196,7 @@ import { setStoreText,setNewStoreText } from "@/libs/noteStorage";
import { saveAs } from 'file-saver';
import { isWeixin } from "@/libs/utils";
import NoteConstant from "@/libs/constants";
import html2canvas from "html2canvas";
export default {
name: 'EditNote',
@@ -498,7 +494,62 @@ export default {
}
}
}
}
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
saveImage() {
let canvasID = this.$refs["html2canvas"];
let that = this;
let a = document.createElement('a');
html2canvas(canvasID,{
scale: 1,
windowWidth: parseInt(document.getElementById("noteText").offsetWidth)+2,
onclone: (clonedDocument) => {
let nt = clonedDocument.getElementById("noteText");
const div = clonedDocument.createElement('div')
div.innerText = nt.value
div.style.color="black";
div.style.padding = "10px";
div.style.textAlign = "left";
div.style.wordBreak = "break-word";
div.style.whiteSpace = "pre-wrap";
div.style.verticalAlign = "top";
div.style.fontSize ="15px";
div.style.width= "100%";
div.style.border="0px";
div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
nt.style.display = 'none'
nt.parentElement.parentElement.style.borderLeftColor = "white";
nt.parentElement.append(div)
}
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
a.setAttribute('download', that.noteForm.key + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
}
}
</script>

119
src/views/ViewNote.vue
View File

@@ -172,17 +172,17 @@
<img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
v-on:click="refreshPage()">
<!--
<div style="float:left;width:auto;vertical-align: center;">
<div style="font-size: 18px;
color: red;
line-height: 40px;
display: inline-block;
font-weight: bold;
height: 40px;">{{
state.ttlDesc
}}</div>
</div>
-->
<div style="float:left;width:auto;vertical-align: center;">
<div style="font-size: 18px;
color: red;
line-height: 40px;
display: inline-block;
font-weight: bold;
height: 40px;">{{
state.ttlDesc
}}</div>
</div>
-->
<div style="float:left;width:auto;">
@@ -220,18 +220,19 @@
<div id="noteMenu" :class="[showMenuState ? 'showBlock' : 'hideBlock']"
style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
<Button-group vertical size="large">
<Button type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
<Button aria-label="new note" type="error" icon="md-add" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu();"></Button>
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
icon="md-download"></Button>
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu();"></Button>
@@ -254,9 +255,9 @@
<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
:lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
<Card :padding="0">
<div id="wrapper" style="border-left: 2px solid white;">
<div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
</div>
</Card>
</Col>
@@ -274,11 +275,11 @@
<Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
@on-cancel="closeShareModel">
<p style="text-align: center;
z-index: 1000;
position: absolute;
top: -2px;
left: 0px;
width: 100%;">
z-index: 1000;
position: absolute;
top: -2px;
left: 0px;
width: 100%;">
<Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
</p>
<p style="text-align: center;margin-top:20px;line-height:100%">
@@ -303,7 +304,7 @@
<p style="text-align: center;margin-top:10px;">
<Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeTtlDeleteModel()">{{
$t("button.close")
$t("button.close")
}}</Button>
</p>
</Modal>
@@ -314,7 +315,7 @@
</p>
<p style="text-align: center;">
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size:19px;" @click="dropNote()">{{
$t("button.yes")
$t("button.yes")
}}</Button>
</p>
</Modal>
@@ -325,15 +326,12 @@
</p>
<p style="text-align: center;">
<Button type="error" style="border-radius: 0px;font-size: 19px;" @click="cloaseErrorMessage()">{{
$t("button.close")
$t("button.close")
}}</Button>
</p>
</Modal>
</div>
</template>
<script>
@@ -347,6 +345,7 @@ import QRCode from "qrcodejs2";
import Clipboard from "clipboard";
import { saveAs } from 'file-saver';
import { isWeixin, getNoteUrl } from "@/libs/utils";
import html2canvas from "html2canvas";
export default {
name: 'ViewNote',
@@ -553,7 +552,7 @@ export default {
this.model.deleting = true;
let that = this;
deleteNote(this.noteForm.key).then(res => {
if (res.data&&res.data.code=="000000") {
if (res.data && res.data.code == "000000") {
storage.local.delete(that.secret.storeKey);
location.reload();
} else {
@@ -591,7 +590,7 @@ export default {
}
var bytes = new Uint8Array(e.target.result);
bytes = bytes.subarray(7,bytes.length-7);
bytes = bytes.subarray(7, bytes.length - 7);
let bytesString = bytes.join(",");
that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
//that.noteForm.escapeText = getEscapeText(that.noteForm.text);
@@ -664,6 +663,62 @@ export default {
}
}
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
saveImage() {
let canvasID = this.$refs["html2canvas"];
let that = this;
let a = document.createElement('a');
html2canvas(canvasID,{
scale: 1,
windowWidth: document.getElementById("noteText").offsetWidth,
onclone: (clonedDocument) => {
let nt = clonedDocument.getElementById("noteText");
const div = clonedDocument.createElement('div')
div.innerText = nt.value
div.style.color="black";
div.style.padding = "0px";
div.style.textAlign = "left";
div.style.wordBreak = "break-word";
div.style.whiteSpace = "pre-wrap";
div.style.verticalAlign = "top";
div.style.fontSize ="15px";
div.style.width= "100%";
div.style.border="0px";
div.style.fontFamily="'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
nt.style.display = 'none'
nt.parentElement.parentElement.style.borderLeftColor = "white";
nt.parentElement.append(div)
}
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
a.setAttribute('download', that.noteForm.key + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
}
}
</script>