github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

code: html2canvas draw optimized

Browse Source
This commit is contained in:
ShawnPhang 2023-09-13 17:38:49 +08:00
parent 40d5af6e5e
commit 5d1491d0d9
4 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -2,8 +2,8 @@
* @Author: ShawnPhang
* @Date: 2022-01-17 16:06:30
* @Description: Design Palxp
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-18 16:35:55
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-13 13:12:09
-->
<!DOCTYPE html>
<html lang="zh-CN">
@ -18,5 +18,6 @@
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script defer src="/snap.svg-min.js"></script>
<script defer src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</body>
</html>

30
src/components/business/save-download/CreateCover.vue
View File

@ -2,13 +2,11 @@
* @Author: ShawnPhang
* @Date: 2021-08-01 11:12:17
* @Description: 前端出图 - 用于封面
* @LastEditors: ShawnPhang <site: book.palxp.com>
* @LastEditTime: 2023-07-26 10:22:17
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-13 17:36:36
-->
<template>
<div id="cover-wrap">
<img id="cover" />
</div>
<div id="cover-wrap"></div>
</template>
<script lang="ts">
@ -22,35 +20,34 @@ export default defineComponent({
props: ['modelValue'],
emits: ['update:modelValue'],
setup(props, context) {
let gridSizeIndex: number = 0
const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
async function createCover(cb: any) {
const nowGrideSizeIndex = gridSizeIndex
const nowZoom = proxy?.dZoom
// 取消选中元素
proxy?.selectWidget({
uuid: '-1',
})
gridSizeIndex = 0
proxy?.updateZoom(100)
const opts = {
useCORS: true, // 跨域图片
scale: 0.2,
scale: 0.1,
}
setTimeout(async () => {
html2canvas(document.getElementById('page-design-canvas'), opts).then((canvas: any) => {
const clonePage: HTMLElement = document.getElementById('page-design-canvas').cloneNode(true)
clonePage.setAttribute('id', 'clone-page')
document.body.appendChild(clonePage)
html2canvas(document.getElementById('clone-page'), opts).then((canvas: any) => {
canvas.toBlob(
async (blobObj: Blob) => {
const result: any = await Qiniu.upload(blobObj, { bucket: 'xp-design', prePath: 'cover/user' })
cb(result)
},
'image/jpeg',
0.1,
0.15,
)
gridSizeIndex = nowGrideSizeIndex
proxy?.updateZoom(nowZoom)
clonePage.remove()
})
}, 10)
}
@ -68,9 +65,10 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
#cover-wrap {
<style lang="less">
#clone-page {
position: absolute;
left: -9999px;
z-index: 99999;
left: -99999px;
}
</style>

4
src/store/modules/base/index.ts
View File

@ -3,7 +3,7 @@
* @Date: 2021-12-16 16:20:16
* @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn>
* @LastEditTime: 2023-09-07 17:40:32
* @LastEditTime: 2023-09-13 10:05:03
*/
import mutations from './mutations'
import actions from './actions'
@ -39,7 +39,7 @@ const all = {
return state.fonts
},
app: async (state: Type.Object) => {
!state.app && (state.app = await client('https://res.palxp.cn:5001'))
!state.app && (state.app = await client('https://kt.palxp.com'))
return state.app
},
},

2
src/views/Index.vue
View File

@ -19,7 +19,7 @@
<widget-panel></widget-panel>
<design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
<!-- 用于挡住画布溢出部分，因为使用overflow有bug -->
<div class="shelter" :style="{ width: (dPage.width * dZoom) / 100 + 'px', height: (dPage.height * dZoom) / 100 + 'px' }"></div>
<div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
</design-board>
<style-panel></style-panel>
</div>