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

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

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

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

@ -3,7 +3,7 @@
* @Date: 2021-12-16 16:20:16 * @Date: 2021-12-16 16:20:16
* @Description: * @Description:
* @LastEditors: ShawnPhang <https://m.palxp.cn> * @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 mutations from './mutations'
import actions from './actions' import actions from './actions'
@ -39,7 +39,7 @@ const all = {
return state.fonts return state.fonts
}, },
app: async (state: Type.Object) => { 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 return state.app
}, },
}, },

2
src/views/Index.vue
View File

@ -19,7 +19,7 @@
<widget-panel></widget-panel> <widget-panel></widget-panel>
<design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas"> <design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
<!-- 用于挡住画布溢出部分，因为使用overflow有bug --> <!-- 用于挡住画布溢出部分，因为使用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> </design-board>
<style-panel></style-panel> <style-panel></style-panel>
</div> </div>