picture_edit 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/picture-edit.js +1 -1
- package/package.json +2 -1
- package/README_CN.md +0 -45
- package/favicon.ico +0 -0
- package/index.html +0 -44
- package/src/assets/cancel.svg +0 -1
- package/src/assets/delete.svg +0 -1
- package/src/assets/painting.svg +0 -1
- package/src/assets/painting_cancel.svg +0 -1
- package/src/assets/pin_to_top.svg +0 -1
- package/src/assets/return.svg +0 -1
- package/src/assets/rotate.svg +0 -1
- package/src/assets/save.svg +0 -1
- package/src/assets/scale.svg +0 -1
- package/src/assets/test1.jpg +0 -0
- package/src/assets/test2.jpg +0 -0
- package/src/assets/text.svg +0 -1
- package/src/index.js +0 -113
- package/src/lib/GLOBAL.js +0 -76
- package/src/lib/Utils.js +0 -101
- package/src/lib/listeners.js +0 -539
- package/src/lib/vconsole.min.js +0 -10
- package/src/template/frame.html +0 -28
- package/src/template/frame.less +0 -143
- package/webpack.config.js +0 -51
package/README.md
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
# Introduction
|
|
2
2
|
A mobile image editor written with native js and canvas
|
|
3
3
|
|
|
4
|
+
# Source code
|
|
5
|
+
https://github.com/lijibing01/picture_edit
|
|
6
|
+
|
|
4
7
|
# Usage
|
|
5
|
-
1.
|
|
8
|
+
1. yarn add picture_edit
|
|
9
|
+
2. import * as PED from 'picture_edit'
|
|
10
|
+
3. new PED.drawing(url, options)
|
|
11
|
+
4. refer to https://github.com/lijibing01/picture_edit/blob/master/index.html
|
|
6
12
|
|
|
7
|
-
#
|
|
13
|
+
# Options
|
|
8
14
|
| Parameter Name | Default Value | Type | Description |
|
|
9
15
|
|---------|-------|------|------|
|
|
10
16
|
| spaceLeft | 30 | number | Initialize the left and right spacing of the image |
|
package/dist/picture-edit.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.PED=e():t.PED=e()}(self,(()=>(()=>{"use strict";var t={594:(t,e,i)=>{i.d(e,{A:()=>c});var n=i(601),o=i.n(n),a=i(314),M=i.n(a)()(o());M.push([t.id,".picture-edit-frame {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n}\n.picture-edit-frame .body-content {\n flex: 1;\n background-color: #fff;\n overflow: auto;\n will-change: transform;\n}\n.picture-edit-frame .cancel-btn {\n position: fixed;\n left: 15px;\n top: 15px;\n padding: 5px 13px;\n background-color: white;\n color: black;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .save-btn {\n position: fixed;\n right: 15px;\n top: 15px;\n padding: 5px 13px;\n background-color: white;\n color: white;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .cancel-test {\n position: fixed;\n right: 125px;\n top: 15px;\n padding: 5px 13px;\n background-color: #67c23a;\n color: white;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .canvas-box {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n.picture-edit-frame .footer-content {\n background-color: #000;\n height: 6em;\n display: flex;\n text-align: center;\n color: #fff;\n align-items: flex-start;\n}\n.picture-edit-frame .operate-item {\n display: block;\n margin-top: 25px;\n width: 10px;\n flex: 1;\n}\n.picture-edit-frame .operate-img {\n width: 1.3em;\n height: 1.3em;\n}\n.picture-edit-frame .text-content {\n position: absolute;\n inset: 0px;\n overflow: hidden;\n z-index: 2;\n display: none;\n background-color: white;\n opacity: 0.93;\n}\n.picture-edit-frame .text-content .text-input {\n min-height: 15%;\n border-radius: 5px;\n border: 2px solid #63eca1;\n outline: none;\n width: 96%;\n box-sizing: border-box;\n position: absolute;\n top: 8%;\n left: 2%;\n right: 2%;\n z-index: 2;\n padding: 3px 5px;\n}\n.picture-edit-frame .icon-rotate {\n width: 18px;\n position: absolute;\n right: -5px;\n bottom: -22px;\n}\n.picture-edit-frame .icon-remove {\n width: 18px;\n position: absolute;\n left: -5px;\n bottom: -22px;\n}\n.picture-edit-frame .icon-scale {\n width: 18px;\n position: absolute;\n right: -5px;\n top: -22px;\n}\n.picture-edit-frame .operate-rotate {\n position: absolute;\n width: 20px;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n}\n.picture-edit-frame .operate-scale {\n position: absolute;\n width: 16px;\n height: 16px;\n background-color: #fff;\n right: -8px;\n top: -8px;\n border-radius: 50%;\n box-sizing: border-box;\n}\n",""]);const c=M},314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",n=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),n&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),n&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,n,o,a){"string"==typeof t&&(t=[[null,t,void 0]]);var M={};if(n)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(M[s]=!0)}for(var d=0;d<t.length;d++){var r=[].concat(t[d]);n&&M[r[0]]||(void 0!==a&&(void 0===r[5]||(r[1]="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {").concat(r[1],"}")),r[5]=a),i&&(r[2]?(r[1]="@media ".concat(r[2]," {").concat(r[1],"}"),r[2]=i):r[2]=i),o&&(r[4]?(r[1]="@supports (".concat(r[4],") {").concat(r[1],"}"),r[4]=o):r[4]="".concat(o)),e.push(r))}},e}},601:t=>{t.exports=function(t){return t[1]}},72:t=>{var e=[];function i(t){for(var i=-1,n=0;n<e.length;n++)if(e[n].identifier===t){i=n;break}return i}function n(t,n){for(var a={},M=[],c=0;c<t.length;c++){var s=t[c],d=n.base?s[0]+n.base:s[0],r=a[d]||0,g="".concat(d," ").concat(r);a[d]=r+1;var l=i(g),I={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==l)e[l].references++,e[l].updater(I);else{var u=o(I,n);n.byIndex=c,e.splice(c,0,{identifier:g,updater:u,references:1})}M.push(g)}return M}function o(t,e){var i=e.domAPI(e);return i.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;i.update(t=e)}else i.remove()}}t.exports=function(t,o){var a=n(t=t||[],o=o||{});return function(t){t=t||[];for(var M=0;M<a.length;M++){var c=i(a[M]);e[c].references--}for(var s=n(t,o),d=0;d<a.length;d++){var r=i(a[d]);0===e[r].references&&(e[r].updater(),e.splice(r,1))}a=s}}},659:t=>{var e={};t.exports=function(t,i){var n=function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}e[t]=i}return e[t]}(t);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(i)}},540:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},56:(t,e,i)=>{t.exports=function(t){var e=i.nc;e&&t.setAttribute("nonce",e)}},825:t=>{t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(i){!function(t,e,i){var n="";i.supports&&(n+="@supports (".concat(i.supports,") {")),i.media&&(n+="@media ".concat(i.media," {"));var o=void 0!==i.layer;o&&(n+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),n+=i.css,o&&(n+="}"),i.media&&(n+="}"),i.supports&&(n+="}");var a=i.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(n,t,e.options)}(e,t,i)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},113:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},439:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM5NzEyNTI2NjQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY5MTQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTYzOS4xMjUgNTEybDIxNy45Njg3NS0yMTcuOTY4NzVjMTQuNDM3NS0xNC40Mzc1IDE0LjQzNzUtNDAuMDMxMjUgMC01NC40Njg3NWwtNzIuNjU2MjUtNzIuNjU2MjVjLTE0LjQzNzUtMTQuNDM3NS00MC4xMjUtMTQuNDM3NS01NC40Njg3NSAwTDUxMiAzODQuNzgxMjUgMjk0LjAzMTI1IDE2Ni44MTI1Yy0xNC40Mzc1LTE0LjQzNzUtNDAuMTI1LTE0LjQzNzUtNTQuNDY4NzUgMGwtNzIuNjU2MjUgNzIuNjU2MjVjLTE0LjQzNzUgMTQuNDM3NS0xNC40Mzc1IDQwLjEyNSAwIDU0LjQ2ODc1TDM4NC43ODEyNSA1MTIgMTY2LjgxMjUgNzI5Ljk2ODc1Yy0xNC40Mzc1IDE0LjQzNzUtMTQuNDM3NSA0MC4xMjUgMCA1NC40Njg3NWw3Mi42NTYyNSA3Mi42NTYyNWMxNC40Mzc1IDE0LjQzNzUgNDAuMTI1IDE0LjQzNzUgNTQuNDY4NzUgMEw1MTIgNjM5LjEyNWwyMTcuOTY4NzUgMjE3Ljk2ODc1YzE0LjQzNzUgMTQuNDM3NSA0MC4xMjUgMTQuNDM3NSA1NC40Njg3NSAwbDcyLjY1NjI1LTcyLjY1NjI1YzE0LjQzNzUtMTQuNDM3NSAxNC40Mzc1LTQwLjAzMTI1IDAtNTQuNDY4NzVMNjM5LjEyNSA1MTJ6IiBwLWlkPSI2OTE1Ij48L3BhdGg+PC9zdmc+"},568:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxNDcwNjI5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMzAgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4MTMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4Ljc1IiBoZWlnaHQ9IjEyOCI+PHBhdGggZD0iTTQwOS42IDg5NmMtMTkuMiAwLTMyLTEyLjgtMzItMzJWMzY0LjhjMC0xOS4yIDEyLjgtMzIgMzItMzJzMzIgMTIuOCAzMiAzMnY0OTIuOGMwIDI1LjYtMTIuOCAzOC40LTMyIDM4LjR6TTYxNC40IDg4OS42Yy0xOS4yIDAtMzItMTIuOC0zMi0zMlYzNzEuMmMwLTE5LjIgMTIuOC0zMiAzMi0zMnMzMiAxMi44IDMyIDMydjQ4MGMwIDI1LjYtMTIuOCAzOC40LTMyIDM4LjR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI1ODE0Ij48L3BhdGg+PHBhdGggZD0iTTc1NS4yIDEwMjRIMjY4LjhjLTQ0LjggMC03Ni44LTM4LjQtNzYuOC04OS42VjMzOS4yYzAtMTkuMiAxMi44LTM4LjQgMzguNC0zOC40czM4LjQgMTkuMiAzOC40IDM4LjR2NTk1LjJjMCA2LjQgNi40IDEyLjggNi40IDEyLjhoNDg2LjRWMzM5LjJjMC0xOS4yIDE5LjItMzguNCAzOC40LTM4LjRzMzIgMTkuMiAzMiAzOC40djU5NS4yYzAgNTEuMi0zMiA4OS42LTc2LjggODkuNnpNOTg1LjYgMTg1LjZoLTI0My4yVjgzLjJDNzQyLjQgMzguNCA3MDQgMCA2NTIuOCAwSDM3MS4yQzMyMCAwIDI4MS42IDM4LjQgMjgxLjYgODMuMlYxODUuNkgzOC40Yy0xOS4yIDAtMzguNCAxOS4yLTM4LjQgMzguNHMxOS4yIDM4LjQgMzguNCAzOC40SDk5MmMxOS4yIDAgMzguNC0xOS4yIDM4LjQtMzguNHMtMjUuNi0zOC40LTQ0LjgtMzguNHpNMzU4LjQgODMuMmMwLTYuNCA2LjQtMTIuOCAxMi44LTEyLjhoMjg4YzYuNCAwIDEyLjggNi40IDEyLjggMTIuOHY4OS42YzAgNi40LTYuNCAxMi44LTEyLjggMTIuOEgzNzEuMmMtNi40IDAtMTIuOC02LjQtMTIuOC0xMi44VjgzLjJ6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI1ODE1Ij48L3BhdGg+PC9zdmc+"},270:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzM5NTE2MzAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTc0NS43NiAzNjkuODZsLTQ1MSA1MzcuNDhhMTguNjkzIDE4LjY5MyAwIDAgMS04LjQ2IDUuNzRsLTEzNi41OCA0NS4yN2MtMTMuMjQgNC4zOS0yNi40Ni02LjcxLTI0LjQzLTIwLjVsMjAuODYtMTQyLjM2YzAuNS0zLjQ0IDEuOTUtNi42NyA0LjE5LTkuMzNsNDUxLTUzNy40OGM2LjY1LTcuOTMgMTguNDctOC45NiAyNi40LTIuMzFsMTE1LjcxIDk3LjFjNy45MiA2LjY0IDguOTYgMTguNDYgMi4zMSAyNi4zOXpNODk0LjUzIDE5Mi41NmwtNjUuOSA3OC41M2MtNi42NSA3LjkzLTE4LjQ3IDguOTYtMjYuNCAyLjMxbC0xMTUuNzEtOTcuMWMtNy45My02LjY1LTguOTYtMTguNDctMi4zMS0yNi40bDY1LjktNzguNTNjNi42NS03LjkzIDE4LjQ3LTguOTYgMjYuNC0yLjMxbDExNS43MSA5Ny4xYzcuOTMgNi42NSA4Ljk2IDE4LjQ3IDIuMzEgMjYuNHoiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjI2NTkiPjwvcGF0aD48L3N2Zz4="},571:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxMjY4NDEyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTY4IiBoZWlnaHQ9IjE2OCI+PHBhdGggZD0iTTUuODM1MDkzIDMyOS4zODY2NjdhMzUuNDU2IDM1LjQ1NiAwIDAgMCA4LjE5MiAxMS4yNjRsMjA0LjI4OCAyMDIuNjY2NjY2YTQ4LjIxMzMzMyA0OC4yMTMzMzMgMCAwIDAgNjcuODgyNjY3IDAgNDYuOTMzMzMzIDQ2LjkzMzMzMyAwIDAgMCAwLTY3LjM3MDY2NkwxNjQuMjk5MDkzIDM1NC45NDRoNDcyLjgzMmMxNDYuMTMzMzMzIDAgMjY0LjQ0OCAxMTcuNDE4NjY3IDI2NC40NDggMjYyLjQ0MjY2N3MtMTE4LjMxNDY2NyAyNjIuNDQyNjY3LTI2NC40NDggMjYyLjQ0MjY2NkgxNTYuMDY0NDI3YTQ4LjEyOCA0OC4xMjggMCAwIDAtNDguMzg0IDQ4YzAgMjYuNTgxMzMzIDIxLjYzMiA0OCA0OC4zODQgNDhoNDgxLjA2NjY2NmMxOTkuMDgyNjY3IDAgMzYwLjY2MTMzMy0xNjAuMjk4NjY3IDM2MC42NjEzMzQtMzU3LjkzMDY2NiAwLTE5Ny41ODkzMzMtMTYxLjU3ODY2Ny0zNTcuOTczMzMzLTM2MC42NjEzMzQtMzU3Ljk3MzMzNEgxNjQuMjk5MDkzbDEyMS44OTg2NjctMTIxLjQ3MmE0Ny4zNiA0Ny4zNiAwIDAgMCAwLTY3LjQxMzMzMyA0Ny43ODY2NjcgNDcuNzg2NjY3IDAgMCAwLTY3Ljg4MjY2NyAwTDE0LjAyNzA5MyAyNzMuMjM3MzMzYy0xNC45MzMzMzMgMTQuNzYyNjY3LTE4LjM0NjY2NyAzNy43MTczMzMtOC4xOTIgNTYuMTkyeiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDQ0MSI+PC9wYXRoPjwvc3ZnPg=="},186:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM5NzEyODM0MTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY5MzkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTMyMyAxNTRIMjEyYy0xNS40NjQgMC0yOCAxMi41MzYtMjggMjh2NjYwYzAgMTUuNDY0IDEyLjUzNiAyOCAyOCAyOGgzMlY2NTUuMjU1YTY4IDY4IDAgMCAxIDE5LjkxNy00OC4wODNsNTEuMjU1LTUxLjI1NUE2OCA2OCAwIDAgMSAzNjMuMjU1IDUzNmgyOTcuNDlhNjggNjggMCAwIDEgNDguMDgzIDE5LjkxN2w1MS4yNTUgNTEuMjU1QTY4IDY4IDAgMCAxIDc4MCA2NTUuMjU1Vjg3MGgzMmMxNS40NjQgMCAyOC0xMi41MzYgMjgtMjhWMzU1LjUxYTI4IDI4IDAgMCAwLTguMjAxLTE5LjhMNzAxIDIwNC45MTNWMzcyYzAgMTkuODgyLTE2LjExOCAzNi0zNiAzNkgzNTljLTE5Ljg4MiAwLTM2LTE2LjExOC0zNi0zNlYxNTR6IG03MiAwdjE4MmgyMzRWMTU0SDM5NXogbTUxNyAyMDEuNTFWODQyYzAgNTUuMjI4LTQ0Ljc3MiAxMDAtMTAwIDEwMEgyMTJjLTU1LjIyOCAwLTEwMC00NC43NzItMTAwLTEwMFYxODJjMC01NS4yMjggNDQuNzcyLTEwMCAxMDAtMTAwaDQyNi40OWExMDAgMTAwIDAgMCAxIDcwLjcxMSAyOS4yOWwxNzMuNTEgMTczLjUwOUExMDAgMTAwIDAgMCAxIDkxMiAzNTUuNTA5ek02NTkuMDg4IDYwOEgzNjQuOTEyTDMxNiA2NTYuOTEyVjg3MGgzOTJWNjU2LjkxMkw2NTkuMDg4IDYwOHpNNTMwLjUgMjA5LjVjMC0xOS44ODIgMTYuMTE4LTM2IDM2LTM2czM2IDE2LjExOCAzNiAzNnY2NS4xNjRjMCAxOS44ODMtMTYuMTE4IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzZWMjA5LjV6IiBmaWxsPSIjMzMzMzMzIiBwLWlkPSI2OTQwIj48L3BhdGg+PC9zdmc+"},604:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxMTY0ODI1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMzNDQiIHdpZHRoPSIxNjgiIGhlaWdodD0iMTY4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTg5NiA5MjhIMTI4YTMyIDMyIDAgMCAxLTMyLTMyVjEyOGEzMiAzMiAwIDAgMSAzMi0zMmg3NjhhMzIgMzIgMCAwIDEgMzIgMzJ2NzY4YTMyIDMyIDAgMCAxLTMyIDMyeiBtLTczNi02NGg3MDR2LTcwNGgtNzA0eiIgcC1pZD0iMzM0NSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik03MDQgMzUySDMyMGEzMiAzMiAwIDAgMSAwLTY0aDM4NGEzMiAzMiAwIDAgMSAwIDY0eiIgcC1pZD0iMzM0NiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNzM2YTMyIDMyIDAgMCAxLTMyLTMyVjMyMGEzMiAzMiAwIDAgMSA2NCAwdjM4NGEzMiAzMiAwIDAgMS0zMiAzMnoiIHAtaWQ9IjMzNDciIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4="}},e={};function i(n){var o=e[n];if(void 0!==o)return o.exports;var a=e[n]={id:n,exports:{}};return t[n](a,a.exports,i),a.exports}i.m=t,i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.b=document.baseURI||self.location.href,i.nc=void 0;var n={};i.r(n),i.d(n,{drawing:()=>q});const o=`<div class="picture-edit-frame"> <div class="cancel-btn" operate="cancel"> <img src="${new URL(i(439),i.b)}" class="operate-img" operate="cancel"> </div> <div class="save-btn" operate="save"> <img src="${new URL(i(186),i.b)}" class="operate-img" operate="save"> </div> <div class="body-content"> <div class="canvas-box"></div> </div> <div class="footer-content"> <div class="operate-item" operate="line"> <img src="${new URL(i(270),i.b)}" class="operate-img" operate="line"> </div> <div class="operate-item" operate="text"> <img src="${new URL(i(604),i.b)}" class="operate-img" operate="text"> </div> <div class="operate-item" operate="back"> <img src="${new URL(i(571),i.b)}" class="operate-img" operate="back"> </div> <div class="operate-item" operate="clear"> <img src="${new URL(i(568),i.b)}" class="operate-img" operate="clear"> </div> </div> <div class="text-content"> <div contenteditable="true" class="text-input"></div> </div> </div>`;let a={};function M(t={}){a={initOptions:{spaceLeft:30,spaceTop:30,fontSize:14,fontPaddingLeft:3,fontPaddingTop:5,fontRaduis:5,fontLineHeight:1.2,fontLineWidth:5,fontShadowBlur:5,maxScale:2,operatePaddingLeft:28,operatePaddingTop:10,fontColor:"#000000",fontBgColor:"#ffffff",fontFamily:"Arial",textOperateColor:"#884cf3",getDataURL:()=>{},outType:"image/jpeg",encoderOptions:1,...t},imgInstance:void 0,img:{width:0,height:0,WH:0,HW:0},device:{width:0,height:0,dpr:1},operateType:0,canvas:void 0,canvasContext:void 0,canvasInitCssSize:{width:0,height:0},canvasBox:void 0,ped:void 0,pedEdit:void 0,editSize:{width:0,height:0},preScale:1,currentScale:1,scrollPercent:{width:1,height:1},outerPosition:{x:0,y:0},screenPosition:{x:0,y:0},textContent:void 0,textInput:void 0,touchType:"",textId:2,textsInfo:{},steps:[]}}function c(){a.pedEdit.style.overflow="hidden"}function s(){a.pedEdit.style.overflow="auto"}function d(){a.ped.remove(),M()}function r(t){t.stopPropagation(),t.preventDefault()}function g(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function l(t){const e=t[1].clientX-t[0].clientX,i=t[1].clientY-t[0].clientY;return Math.hypot(e,i)}var I=i(270);let u=0,x=1,p=null,N=null,z=null,T={coefficient:1,left:0,top:0},y={id:void 0,x:0,y:0,scale:1,left:0,top:0},j={x:0,y:0,centerX:0,centerY:0,initialRotation:0,startAngle:0},L={x:0,y:0,initFontSize:14,centerX:0,centerY:0,initialScale:1,initLength:0};function h(){a.ped.addEventListener("click",(t=>{const e=t.target.getAttribute("operate");if(e)if("cancel"===e)d();else if("save"===e){!function(){const t=a.canvas.getBoundingClientRect(),e=a.canvas.width/t.width;Object.keys(a.textsInfo).forEach((i=>{const n=a.textsInfo[i],o=n.dom;o.style.cssText=`${o.style.cssText}; transform: translate(${n.x}px, ${n.y}px) rotate(0deg)`;const M=o.getBoundingClientRect();!function(t,e,i,n){const o=a.canvasContext;o.save();const M=i.width*t,c=i.height*t,s=(i.left-n.left)*t,d=(i.top-n.top)*t,r=e.fontSize/a.initOptions.fontSize*a.initOptions.fontRaduis*t,g=e.fontSize*t,l=s+M/2,I=d+c/2;o.translate(l,I),o.rotate(e.rotate*Math.PI/180),o.translate(-l,-I),o.beginPath(),o.moveTo(s+r,d),o.arcTo(s+M,d,s+M,d+r,r),o.arcTo(s+M,d+c,s+M-r,d+c,r),o.arcTo(s,d+c,s,d+c-r,r),o.arcTo(s,d,s+r,d,r),o.closePath(),o.fillStyle="white",o.lineWidth=1,o.lineCap="butt",o.lineJoin="miter",o.shadowBlur=0,o.shadowColor="#ffffff",o.strokeStyle="white",o.fill(),o.stroke(),o.font=`${Math.round(g)}px ${a.initOptions.fontFamily}`,o.textAlign="left",o.textBaseline="middle",o.fillStyle="black";const u=g*a.initOptions.fontLineHeight,x=g/a.initOptions.fontSize/t,p=s+a.initOptions.fontPaddingTop*t*x,N=d+a.initOptions.fontPaddingLeft*t*x+u/2;e.textArray.forEach(((t,e)=>{const i=N+e*u;o.fillText(t,p,i)})),o.restore()}(e,n,M,t)}))}();const t=a.canvas.toDataURL(a.initOptions.outType,a.initOptions.encoderOptions);a.initOptions.getDataURL(t),d()}else if("line"===e)1===a.operateType?(a.operateType=0,s()):(a.operateType=1,c()),z="DIV"===t.target.tagName?t.target.firstElementChild:t.target,z.src=0===a.operateType?I:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzM5NTE2MzAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTc0NS43NiAzNjkuODZsLTQ1MSA1MzcuNDhhMTguNjkzIDE4LjY5MyAwIDAgMS04LjQ2IDUuNzRsLTEzNi41OCA0NS4yN2MtMTMuMjQgNC4zOS0yNi40Ni02LjcxLTI0LjQzLTIwLjVsMjAuODYtMTQyLjM2YzAuNS0zLjQ0IDEuOTUtNi42NyA0LjE5LTkuMzNsNDUxLTUzNy40OGM2LjY1LTcuOTMgMTguNDctOC45NiAyNi40LTIuMzFsMTE1LjcxIDk3LjFjNy45MiA2LjY0IDguOTYgMTguNDYgMi4zMSAyNi4zOXpNODk0LjUzIDE5Mi41NmwtNjUuOSA3OC41M2MtNi42NSA3LjkzLTE4LjQ3IDguOTYtMjYuNCAyLjMxbC0xMTUuNzEtOTcuMWMtNy45My02LjY1LTguOTYtMTguNDctMi4zMS0yNi40bDY1LjktNzguNTNjNi42NS03LjkzIDE4LjQ3LTguOTYgMjYuNC0yLjMxbDExNS43MSA5Ny4xYzcuOTMgNi42NSA4Ljk2IDE4LjQ3IDIuMzEgMjYuNHoiIGZpbGw9IiMxMjk2ZGIiIHAtaWQ9IjI2NTkiPjwvcGF0aD48L3N2Zz4=";else if("text"===e)R(),a.textContent.style.display="block",a.textInput.focus(),a.textInput.addEventListener("blur",D);else if("back"===e){if(R(),a.steps.length){const t=a.steps.pop();if("line"===t.type){!function(){const t=a.canvasContext;t.clearRect(0,0,a.canvas.width,a.canvas.height),t.drawImage(a.imgInstance,0,0,a.img.width,a.img.height,0,0,a.canvas.width,a.canvas.height)}();const t=a.canvasContext;t.lineWidth=a.initOptions.fontLineWidth*a.device.dpr,t.lineCap="round",t.lineJoin="round",t.shadowBlur=a.initOptions.fontShadowBlur,t.shadowColor="#000000",a.steps.forEach((e=>{"line"===e.type&&(t.beginPath(),t.moveTo(e.start.x,e.start.y),e.moves.forEach((e=>{t.lineTo(e.x,e.y),t.stroke()})))}))}else if("creat_text"===t.type){const e=t.textId;a.textsInfo[e].dom.remove(),delete a.textsInfo[e]}else if("move_text"===t.type){const e=t.textId,i=t.x*a.currentScale/t.scale,n=t.y*a.currentScale/t.scale;a.textsInfo[e].x=i,a.textsInfo[e].y=n,a.textsInfo[e].dom.style.cssText=`${a.textsInfo[e].dom.style.cssText}; transform: translate(${i}px, ${n}px) rotate(${a.textsInfo[e].rotate}deg);`}else if("scale_text"===t.type){const e=t.textId,i=a.textsInfo[e],n=t.fontSize*a.currentScale/t.scale;i.fontSize=n,i.dom.style.cssText=`${i.dom.style.cssText};\n font-size: ${n}px;\n line-height: ${n*a.initOptions.fontLineHeight}px;\n border-radius: ${a.initOptions.fontRaduis*(n/a.initOptions.fontSize)}px;\n padding: ${a.initOptions.fontPaddingLeft*(n/a.initOptions.fontSize)}px ${a.initOptions.fontPaddingTop*(n/a.initOptions.fontSize)}px;`;const o=i.dom.getBoundingClientRect();i.width=o.width,i.height=o.height}else if("rotate_text"===t.type){const e=t.textId,i=a.textsInfo[e];i.rotate=t.rotate,i.dom.style.cssText=`${i.dom.style.cssText}; \n transform: translate(${i.x}px, ${i.y}px) rotate(${t.rotate}deg);`}}}else"clear"===e&&d()})),a.canvas.addEventListener("touchstart",(t=>{if(1===t.touches.length){if(1===a.operateType){r(t);const e=t.touches[0];a.canvasContext.beginPath(),a.canvasContext.lineWidth=a.initOptions.fontLineWidth*a.device.dpr,a.canvasContext.lineCap="round",a.canvasContext.lineJoin="round",a.canvasContext.shadowBlur=a.initOptions.fontShadowBlur,a.canvasContext.shadowColor="#000000";const i=a.canvas.getBoundingClientRect(),n=e.clientX-i.left,o=e.clientY-i.top,M=a.canvas.width/i.width;T={coefficient:M,left:i.left,top:i.top};const c=n*M,s=o*M;a.canvasContext.moveTo(c,s),a.steps.push({type:"line",start:{x:c,y:s},moves:[]})}}else if(2===t.touches.length){r(t),R(),c(),Object.keys(a.textsInfo).forEach((t=>{const e=a.textsInfo[t];e.dom.style.cssText=`${e.dom.style.cssText}; display: none;`})),a.touchType="scaleCanvas",a.preScale=a.currentScale,x=1,u=l(t.touches);const e=t.touches[0],i=t.touches[1],n=(e.clientX+i.clientX)/2,o=(e.clientY+i.clientY)/2,M=a.canvas.getBoundingClientRect(),s=a.canvasBox.getBoundingClientRect();a.screenPosition={x:n,y:o},a.outerPosition={x:n-s.left,y:o-s.top},a.canvas.style.transformOrigin=`${n-M.left}px ${o-M.top}px`}}));const t=function(t){let e=0;return function(...i){const n=Date.now();n-e<16||(e=n,t.apply(this,i))}}((t=>{!function(t){const e=l(t.touches)/u;x=e,a.canvas.style.transform=`scale(${e})`}(t)}));a.canvas.addEventListener("touchmove",(e=>{if(1===e.touches.length){if(1===a.operateType){r(e);const t=e.touches[0],i=t.clientX-T.left,n=t.clientY-T.top,o=i*T.coefficient,M=n*T.coefficient;a.canvasContext.lineTo(o,M),a.canvasContext.stroke();let c=a.steps.length-1;a.steps[c].moves.push({x:o,y:M})}}else 2===e.touches.length&&1!==a.operateType&&"scaleCanvas"===a.touchType&&(r(e),t(e))})),a.canvas.addEventListener("touchend",(t=>{if(0===t.touches.length&&"scaleCanvas"===a.touchType){u=0,a.touchType="";const t=a.canvasBox.getBoundingClientRect(),e=t.width,i=t.height,n=e*x,o=i*x,M=a.canvas.getBoundingClientRect();a.canvas.style.cssText=`width: ${M.width}px; height: ${M.height}; transform: scale(1); transform-origin: center`,a.canvasBox.style.cssText=`width: ${n}px; height: ${o}px`,a.pedEdit.scrollTo(n/e*a.outerPosition.x-a.screenPosition.x,o/i*a.outerPosition.y-a.screenPosition.y),a.currentScale=n/a.editSize.width;const c=a.currentScale/a.preScale;Object.keys(a.textsInfo).forEach((t=>{const e=a.textsInfo[t];e.x=e.x*c,e.y=e.y*c,e.fontSize=e.fontSize*c,e.width=e.width*c,e.height=e.height*c,e.dom.style.cssText=`${e.dom.style.cssText};\n font-size: ${e.fontSize}px;\n line-height: ${e.fontSize*a.initOptions.fontLineHeight}px;\n padding: ${a.initOptions.fontPaddingLeft*a.currentScale}px ${a.initOptions.fontPaddingTop*a.currentScale}px;\n border-radius: ${a.initOptions.fontRaduis*a.currentScale}px; \n transform: translate(${e.x}px, ${e.y}px) rotate(${e.rotate}deg);\n display: block;`}))}s()}))}function D(){if(a.textInput.innerText.length){let t=a.textInput.innerText.split(/[\n\r]/);const e=a.initOptions.fontSize*a.currentScale;let i=`<div style="position: absolute;\n left: 0;\n top: 0;\n user-select: none;\n color: ${a.initOptions.fontColor};\n font-size: ${e}px;\n line-height: ${e*a.initOptions.fontLineHeight}px;\n background-color: ${a.initOptions.fontBgColor};\n padding: ${a.initOptions.fontPaddingLeft*a.currentScale}px ${a.initOptions.fontPaddingTop*a.currentScale}px;\n border-radius: ${a.initOptions.fontRaduis*a.currentScale}px;\n white-space: nowrap;\n z-index: ${a.textId}">`;for(let e=0;e<t.length;e++)i=i+t[e]+""+(e==t.length-1?"":"</br>");i+="</div>";let n=g(i);a.canvasBox.appendChild(n);const o=a.canvasBox.getBoundingClientRect(),M=n.getBoundingClientRect(),c=a.editSize.height/2-o.top-M.height/2,s=a.editSize.width/2-o.left-M.width/2;n.style.cssText=`${n.style.cssText}; transform: translate(${s}px, ${c}px) rotate(0deg);`;const d=a.textId++;n.dataset.pedTextId=d,a.textsInfo[d]={textArray:t,x:s,y:c,rotate:0,fontSize:e,fontColor:a.initOptions.fontColor,fontBgColor:a.initOptions.fontBgColor,width:M.width,height:M.height,dom:n},a.steps.push({type:"creat_text",textId:d}),n.addEventListener("touchstart",m),n.addEventListener("touchmove",w),n.addEventListener("touchend",v),n.addEventListener("click",f),a.textInput.innerText=""}a.textInput.removeEventListener("blur",D),a.textContent.style.display="none"}function f(t){r(t),function(t){A();const e=t.dataset.pedTextId;N=a.textsInfo[e];const i=`<div style="position: absolute;\n width: ${N.width+2*a.initOptions.operatePaddingLeft}px;\n height: ${N.height+2*a.initOptions.operatePaddingTop}px;\n left: ${N.x-a.initOptions.operatePaddingLeft}px;\n top: ${N.y-a.initOptions.operatePaddingTop}px;\n border: 2px solid ${a.initOptions.textOperateColor};\n box-sizing: border-box;\n border-radius: 2px;\n background: transparent;\n transform: rotate(${N.rotate}deg);">\n </div>`;p=g(i);const n=g('<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQzMTI1Mjg3MTE5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc1NDUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTkyOSA4NDlhMzAgMzAgMCAwIDEtMzAtMzB2LTgzLjEzN2E0NDcuNTE0IDQ0Ny41MTQgMCAwIDEtNzAuOTIxIDkyLjIwOUM3MjIuOTM1IDkzMy4yMjUgNTc4LjQ0MiA5NzUuMDA4IDQ0MiA5NTMuNDgyYTQ0NC45MTcgNDQ0LjkxNyAwIDAgMS0yNDEuMTM5LTEyMC41OTEgMzAgMzAgMCAxIDEgMzcuMjU4LTQ3LjAxbDAuMjMxLTAuMjMxQTM4NS4xNzUgMzg1LjE3NSAwIDAgMCA0NDIgODkyLjYyNXYtMC4wMDZjMTIwLjg1NSAyMi4xMjMgMjUwLjIwNi0xMy41MTkgMzQzLjY1Ni0xMDYuOTc1YTM4Ni42NDYgMzg2LjY0NiAwIDAgMCA3MC42LTk2LjY1M2gtODcuMjQ3YTMwIDMwIDAgMCAxIDAtNjBIOTI5YTMwIDMwIDAgMCAxIDMwIDMwVjgxOWEzMCAzMCAwIDAgMS0zMCAzMHpNNjMyIDM0MmE1MCA1MCAwIDAgMSA1MCA1MHYyNDBhNTAgNTAgMCAwIDEtNTAgNTBIMzkyYTUwIDUwIDAgMCAxLTUwLTUwVjM5MmE1MCA1MCAwIDAgMSA1MC01MGgyNDB6TTQwMiA2MDdhMTUgMTUgMCAwIDAgMTUgMTVoMTkwYTE1IDE1IDAgMCAwIDE1LTE1VjQxN2ExNSAxNSAwIDAgMC0xNS0xNUg0MTdhMTUgMTUgMCAwIDAtMTUgMTV2MTkweiBtNDAzLjAwNS0zNjIuMDI1YTI5Ljg3IDI5Ljg3IDAgMCAxLTE5LjExNy02Ljg4MmwtMC4yMzIgMC4yMzFBMzg2LjUgMzg2LjUgMCAwIDAgNjg5LjQ3OCAxNjhoLTAuMDExYy0xNDUuNjQ2LTc1LjE4Mi0zMjkuMDIxLTUxLjc0Ny00NTEuMTE3IDcwLjM1YTM4Ni42MTUgMzg2LjYxNSAwIDAgMC03MC42IDk2LjY1SDI1NWEzMCAzMCAwIDAgMSAwIDYwSDk1YTMwIDMwIDAgMCAxLTMwLTMwVjIwNWEzMCAzMCAwIDAgMSA2MCAwdjgzLjEyOWE0NDcuNTM0IDQ0Ny41MzQgMCAwIDEgNzAuOTIzLTkyLjIwNkMzMTcuOTgxIDczLjg2NiA0OTMuMDQ4IDM3LjIgNjQ3IDg1LjgzNnYtMC4wNDVhNDQ0Ljg4MyA0NDQuODgzIDAgMCAxIDE3Ni4xNDMgMTA1LjI5MSAzMCAzMCAwIDAgMS0xOC4xMzggNTMuODkzeiIgZmlsbD0iIzJjMmMyYyIgcC1pZD0iNzU0NiI+PC9wYXRoPjwvc3ZnPg==" class="operate-rotate" />');n.addEventListener("touchstart",S),n.addEventListener("touchmove",E),n.addEventListener("touchend",O);const o=g('<div class="operate-scale"></div>');o.addEventListener("touchstart",b),o.addEventListener("touchmove",Y),o.addEventListener("touchend",Q),p.appendChild(n),p.appendChild(o),a.canvasBox.appendChild(p)}(t.currentTarget)}function A(){p&&p.remove()}function m(t){if(1===t.touches.length){const e=t.touches[0],i=t.currentTarget.dataset.pedTextId;let{x:n,y:o}=a.textsInfo[i];y={id:i,x:e.clientX,y:e.clientY,scale:a.currentScale,left:n,top:o}}}function w(t){if(r(t),1===t.touches.length){a.touchType="scaleCanvas",A();const e=t.currentTarget,i=e.dataset.pedTextId,n=t.touches[0].clientX-y.x+y.left,o=t.touches[0].clientY-y.y+y.top;e.style.cssText=`${e.style.cssText}; transform: translate(${n}px, ${o}px) rotate(${a.textsInfo[i].rotate}deg);`,a.textsInfo[i].x=n,a.textsInfo[i].y=o}}function v(){"scaleCanvas"===a.touchType&&(a.touchType="",a.steps.push({type:"move_text",textId:y.id,scale:y.scale,x:y.left,y:y.top}))}function C(t,e){return Math.atan2(e,t)*(180/Math.PI)}function S(t){if(r(t),1===t.touches.length){const e=N.dom.getBoundingClientRect(),i=t.touches[0],n=i.clientX,o=i.clientY,a=e.left+e.width/2,M=e.top+e.height/2;j={x:n,y:o,centerX:a,centerY:M,initialRotation:N.rotate,startAngle:C(n-a,o-M)}}}function E(t){if(r(t),1===t.touches.length){p.remove(),a.touchType="addRotateLog";const e=t.touches[0],i=C(e.clientX-j.centerX,e.clientY-j.centerY)+j.initialRotation-j.startAngle;N.dom.style.cssText=`${N.dom.style.cssText}; transform: translate(${N.x}px, ${N.y}px) rotate(${i}deg)`,N.rotate=i}}function O(t){r(t),"addRotateLog"===a.touchType&&(a.touchType="",a.steps.push({type:"rotate_text",textId:N.dom.dataset.pedTextId,rotate:j.initialRotation}))}function b(t){if(r(t),1===t.touches.length){const e=N.dom.getBoundingClientRect(),i=t.touches[0];L={x:i.clientX,y:i.clientY,centerX:e.left+e.width/2,centerY:e.top+e.height/2,initFontSize:N.fontSize,initialScale:N.fontSize/a.initOptions.fontSize,initLength:l([i,{clientX:e.left+e.width/2,clientY:e.top+e.height/2}])}}}function Y(t){if(r(t),1===t.touches.length){a.touchType="addScaleLog",A();const e=l([t.touches[0],{clientX:L.centerX,clientY:L.centerY}])/L.initLength*L.initialScale,i=a.initOptions.fontSize*e;N.dom.style.cssText=`${N.dom.style.cssText};\n font-size: ${i}px;\n line-height: ${i*a.initOptions.fontLineHeight}px;\n border-radius: ${a.initOptions.fontRaduis*e}px;\n padding: ${a.initOptions.fontPaddingLeft*e}px ${a.initOptions.fontPaddingTop*e}px;`}}function Q(t){r(t),(a.touchType="addScaleLog")&&(a.touchType="",N.width=N.dom.offsetWidth,N.height=N.dom.offsetHeight,N.fontSize=parseFloat(N.dom.style.fontSize),a.steps.push({type:"scale_text",textId:N.dom.dataset.pedTextId,scale:a.currentScale,fontSize:L.initFontSize}))}function R(){a.operateType=0,s(),z&&(z.src=I)}var B=i(72),U=i.n(B),W=i(825),P=i.n(W),k=i(659),Z=i.n(k),H=i(56),$=i.n(H),G=i(540),F=i.n(G),V=i(113),J=i.n(V),X=i(594),_={};_.styleTagTransform=J(),_.setAttributes=$(),_.insert=Z().bind(null,"head"),_.domAPI=P(),_.insertStyleElement=F(),U()(X.A,_),X.A&&X.A.locals&&X.A.locals;class q{constructor(t,e){if(M(e),this.getDeviceInfo(),"string"==typeof t)this.getImgInfo(t);else{if(!t.target||"IMG"!==t.target.tagName)throw new Error("Not supported");this.parseImgInfo(t.target)}}parseImgInfo(t){a.img={width:t.naturalWidth,height:t.naturalHeight,WH:t.naturalWidth/t.naturalHeight,HW:t.naturalHeight/t.naturalWidth},a.imgInstance=t,this.showImg()}getImgInfo(t){let e=new Image;e.crossOrigin="anonymous",e.onload=()=>{a.img={width:e.width,height:e.height,WH:e.width/e.height,HW:e.height/e.width},a.imgInstance=e,this.showImg()},e.onerror=()=>reject(new Error("Image loading failed")),e.src=t}getDeviceInfo(){a.device={width:window.innerWidth,height:window.innerHeight,dpr:window.devicePixelRatio}}showImg(){const t=a.device.width-2*a.initOptions.spaceLeft,e=Math.floor(t*a.img.HW);a.canvasInitCssSize={width:t,height:e};const i=g(o),n=g(`<canvas width="${a.img.width*a.device.dpr}"\n height="${a.img.height*a.device.dpr}"\n style="width: ${t+"px"};\n height: ${e+"px"};\n transform-origin: left top;">\n </canvas>`),M=i.querySelector(".canvas-box");i.style.cssText=`height: ${a.device.height}px; width: ${a.device.width}px`,M.appendChild(n),document.body.appendChild(i),a.canvas=n,a.canvasContext=a.canvas.getContext("2d",{antialias:!0}),a.canvasContext.drawImage(a.imgInstance,0,0,a.canvas.width,a.canvas.height),a.canvasBox=a.canvas.parentElement,a.pedEdit=a.canvasBox.parentElement,a.ped=a.pedEdit.parentElement,a.textContent=a.ped.lastElementChild,a.textInput=a.textContent.firstElementChild;const c=a.pedEdit.getBoundingClientRect();a.editSize={width:c.width,height:c.height};let s=0;s=a.editSize.height>e+2*a.initOptions.spaceTop?a.editSize.height:e+2*a.initOptions.spaceTop,a.canvasBox.style.cssText=`height: ${s}px; width: ${a.editSize.width}px`,h()}}return n})()));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.PED=e():t.PED=e()}(self,(()=>(()=>{"use strict";var t={594:(t,e,i)=>{i.d(e,{A:()=>c});var n=i(601),o=i.n(n),a=i(314),M=i.n(a)()(o());M.push([t.id,".picture-edit-frame {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n font-family: Arial;\n}\n.picture-edit-frame .body-content {\n flex: 1;\n background-color: #fff;\n overflow: auto;\n will-change: transform;\n}\n.picture-edit-frame .cancel-btn {\n position: fixed;\n left: 15px;\n top: 15px;\n padding: 5px 13px;\n background-color: white;\n color: black;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .save-btn {\n position: fixed;\n right: 15px;\n top: 15px;\n padding: 5px 13px;\n background-color: white;\n color: white;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .cancel-test {\n position: fixed;\n right: 125px;\n top: 15px;\n padding: 5px 13px;\n background-color: #67c23a;\n color: white;\n z-index: 2;\n border-radius: 3px;\n}\n.picture-edit-frame .canvas-box {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n.picture-edit-frame .footer-content {\n background-color: #000;\n height: 6em;\n display: flex;\n text-align: center;\n color: #fff;\n align-items: flex-start;\n}\n.picture-edit-frame .operate-item {\n display: block;\n margin-top: 25px;\n width: 10px;\n flex: 1;\n}\n.picture-edit-frame .operate-img {\n width: 1.3em;\n height: 1.3em;\n}\n.picture-edit-frame .text-content {\n position: absolute;\n inset: 0px;\n overflow: hidden;\n z-index: 2;\n display: none;\n background-color: white;\n opacity: 0.93;\n}\n.picture-edit-frame .text-content .text-input {\n min-height: 15%;\n border-radius: 5px;\n border: 2px solid #63eca1;\n outline: none;\n width: 96%;\n box-sizing: border-box;\n position: absolute;\n top: 8%;\n left: 2%;\n right: 2%;\n z-index: 2;\n padding: 3px 5px;\n}\n.picture-edit-frame .icon-rotate {\n width: 18px;\n position: absolute;\n right: -5px;\n bottom: -22px;\n}\n.picture-edit-frame .icon-remove {\n width: 18px;\n position: absolute;\n left: -5px;\n bottom: -22px;\n}\n.picture-edit-frame .icon-scale {\n width: 18px;\n position: absolute;\n right: -5px;\n top: -22px;\n}\n.picture-edit-frame .operate-rotate {\n position: absolute;\n width: 20px;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n}\n.picture-edit-frame .operate-scale {\n position: absolute;\n width: 16px;\n height: 16px;\n background-color: #fff;\n right: -8px;\n top: -8px;\n border-radius: 50%;\n box-sizing: border-box;\n}\n",""]);const c=M},314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",n=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),n&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),n&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,n,o,a){"string"==typeof t&&(t=[[null,t,void 0]]);var M={};if(n)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(M[s]=!0)}for(var d=0;d<t.length;d++){var r=[].concat(t[d]);n&&M[r[0]]||(void 0!==a&&(void 0===r[5]||(r[1]="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {").concat(r[1],"}")),r[5]=a),i&&(r[2]?(r[1]="@media ".concat(r[2]," {").concat(r[1],"}"),r[2]=i):r[2]=i),o&&(r[4]?(r[1]="@supports (".concat(r[4],") {").concat(r[1],"}"),r[4]=o):r[4]="".concat(o)),e.push(r))}},e}},601:t=>{t.exports=function(t){return t[1]}},72:t=>{var e=[];function i(t){for(var i=-1,n=0;n<e.length;n++)if(e[n].identifier===t){i=n;break}return i}function n(t,n){for(var a={},M=[],c=0;c<t.length;c++){var s=t[c],d=n.base?s[0]+n.base:s[0],r=a[d]||0,g="".concat(d," ").concat(r);a[d]=r+1;var l=i(g),I={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==l)e[l].references++,e[l].updater(I);else{var u=o(I,n);n.byIndex=c,e.splice(c,0,{identifier:g,updater:u,references:1})}M.push(g)}return M}function o(t,e){var i=e.domAPI(e);return i.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;i.update(t=e)}else i.remove()}}t.exports=function(t,o){var a=n(t=t||[],o=o||{});return function(t){t=t||[];for(var M=0;M<a.length;M++){var c=i(a[M]);e[c].references--}for(var s=n(t,o),d=0;d<a.length;d++){var r=i(a[d]);0===e[r].references&&(e[r].updater(),e.splice(r,1))}a=s}}},659:t=>{var e={};t.exports=function(t,i){var n=function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}e[t]=i}return e[t]}(t);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(i)}},540:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},56:(t,e,i)=>{t.exports=function(t){var e=i.nc;e&&t.setAttribute("nonce",e)}},825:t=>{t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(i){!function(t,e,i){var n="";i.supports&&(n+="@supports (".concat(i.supports,") {")),i.media&&(n+="@media ".concat(i.media," {"));var o=void 0!==i.layer;o&&(n+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),n+=i.css,o&&(n+="}"),i.media&&(n+="}"),i.supports&&(n+="}");var a=i.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(n,t,e.options)}(e,t,i)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},113:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},439:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM5NzEyNTI2NjQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY5MTQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTYzOS4xMjUgNTEybDIxNy45Njg3NS0yMTcuOTY4NzVjMTQuNDM3NS0xNC40Mzc1IDE0LjQzNzUtNDAuMDMxMjUgMC01NC40Njg3NWwtNzIuNjU2MjUtNzIuNjU2MjVjLTE0LjQzNzUtMTQuNDM3NS00MC4xMjUtMTQuNDM3NS01NC40Njg3NSAwTDUxMiAzODQuNzgxMjUgMjk0LjAzMTI1IDE2Ni44MTI1Yy0xNC40Mzc1LTE0LjQzNzUtNDAuMTI1LTE0LjQzNzUtNTQuNDY4NzUgMGwtNzIuNjU2MjUgNzIuNjU2MjVjLTE0LjQzNzUgMTQuNDM3NS0xNC40Mzc1IDQwLjEyNSAwIDU0LjQ2ODc1TDM4NC43ODEyNSA1MTIgMTY2LjgxMjUgNzI5Ljk2ODc1Yy0xNC40Mzc1IDE0LjQzNzUtMTQuNDM3NSA0MC4xMjUgMCA1NC40Njg3NWw3Mi42NTYyNSA3Mi42NTYyNWMxNC40Mzc1IDE0LjQzNzUgNDAuMTI1IDE0LjQzNzUgNTQuNDY4NzUgMEw1MTIgNjM5LjEyNWwyMTcuOTY4NzUgMjE3Ljk2ODc1YzE0LjQzNzUgMTQuNDM3NSA0MC4xMjUgMTQuNDM3NSA1NC40Njg3NSAwbDcyLjY1NjI1LTcyLjY1NjI1YzE0LjQzNzUtMTQuNDM3NSAxNC40Mzc1LTQwLjAzMTI1IDAtNTQuNDY4NzVMNjM5LjEyNSA1MTJ6IiBwLWlkPSI2OTE1Ij48L3BhdGg+PC9zdmc+"},568:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxNDcwNjI5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMzAgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4MTMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4Ljc1IiBoZWlnaHQ9IjEyOCI+PHBhdGggZD0iTTQwOS42IDg5NmMtMTkuMiAwLTMyLTEyLjgtMzItMzJWMzY0LjhjMC0xOS4yIDEyLjgtMzIgMzItMzJzMzIgMTIuOCAzMiAzMnY0OTIuOGMwIDI1LjYtMTIuOCAzOC40LTMyIDM4LjR6TTYxNC40IDg4OS42Yy0xOS4yIDAtMzItMTIuOC0zMi0zMlYzNzEuMmMwLTE5LjIgMTIuOC0zMiAzMi0zMnMzMiAxMi44IDMyIDMydjQ4MGMwIDI1LjYtMTIuOCAzOC40LTMyIDM4LjR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI1ODE0Ij48L3BhdGg+PHBhdGggZD0iTTc1NS4yIDEwMjRIMjY4LjhjLTQ0LjggMC03Ni44LTM4LjQtNzYuOC04OS42VjMzOS4yYzAtMTkuMiAxMi44LTM4LjQgMzguNC0zOC40czM4LjQgMTkuMiAzOC40IDM4LjR2NTk1LjJjMCA2LjQgNi40IDEyLjggNi40IDEyLjhoNDg2LjRWMzM5LjJjMC0xOS4yIDE5LjItMzguNCAzOC40LTM4LjRzMzIgMTkuMiAzMiAzOC40djU5NS4yYzAgNTEuMi0zMiA4OS42LTc2LjggODkuNnpNOTg1LjYgMTg1LjZoLTI0My4yVjgzLjJDNzQyLjQgMzguNCA3MDQgMCA2NTIuOCAwSDM3MS4yQzMyMCAwIDI4MS42IDM4LjQgMjgxLjYgODMuMlYxODUuNkgzOC40Yy0xOS4yIDAtMzguNCAxOS4yLTM4LjQgMzguNHMxOS4yIDM4LjQgMzguNCAzOC40SDk5MmMxOS4yIDAgMzguNC0xOS4yIDM4LjQtMzguNHMtMjUuNi0zOC40LTQ0LjgtMzguNHpNMzU4LjQgODMuMmMwLTYuNCA2LjQtMTIuOCAxMi44LTEyLjhoMjg4YzYuNCAwIDEyLjggNi40IDEyLjggMTIuOHY4OS42YzAgNi40LTYuNCAxMi44LTEyLjggMTIuOEgzNzEuMmMtNi40IDAtMTIuOC02LjQtMTIuOC0xMi44VjgzLjJ6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI1ODE1Ij48L3BhdGg+PC9zdmc+"},270:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzM5NTE2MzAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTc0NS43NiAzNjkuODZsLTQ1MSA1MzcuNDhhMTguNjkzIDE4LjY5MyAwIDAgMS04LjQ2IDUuNzRsLTEzNi41OCA0NS4yN2MtMTMuMjQgNC4zOS0yNi40Ni02LjcxLTI0LjQzLTIwLjVsMjAuODYtMTQyLjM2YzAuNS0zLjQ0IDEuOTUtNi42NyA0LjE5LTkuMzNsNDUxLTUzNy40OGM2LjY1LTcuOTMgMTguNDctOC45NiAyNi40LTIuMzFsMTE1LjcxIDk3LjFjNy45MiA2LjY0IDguOTYgMTguNDYgMi4zMSAyNi4zOXpNODk0LjUzIDE5Mi41NmwtNjUuOSA3OC41M2MtNi42NSA3LjkzLTE4LjQ3IDguOTYtMjYuNCAyLjMxbC0xMTUuNzEtOTcuMWMtNy45My02LjY1LTguOTYtMTguNDctMi4zMS0yNi40bDY1LjktNzguNTNjNi42NS03LjkzIDE4LjQ3LTguOTYgMjYuNC0yLjMxbDExNS43MSA5Ny4xYzcuOTMgNi42NSA4Ljk2IDE4LjQ3IDIuMzEgMjYuNHoiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjI2NTkiPjwvcGF0aD48L3N2Zz4="},571:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxMjY4NDEyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTY4IiBoZWlnaHQ9IjE2OCI+PHBhdGggZD0iTTUuODM1MDkzIDMyOS4zODY2NjdhMzUuNDU2IDM1LjQ1NiAwIDAgMCA4LjE5MiAxMS4yNjRsMjA0LjI4OCAyMDIuNjY2NjY2YTQ4LjIxMzMzMyA0OC4yMTMzMzMgMCAwIDAgNjcuODgyNjY3IDAgNDYuOTMzMzMzIDQ2LjkzMzMzMyAwIDAgMCAwLTY3LjM3MDY2NkwxNjQuMjk5MDkzIDM1NC45NDRoNDcyLjgzMmMxNDYuMTMzMzMzIDAgMjY0LjQ0OCAxMTcuNDE4NjY3IDI2NC40NDggMjYyLjQ0MjY2N3MtMTE4LjMxNDY2NyAyNjIuNDQyNjY3LTI2NC40NDggMjYyLjQ0MjY2NkgxNTYuMDY0NDI3YTQ4LjEyOCA0OC4xMjggMCAwIDAtNDguMzg0IDQ4YzAgMjYuNTgxMzMzIDIxLjYzMiA0OCA0OC4zODQgNDhoNDgxLjA2NjY2NmMxOTkuMDgyNjY3IDAgMzYwLjY2MTMzMy0xNjAuMjk4NjY3IDM2MC42NjEzMzQtMzU3LjkzMDY2NiAwLTE5Ny41ODkzMzMtMTYxLjU3ODY2Ny0zNTcuOTczMzMzLTM2MC42NjEzMzQtMzU3Ljk3MzMzNEgxNjQuMjk5MDkzbDEyMS44OTg2NjctMTIxLjQ3MmE0Ny4zNiA0Ny4zNiAwIDAgMCAwLTY3LjQxMzMzMyA0Ny43ODY2NjcgNDcuNzg2NjY3IDAgMCAwLTY3Ljg4MjY2NyAwTDE0LjAyNzA5MyAyNzMuMjM3MzMzYy0xNC45MzMzMzMgMTQuNzYyNjY3LTE4LjM0NjY2NyAzNy43MTczMzMtOC4xOTIgNTYuMTkyeiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDQ0MSI+PC9wYXRoPjwvc3ZnPg=="},186:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM5NzEyODM0MTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY5MzkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTMyMyAxNTRIMjEyYy0xNS40NjQgMC0yOCAxMi41MzYtMjggMjh2NjYwYzAgMTUuNDY0IDEyLjUzNiAyOCAyOCAyOGgzMlY2NTUuMjU1YTY4IDY4IDAgMCAxIDE5LjkxNy00OC4wODNsNTEuMjU1LTUxLjI1NUE2OCA2OCAwIDAgMSAzNjMuMjU1IDUzNmgyOTcuNDlhNjggNjggMCAwIDEgNDguMDgzIDE5LjkxN2w1MS4yNTUgNTEuMjU1QTY4IDY4IDAgMCAxIDc4MCA2NTUuMjU1Vjg3MGgzMmMxNS40NjQgMCAyOC0xMi41MzYgMjgtMjhWMzU1LjUxYTI4IDI4IDAgMCAwLTguMjAxLTE5LjhMNzAxIDIwNC45MTNWMzcyYzAgMTkuODgyLTE2LjExOCAzNi0zNiAzNkgzNTljLTE5Ljg4MiAwLTM2LTE2LjExOC0zNi0zNlYxNTR6IG03MiAwdjE4MmgyMzRWMTU0SDM5NXogbTUxNyAyMDEuNTFWODQyYzAgNTUuMjI4LTQ0Ljc3MiAxMDAtMTAwIDEwMEgyMTJjLTU1LjIyOCAwLTEwMC00NC43NzItMTAwLTEwMFYxODJjMC01NS4yMjggNDQuNzcyLTEwMCAxMDAtMTAwaDQyNi40OWExMDAgMTAwIDAgMCAxIDcwLjcxMSAyOS4yOWwxNzMuNTEgMTczLjUwOUExMDAgMTAwIDAgMCAxIDkxMiAzNTUuNTA5ek02NTkuMDg4IDYwOEgzNjQuOTEyTDMxNiA2NTYuOTEyVjg3MGgzOTJWNjU2LjkxMkw2NTkuMDg4IDYwOHpNNTMwLjUgMjA5LjVjMC0xOS44ODIgMTYuMTE4LTM2IDM2LTM2czM2IDE2LjExOCAzNiAzNnY2NS4xNjRjMCAxOS44ODMtMTYuMTE4IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzZWMjA5LjV6IiBmaWxsPSIjMzMzMzMzIiBwLWlkPSI2OTQwIj48L3BhdGg+PC9zdmc+"},604:t=>{t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzQxMTY0ODI1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMzNDQiIHdpZHRoPSIxNjgiIGhlaWdodD0iMTY4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTg5NiA5MjhIMTI4YTMyIDMyIDAgMCAxLTMyLTMyVjEyOGEzMiAzMiAwIDAgMSAzMi0zMmg3NjhhMzIgMzIgMCAwIDEgMzIgMzJ2NzY4YTMyIDMyIDAgMCAxLTMyIDMyeiBtLTczNi02NGg3MDR2LTcwNGgtNzA0eiIgcC1pZD0iMzM0NSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik03MDQgMzUySDMyMGEzMiAzMiAwIDAgMSAwLTY0aDM4NGEzMiAzMiAwIDAgMSAwIDY0eiIgcC1pZD0iMzM0NiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNzM2YTMyIDMyIDAgMCAxLTMyLTMyVjMyMGEzMiAzMiAwIDAgMSA2NCAwdjM4NGEzMiAzMiAwIDAgMS0zMiAzMnoiIHAtaWQ9IjMzNDciIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4="}},e={};function i(n){var o=e[n];if(void 0!==o)return o.exports;var a=e[n]={id:n,exports:{}};return t[n](a,a.exports,i),a.exports}i.m=t,i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.b=document.baseURI||self.location.href,i.nc=void 0;var n={};i.r(n),i.d(n,{drawing:()=>q});const o=`<div class="picture-edit-frame"> <div class="cancel-btn" operate="cancel"> <img src="${new URL(i(439),i.b)}" class="operate-img" operate="cancel"> </div> <div class="save-btn" operate="save"> <img src="${new URL(i(186),i.b)}" class="operate-img" operate="save"> </div> <div class="body-content"> <div class="canvas-box"></div> </div> <div class="footer-content"> <div class="operate-item" operate="line"> <img src="${new URL(i(270),i.b)}" class="operate-img" operate="line"> </div> <div class="operate-item" operate="text"> <img src="${new URL(i(604),i.b)}" class="operate-img" operate="text"> </div> <div class="operate-item" operate="back"> <img src="${new URL(i(571),i.b)}" class="operate-img" operate="back"> </div> <div class="operate-item" operate="clear"> <img src="${new URL(i(568),i.b)}" class="operate-img" operate="clear"> </div> </div> <div class="text-content"> <div contenteditable="true" class="text-input"></div> </div> </div>`;let a={};function M(t={}){a={initOptions:{spaceLeft:30,spaceTop:30,fontSize:14,fontPaddingLeft:3,fontPaddingTop:5,fontRaduis:5,fontLineHeight:1.2,fontLineWidth:5,fontShadowBlur:5,maxScale:2,operatePaddingLeft:28,operatePaddingTop:10,fontColor:"#000000",fontBgColor:"#ffffff",fontFamily:"Arial",textOperateColor:"#884cf3",getDataURL:()=>{},outType:"image/jpeg",encoderOptions:1,...t},imgInstance:void 0,img:{width:0,height:0,WH:0,HW:0},device:{width:0,height:0,dpr:1},operateType:0,canvas:void 0,canvasContext:void 0,canvasInitCssSize:{width:0,height:0},canvasBox:void 0,ped:void 0,pedEdit:void 0,editSize:{width:0,height:0},preScale:1,currentScale:1,scrollPercent:{width:1,height:1},outerPosition:{x:0,y:0},screenPosition:{x:0,y:0},textContent:void 0,textInput:void 0,touchType:"",textId:2,textsInfo:{},steps:[]}}function c(){a.pedEdit.style.overflow="hidden"}function s(){a.pedEdit.style.overflow="auto"}function d(){a.ped.remove(),M()}function r(t){t.stopPropagation(),t.preventDefault()}function g(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function l(t){const e=t[1].clientX-t[0].clientX,i=t[1].clientY-t[0].clientY;return Math.hypot(e,i)}var I=i(270);let u=0,x=1,p=null,N=null,z=null,T={coefficient:1,left:0,top:0},y={id:void 0,x:0,y:0,scale:1,left:0,top:0},j={x:0,y:0,centerX:0,centerY:0,initialRotation:0,startAngle:0},L={x:0,y:0,initFontSize:14,centerX:0,centerY:0,initialScale:1,initLength:0};function h(){a.ped.addEventListener("click",(t=>{const e=t.target.getAttribute("operate");if(e)if("cancel"===e)d();else if("save"===e){!function(){const t=a.canvas.getBoundingClientRect(),e=a.canvas.width/t.width;Object.keys(a.textsInfo).forEach((i=>{const n=a.textsInfo[i],o=n.dom;o.style.cssText=`${o.style.cssText}; transform: translate(${n.x}px, ${n.y}px) rotate(0deg)`;const M=o.getBoundingClientRect();!function(t,e,i,n){const o=a.canvasContext;o.save();const M=i.width*t,c=i.height*t,s=(i.left-n.left)*t,d=(i.top-n.top)*t,r=e.fontSize/a.initOptions.fontSize*a.initOptions.fontRaduis*t,g=e.fontSize*t,l=s+M/2,I=d+c/2;o.translate(l,I),o.rotate(e.rotate*Math.PI/180),o.translate(-l,-I),o.beginPath(),o.moveTo(s+r,d),o.arcTo(s+M,d,s+M,d+r,r),o.arcTo(s+M,d+c,s+M-r,d+c,r),o.arcTo(s,d+c,s,d+c-r,r),o.arcTo(s,d,s+r,d,r),o.closePath(),o.fillStyle="white",o.lineWidth=1,o.lineCap="butt",o.lineJoin="miter",o.shadowBlur=0,o.shadowColor="#ffffff",o.strokeStyle="white",o.fill(),o.stroke(),o.font=`${Math.round(g)}px ${a.initOptions.fontFamily}`,o.textAlign="left",o.textBaseline="middle",o.fillStyle="black";const u=g*a.initOptions.fontLineHeight,x=g/a.initOptions.fontSize/t,p=s+a.initOptions.fontPaddingTop*t*x,N=d+a.initOptions.fontPaddingLeft*t*x+u/2;e.textArray.forEach(((t,e)=>{const i=N+e*u;o.fillText(t,p,i)})),o.restore()}(e,n,M,t)}))}();const t=a.canvas.toDataURL(a.initOptions.outType,a.initOptions.encoderOptions);a.initOptions.getDataURL(t),d()}else if("line"===e)1===a.operateType?(a.operateType=0,s()):(a.operateType=1,c()),z="DIV"===t.target.tagName?t.target.firstElementChild:t.target,z.src=0===a.operateType?I:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQ0MzM5NTE2MzAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTc0NS43NiAzNjkuODZsLTQ1MSA1MzcuNDhhMTguNjkzIDE4LjY5MyAwIDAgMS04LjQ2IDUuNzRsLTEzNi41OCA0NS4yN2MtMTMuMjQgNC4zOS0yNi40Ni02LjcxLTI0LjQzLTIwLjVsMjAuODYtMTQyLjM2YzAuNS0zLjQ0IDEuOTUtNi42NyA0LjE5LTkuMzNsNDUxLTUzNy40OGM2LjY1LTcuOTMgMTguNDctOC45NiAyNi40LTIuMzFsMTE1LjcxIDk3LjFjNy45MiA2LjY0IDguOTYgMTguNDYgMi4zMSAyNi4zOXpNODk0LjUzIDE5Mi41NmwtNjUuOSA3OC41M2MtNi42NSA3LjkzLTE4LjQ3IDguOTYtMjYuNCAyLjMxbC0xMTUuNzEtOTcuMWMtNy45My02LjY1LTguOTYtMTguNDctMi4zMS0yNi40bDY1LjktNzguNTNjNi42NS03LjkzIDE4LjQ3LTguOTYgMjYuNC0yLjMxbDExNS43MSA5Ny4xYzcuOTMgNi42NSA4Ljk2IDE4LjQ3IDIuMzEgMjYuNHoiIGZpbGw9IiMxMjk2ZGIiIHAtaWQ9IjI2NTkiPjwvcGF0aD48L3N2Zz4=";else if("text"===e)R(),a.textContent.style.display="block",a.textInput.focus(),a.textInput.addEventListener("blur",D);else if("back"===e){if(R(),a.steps.length){const t=a.steps.pop();if("line"===t.type){!function(){const t=a.canvasContext;t.clearRect(0,0,a.canvas.width,a.canvas.height),t.drawImage(a.imgInstance,0,0,a.img.width,a.img.height,0,0,a.canvas.width,a.canvas.height)}();const t=a.canvasContext;t.lineWidth=a.initOptions.fontLineWidth*a.device.dpr,t.lineCap="round",t.lineJoin="round",t.shadowBlur=a.initOptions.fontShadowBlur,t.shadowColor="#000000",a.steps.forEach((e=>{"line"===e.type&&(t.beginPath(),t.moveTo(e.start.x,e.start.y),e.moves.forEach((e=>{t.lineTo(e.x,e.y),t.stroke()})))}))}else if("creat_text"===t.type){const e=t.textId;a.textsInfo[e].dom.remove(),delete a.textsInfo[e]}else if("move_text"===t.type){const e=t.textId,i=t.x*a.currentScale/t.scale,n=t.y*a.currentScale/t.scale;a.textsInfo[e].x=i,a.textsInfo[e].y=n,a.textsInfo[e].dom.style.cssText=`${a.textsInfo[e].dom.style.cssText}; transform: translate(${i}px, ${n}px) rotate(${a.textsInfo[e].rotate}deg);`}else if("scale_text"===t.type){const e=t.textId,i=a.textsInfo[e],n=t.fontSize*a.currentScale/t.scale;i.fontSize=n,i.dom.style.cssText=`${i.dom.style.cssText};\n font-size: ${n}px;\n line-height: ${n*a.initOptions.fontLineHeight}px;\n border-radius: ${a.initOptions.fontRaduis*(n/a.initOptions.fontSize)}px;\n padding: ${a.initOptions.fontPaddingLeft*(n/a.initOptions.fontSize)}px ${a.initOptions.fontPaddingTop*(n/a.initOptions.fontSize)}px;`;const o=i.dom.getBoundingClientRect();i.width=o.width,i.height=o.height}else if("rotate_text"===t.type){const e=t.textId,i=a.textsInfo[e];i.rotate=t.rotate,i.dom.style.cssText=`${i.dom.style.cssText}; \n transform: translate(${i.x}px, ${i.y}px) rotate(${t.rotate}deg);`}}}else"clear"===e&&d()})),a.canvas.addEventListener("touchstart",(t=>{if(1===t.touches.length){if(1===a.operateType){r(t);const e=t.touches[0];a.canvasContext.beginPath(),a.canvasContext.lineWidth=a.initOptions.fontLineWidth*a.device.dpr,a.canvasContext.lineCap="round",a.canvasContext.lineJoin="round",a.canvasContext.shadowBlur=a.initOptions.fontShadowBlur,a.canvasContext.shadowColor="#000000";const i=a.canvas.getBoundingClientRect(),n=e.clientX-i.left,o=e.clientY-i.top,M=a.canvas.width/i.width;T={coefficient:M,left:i.left,top:i.top};const c=n*M,s=o*M;a.canvasContext.moveTo(c,s),a.steps.push({type:"line",start:{x:c,y:s},moves:[]})}}else if(2===t.touches.length){r(t),R(),c(),Object.keys(a.textsInfo).forEach((t=>{const e=a.textsInfo[t];e.dom.style.cssText=`${e.dom.style.cssText}; display: none;`})),a.touchType="scaleCanvas",a.preScale=a.currentScale,x=1,u=l(t.touches);const e=t.touches[0],i=t.touches[1],n=(e.clientX+i.clientX)/2,o=(e.clientY+i.clientY)/2,M=a.canvas.getBoundingClientRect(),s=a.canvasBox.getBoundingClientRect();a.screenPosition={x:n,y:o},a.outerPosition={x:n-s.left,y:o-s.top},a.canvas.style.transformOrigin=`${n-M.left}px ${o-M.top}px`}}));const t=function(t){let e=0;return function(...i){const n=Date.now();n-e<16||(e=n,t.apply(this,i))}}((t=>{!function(t){const e=l(t.touches)/u;x=e,a.canvas.style.transform=`scale(${e})`}(t)}));a.canvas.addEventListener("touchmove",(e=>{if(1===e.touches.length){if(1===a.operateType){r(e);const t=e.touches[0],i=t.clientX-T.left,n=t.clientY-T.top,o=i*T.coefficient,M=n*T.coefficient;a.canvasContext.lineTo(o,M),a.canvasContext.stroke();let c=a.steps.length-1;a.steps[c].moves.push({x:o,y:M})}}else 2===e.touches.length&&1!==a.operateType&&"scaleCanvas"===a.touchType&&(r(e),t(e))})),a.canvas.addEventListener("touchend",(t=>{if(0===t.touches.length&&"scaleCanvas"===a.touchType){u=0,a.touchType="";const t=a.canvasBox.getBoundingClientRect(),e=t.width,i=t.height,n=e*x,o=i*x,M=a.canvas.getBoundingClientRect();a.canvas.style.cssText=`width: ${M.width}px; height: ${M.height}; transform: scale(1); transform-origin: center`,a.canvasBox.style.cssText=`width: ${n}px; height: ${o}px`,a.pedEdit.scrollTo(n/e*a.outerPosition.x-a.screenPosition.x,o/i*a.outerPosition.y-a.screenPosition.y),a.currentScale=n/a.editSize.width;const c=a.currentScale/a.preScale;Object.keys(a.textsInfo).forEach((t=>{const e=a.textsInfo[t];e.x=e.x*c,e.y=e.y*c,e.fontSize=e.fontSize*c,e.width=e.width*c,e.height=e.height*c,e.dom.style.cssText=`${e.dom.style.cssText};\n font-size: ${e.fontSize}px;\n line-height: ${e.fontSize*a.initOptions.fontLineHeight}px;\n padding: ${a.initOptions.fontPaddingLeft*a.currentScale}px ${a.initOptions.fontPaddingTop*a.currentScale}px;\n border-radius: ${a.initOptions.fontRaduis*a.currentScale}px; \n transform: translate(${e.x}px, ${e.y}px) rotate(${e.rotate}deg);\n display: block;`}))}s()}))}function D(){if(a.textInput.innerText.length){let t=a.textInput.innerText.split(/[\n\r]/);const e=a.initOptions.fontSize*a.currentScale;let i=`<div style="position: absolute;\n left: 0;\n top: 0;\n user-select: none;\n color: ${a.initOptions.fontColor};\n font-size: ${e}px;\n line-height: ${e*a.initOptions.fontLineHeight}px;\n background-color: ${a.initOptions.fontBgColor};\n padding: ${a.initOptions.fontPaddingLeft*a.currentScale}px ${a.initOptions.fontPaddingTop*a.currentScale}px;\n border-radius: ${a.initOptions.fontRaduis*a.currentScale}px;\n white-space: nowrap;\n z-index: ${a.textId}">`;for(let e=0;e<t.length;e++)i=i+t[e]+""+(e==t.length-1?"":"</br>");i+="</div>";let n=g(i);a.canvasBox.appendChild(n);const o=a.canvasBox.getBoundingClientRect(),M=n.getBoundingClientRect(),c=a.editSize.height/2-o.top-M.height/2,s=a.editSize.width/2-o.left-M.width/2;n.style.cssText=`${n.style.cssText}; transform: translate(${s}px, ${c}px) rotate(0deg);`;const d=a.textId++;n.dataset.pedTextId=d,a.textsInfo[d]={textArray:t,x:s,y:c,rotate:0,fontSize:e,fontColor:a.initOptions.fontColor,fontBgColor:a.initOptions.fontBgColor,width:M.width,height:M.height,dom:n},a.steps.push({type:"creat_text",textId:d}),n.addEventListener("touchstart",m),n.addEventListener("touchmove",w),n.addEventListener("touchend",v),n.addEventListener("click",f),a.textInput.innerText=""}a.textInput.removeEventListener("blur",D),a.textContent.style.display="none"}function f(t){r(t),function(t){A();const e=t.dataset.pedTextId;N=a.textsInfo[e];const i=`<div style="position: absolute;\n width: ${N.width+2*a.initOptions.operatePaddingLeft}px;\n height: ${N.height+2*a.initOptions.operatePaddingTop}px;\n left: ${N.x-a.initOptions.operatePaddingLeft}px;\n top: ${N.y-a.initOptions.operatePaddingTop}px;\n border: 2px solid ${a.initOptions.textOperateColor};\n box-sizing: border-box;\n border-radius: 2px;\n background: transparent;\n transform: rotate(${N.rotate}deg);">\n </div>`;p=g(i);const n=g('<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQzMTI1Mjg3MTE5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc1NDUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCI+PHBhdGggZD0iTTkyOSA4NDlhMzAgMzAgMCAwIDEtMzAtMzB2LTgzLjEzN2E0NDcuNTE0IDQ0Ny41MTQgMCAwIDEtNzAuOTIxIDkyLjIwOUM3MjIuOTM1IDkzMy4yMjUgNTc4LjQ0MiA5NzUuMDA4IDQ0MiA5NTMuNDgyYTQ0NC45MTcgNDQ0LjkxNyAwIDAgMS0yNDEuMTM5LTEyMC41OTEgMzAgMzAgMCAxIDEgMzcuMjU4LTQ3LjAxbDAuMjMxLTAuMjMxQTM4NS4xNzUgMzg1LjE3NSAwIDAgMCA0NDIgODkyLjYyNXYtMC4wMDZjMTIwLjg1NSAyMi4xMjMgMjUwLjIwNi0xMy41MTkgMzQzLjY1Ni0xMDYuOTc1YTM4Ni42NDYgMzg2LjY0NiAwIDAgMCA3MC42LTk2LjY1M2gtODcuMjQ3YTMwIDMwIDAgMCAxIDAtNjBIOTI5YTMwIDMwIDAgMCAxIDMwIDMwVjgxOWEzMCAzMCAwIDAgMS0zMCAzMHpNNjMyIDM0MmE1MCA1MCAwIDAgMSA1MCA1MHYyNDBhNTAgNTAgMCAwIDEtNTAgNTBIMzkyYTUwIDUwIDAgMCAxLTUwLTUwVjM5MmE1MCA1MCAwIDAgMSA1MC01MGgyNDB6TTQwMiA2MDdhMTUgMTUgMCAwIDAgMTUgMTVoMTkwYTE1IDE1IDAgMCAwIDE1LTE1VjQxN2ExNSAxNSAwIDAgMC0xNS0xNUg0MTdhMTUgMTUgMCAwIDAtMTUgMTV2MTkweiBtNDAzLjAwNS0zNjIuMDI1YTI5Ljg3IDI5Ljg3IDAgMCAxLTE5LjExNy02Ljg4MmwtMC4yMzIgMC4yMzFBMzg2LjUgMzg2LjUgMCAwIDAgNjg5LjQ3OCAxNjhoLTAuMDExYy0xNDUuNjQ2LTc1LjE4Mi0zMjkuMDIxLTUxLjc0Ny00NTEuMTE3IDcwLjM1YTM4Ni42MTUgMzg2LjYxNSAwIDAgMC03MC42IDk2LjY1SDI1NWEzMCAzMCAwIDAgMSAwIDYwSDk1YTMwIDMwIDAgMCAxLTMwLTMwVjIwNWEzMCAzMCAwIDAgMSA2MCAwdjgzLjEyOWE0NDcuNTM0IDQ0Ny41MzQgMCAwIDEgNzAuOTIzLTkyLjIwNkMzMTcuOTgxIDczLjg2NiA0OTMuMDQ4IDM3LjIgNjQ3IDg1LjgzNnYtMC4wNDVhNDQ0Ljg4MyA0NDQuODgzIDAgMCAxIDE3Ni4xNDMgMTA1LjI5MSAzMCAzMCAwIDAgMS0xOC4xMzggNTMuODkzeiIgZmlsbD0iIzJjMmMyYyIgcC1pZD0iNzU0NiI+PC9wYXRoPjwvc3ZnPg==" class="operate-rotate" />');n.addEventListener("touchstart",S),n.addEventListener("touchmove",E),n.addEventListener("touchend",O);const o=g('<div class="operate-scale"></div>');o.addEventListener("touchstart",b),o.addEventListener("touchmove",Y),o.addEventListener("touchend",Q),p.appendChild(n),p.appendChild(o),a.canvasBox.appendChild(p)}(t.currentTarget)}function A(){p&&p.remove()}function m(t){if(1===t.touches.length){const e=t.touches[0],i=t.currentTarget.dataset.pedTextId;let{x:n,y:o}=a.textsInfo[i];y={id:i,x:e.clientX,y:e.clientY,scale:a.currentScale,left:n,top:o}}}function w(t){if(r(t),1===t.touches.length){a.touchType="scaleCanvas",A();const e=t.currentTarget,i=e.dataset.pedTextId,n=t.touches[0].clientX-y.x+y.left,o=t.touches[0].clientY-y.y+y.top;e.style.cssText=`${e.style.cssText}; transform: translate(${n}px, ${o}px) rotate(${a.textsInfo[i].rotate}deg);`,a.textsInfo[i].x=n,a.textsInfo[i].y=o}}function v(){"scaleCanvas"===a.touchType&&(a.touchType="",a.steps.push({type:"move_text",textId:y.id,scale:y.scale,x:y.left,y:y.top}))}function C(t,e){return Math.atan2(e,t)*(180/Math.PI)}function S(t){if(r(t),1===t.touches.length){const e=N.dom.getBoundingClientRect(),i=t.touches[0],n=i.clientX,o=i.clientY,a=e.left+e.width/2,M=e.top+e.height/2;j={x:n,y:o,centerX:a,centerY:M,initialRotation:N.rotate,startAngle:C(n-a,o-M)}}}function E(t){if(r(t),1===t.touches.length){p.remove(),a.touchType="addRotateLog";const e=t.touches[0],i=C(e.clientX-j.centerX,e.clientY-j.centerY)+j.initialRotation-j.startAngle;N.dom.style.cssText=`${N.dom.style.cssText}; transform: translate(${N.x}px, ${N.y}px) rotate(${i}deg)`,N.rotate=i}}function O(t){r(t),"addRotateLog"===a.touchType&&(a.touchType="",a.steps.push({type:"rotate_text",textId:N.dom.dataset.pedTextId,rotate:j.initialRotation}))}function b(t){if(r(t),1===t.touches.length){const e=N.dom.getBoundingClientRect(),i=t.touches[0];L={x:i.clientX,y:i.clientY,centerX:e.left+e.width/2,centerY:e.top+e.height/2,initFontSize:N.fontSize,initialScale:N.fontSize/a.initOptions.fontSize,initLength:l([i,{clientX:e.left+e.width/2,clientY:e.top+e.height/2}])}}}function Y(t){if(r(t),1===t.touches.length){a.touchType="addScaleLog",A();const e=l([t.touches[0],{clientX:L.centerX,clientY:L.centerY}])/L.initLength*L.initialScale,i=a.initOptions.fontSize*e;N.dom.style.cssText=`${N.dom.style.cssText};\n font-size: ${i}px;\n line-height: ${i*a.initOptions.fontLineHeight}px;\n border-radius: ${a.initOptions.fontRaduis*e}px;\n padding: ${a.initOptions.fontPaddingLeft*e}px ${a.initOptions.fontPaddingTop*e}px;`}}function Q(t){r(t),(a.touchType="addScaleLog")&&(a.touchType="",N.width=N.dom.offsetWidth,N.height=N.dom.offsetHeight,N.fontSize=parseFloat(N.dom.style.fontSize),a.steps.push({type:"scale_text",textId:N.dom.dataset.pedTextId,scale:a.currentScale,fontSize:L.initFontSize}))}function R(){a.operateType=0,s(),z&&(z.src=I)}var B=i(72),U=i.n(B),W=i(825),P=i.n(W),k=i(659),Z=i.n(k),H=i(56),$=i.n(H),G=i(540),F=i.n(G),V=i(113),J=i.n(V),X=i(594),_={};_.styleTagTransform=J(),_.setAttributes=$(),_.insert=Z().bind(null,"head"),_.domAPI=P(),_.insertStyleElement=F(),U()(X.A,_),X.A&&X.A.locals&&X.A.locals;class q{constructor(t,e){if(M(e),this.getDeviceInfo(),"string"==typeof t)this.getImgInfo(t);else{if(!t.target||"IMG"!==t.target.tagName)throw new Error("Not supported");this.parseImgInfo(t.target)}}parseImgInfo(t){a.img={width:t.naturalWidth,height:t.naturalHeight,WH:t.naturalWidth/t.naturalHeight,HW:t.naturalHeight/t.naturalWidth},a.imgInstance=t,this.showImg()}getImgInfo(t){let e=new Image;e.crossOrigin="anonymous",e.onload=()=>{a.img={width:e.width,height:e.height,WH:e.width/e.height,HW:e.height/e.width},a.imgInstance=e,this.showImg()},e.onerror=()=>reject(new Error("Image loading failed")),e.src=t}getDeviceInfo(){a.device={width:window.innerWidth,height:window.innerHeight,dpr:window.devicePixelRatio}}showImg(){const t=a.device.width-2*a.initOptions.spaceLeft,e=Math.floor(t*a.img.HW);a.canvasInitCssSize={width:t,height:e};const i=g(o),n=g(`<canvas width="${a.img.width*a.device.dpr}"\n height="${a.img.height*a.device.dpr}"\n style="width: ${t+"px"};\n height: ${e+"px"};\n transform-origin: left top;">\n </canvas>`),M=i.querySelector(".canvas-box");i.style.cssText=`height: ${a.device.height}px; width: ${a.device.width}px`,M.appendChild(n),document.body.appendChild(i),a.canvas=n,a.canvasContext=a.canvas.getContext("2d",{antialias:!0}),a.canvasContext.drawImage(a.imgInstance,0,0,a.canvas.width,a.canvas.height),a.canvasBox=a.canvas.parentElement,a.pedEdit=a.canvasBox.parentElement,a.ped=a.pedEdit.parentElement,a.textContent=a.ped.lastElementChild,a.textInput=a.textContent.firstElementChild;const c=a.pedEdit.getBoundingClientRect();a.editSize={width:c.width,height:c.height};let s=0;s=a.editSize.height>e+2*a.initOptions.spaceTop?a.editSize.height:e+2*a.initOptions.spaceTop,a.canvasBox.style.cssText=`height: ${s}px; width: ${a.editSize.width}px`,h()}}return n})()));
|
package/package.json
CHANGED
package/README_CN.md
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
# 介绍
|
|
2
|
-
用原生js和canvas写的一个移动端图片编辑器
|
|
3
|
-
|
|
4
|
-
# 使用方法
|
|
5
|
-
1. 参考index.html引入文件
|
|
6
|
-
|
|
7
|
-
# 参数说明
|
|
8
|
-
| 参数名称 | 默认值 | 类型 | 说明 |
|
|
9
|
-
|---------|-------|------|------|
|
|
10
|
-
| spaceLeft | 30 | number | 初始化图片的左右间距 |
|
|
11
|
-
| spaceTop | 30 | number | 距离顶部和底部的距离 |
|
|
12
|
-
| fontSize | 14 | number | 文字大小 |
|
|
13
|
-
| fontPaddingLeft | 3 | number | 文字上下padding |
|
|
14
|
-
| fontPaddingTop | 5 | number | 文字左右padding |
|
|
15
|
-
| fontRaduis | 5 | number | 文字圆角半径 |
|
|
16
|
-
| fontLineHeight | 1.2 | number | 文字行高比例 |
|
|
17
|
-
| fontLineWidth | 5 | number | 线条宽度 |
|
|
18
|
-
| fontShadowBlur | 5 | number | 线条阴影 |
|
|
19
|
-
| operatePaddingLeft | 28 | number | 操作模块的左右边距 |
|
|
20
|
-
| operatePaddingTop | 10 | number | 操作模块的上下边距 |
|
|
21
|
-
| fontColor | '#000000' | string | 文字颜色 |
|
|
22
|
-
| fontBgColor | '#ffffff' | string | 文字背景颜色 |
|
|
23
|
-
| fontFamily | "Arial" | string | 字体 |
|
|
24
|
-
| textOperateColor | "#884cf3" | string | 操作模块的边框颜色 |
|
|
25
|
-
| getDataURL | () => {} | function | 回调函数，获取编辑后的图片 |
|
|
26
|
-
| outType | 'image/jpeg' | string | image/png、image/webp、image/jpeg |
|
|
27
|
-
| encoderOptions | 1 | number | outType 为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择导出图片的质量 |
|
|
28
|
-
|
|
29
|
-
# 功能说明
|
|
30
|
-
1. 支持 vue、react、原生 js 项目的 h5 页面
|
|
31
|
-
1. 可以双指放大缩小图片
|
|
32
|
-
2. 可以在图片上进行涂鸦
|
|
33
|
-
3. 可以输入文字和输入法表情
|
|
34
|
-
4. 文字后可以单指移动文字
|
|
35
|
-
5. 点击文字后，点击操作右上角的按钮拖拽可以放大缩小文字。点击操作底部图标可以旋转文字
|
|
36
|
-
6. 可以撤回内容
|
|
37
|
-
7. 支持原图导出，也可以导出图片压缩质量
|
|
38
|
-
|
|
39
|
-
# 如何构建
|
|
40
|
-
|
|
41
|
-
```shell
|
|
42
|
-
yarn & yarn serve
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
欢迎star
|
package/favicon.ico
DELETED
|
Binary file
|
package/index.html
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
|
|
7
|
-
<link rel="icon" href="./favicon.ico" />
|
|
8
|
-
<title>PED Demo</title>
|
|
9
|
-
<style>
|
|
10
|
-
html,
|
|
11
|
-
body {
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
margin: 0;
|
|
15
|
-
font-family: Arial;
|
|
16
|
-
}
|
|
17
|
-
</style>
|
|
18
|
-
</head>
|
|
19
|
-
|
|
20
|
-
<body>
|
|
21
|
-
<img src="./src/assets/test1.jpg" style="width: 10rem" onclick="showImage(event)">
|
|
22
|
-
<img src="https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
|
|
23
|
-
style="width: 10rem"
|
|
24
|
-
onclick="showImage(`https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960`)">
|
|
25
|
-
<!-- <div class="picture-edit-frame">
|
|
26
|
-
<div class="save-btn" operate="save">保存</div>
|
|
27
|
-
</div> -->
|
|
28
|
-
<script>
|
|
29
|
-
function showImage(event) {
|
|
30
|
-
new PED.drawing(event, {
|
|
31
|
-
spaceLeft: 15,
|
|
32
|
-
getDataURL(data) {
|
|
33
|
-
const img = document.createElement('img');
|
|
34
|
-
img.src = data;
|
|
35
|
-
img.style.width = '90vw';
|
|
36
|
-
img.style.marginLeft = '5vw';
|
|
37
|
-
document.body.appendChild(img);
|
|
38
|
-
}
|
|
39
|
-
})
|
|
40
|
-
}
|
|
41
|
-
</script>
|
|
42
|
-
</body>
|
|
43
|
-
|
|
44
|
-
</html>
|
package/src/assets/cancel.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739712526641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6914" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M639.125 512l217.96875-217.96875c14.4375-14.4375 14.4375-40.03125 0-54.46875l-72.65625-72.65625c-14.4375-14.4375-40.125-14.4375-54.46875 0L512 384.78125 294.03125 166.8125c-14.4375-14.4375-40.125-14.4375-54.46875 0l-72.65625 72.65625c-14.4375 14.4375-14.4375 40.125 0 54.46875L384.78125 512 166.8125 729.96875c-14.4375 14.4375-14.4375 40.125 0 54.46875l72.65625 72.65625c14.4375 14.4375 40.125 14.4375 54.46875 0L512 639.125l217.96875 217.96875c14.4375 14.4375 40.125 14.4375 54.46875 0l72.65625-72.65625c14.4375-14.4375 14.4375-40.03125 0-54.46875L639.125 512z" p-id="6915"></path></svg>
|
package/src/assets/delete.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744341470629" class="icon" viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5813" xmlns:xlink="http://www.w3.org/1999/xlink" width="128.75" height="128"><path d="M409.6 896c-19.2 0-32-12.8-32-32V364.8c0-19.2 12.8-32 32-32s32 12.8 32 32v492.8c0 25.6-12.8 38.4-32 38.4zM614.4 889.6c-19.2 0-32-12.8-32-32V371.2c0-19.2 12.8-32 32-32s32 12.8 32 32v480c0 25.6-12.8 38.4-32 38.4z" fill="#ffffff" p-id="5814"></path><path d="M755.2 1024H268.8c-44.8 0-76.8-38.4-76.8-89.6V339.2c0-19.2 12.8-38.4 38.4-38.4s38.4 19.2 38.4 38.4v595.2c0 6.4 6.4 12.8 6.4 12.8h486.4V339.2c0-19.2 19.2-38.4 38.4-38.4s32 19.2 32 38.4v595.2c0 51.2-32 89.6-76.8 89.6zM985.6 185.6h-243.2V83.2C742.4 38.4 704 0 652.8 0H371.2C320 0 281.6 38.4 281.6 83.2V185.6H38.4c-19.2 0-38.4 19.2-38.4 38.4s19.2 38.4 38.4 38.4H992c19.2 0 38.4-19.2 38.4-38.4s-25.6-38.4-44.8-38.4zM358.4 83.2c0-6.4 6.4-12.8 12.8-12.8h288c6.4 0 12.8 6.4 12.8 12.8v89.6c0 6.4-6.4 12.8-12.8 12.8H371.2c-6.4 0-12.8-6.4-12.8-12.8V83.2z" fill="#ffffff" p-id="5815"></path></svg>
|
package/src/assets/painting.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744339516300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2658" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="144"><path d="M745.76 369.86l-451 537.48a18.693 18.693 0 0 1-8.46 5.74l-136.58 45.27c-13.24 4.39-26.46-6.71-24.43-20.5l20.86-142.36c0.5-3.44 1.95-6.67 4.19-9.33l451-537.48c6.65-7.93 18.47-8.96 26.4-2.31l115.71 97.1c7.92 6.64 8.96 18.46 2.31 26.39zM894.53 192.56l-65.9 78.53c-6.65 7.93-18.47 8.96-26.4 2.31l-115.71-97.1c-7.93-6.65-8.96-18.47-2.31-26.4l65.9-78.53c6.65-7.93 18.47-8.96 26.4-2.31l115.71 97.1c7.93 6.65 8.96 18.47 2.31 26.4z" fill="#1296db" p-id="2659"></path></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744339516300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2658" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="144"><path d="M745.76 369.86l-451 537.48a18.693 18.693 0 0 1-8.46 5.74l-136.58 45.27c-13.24 4.39-26.46-6.71-24.43-20.5l20.86-142.36c0.5-3.44 1.95-6.67 4.19-9.33l451-537.48c6.65-7.93 18.47-8.96 26.4-2.31l115.71 97.1c7.92 6.64 8.96 18.46 2.31 26.39zM894.53 192.56l-65.9 78.53c-6.65 7.93-18.47 8.96-26.4 2.31l-115.71-97.1c-7.93-6.65-8.96-18.47-2.31-26.4l65.9-78.53c6.65-7.93 18.47-8.96 26.4-2.31l115.71 97.1c7.93 6.65 8.96 18.47 2.31 26.4z" fill="#ffffff" p-id="2659"></path></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743133007211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5050" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="144"><path d="M896.739769 522.987463L543.250653 169.10453A39.381586 39.381586 0 0 0 514.974674 157.605107c-1.338974-0.157526-2.520422-0.787632-3.938158-0.787631a39.145297 39.145297 0 0 0-15.988924 3.544342 38.830244 38.830244 0 0 0-13.704792 8.663949l-318.990847 316.706715a39.22406 39.22406 0 1 0 55.685563 55.449273l253.617414-251.884624v689.571571c0 21.659872 17.642951 39.145297 39.381586 39.145297s39.381586-17.485424 39.381586-39.145297v-691.54065L840.817917 578.200446a39.381586 39.381586 0 0 0 55.685563 0.157526 38.909007 38.909007 0 0 0 0.157526-55.370509z m47.257904-444.46058H78.075359a39.302823 39.302823 0 0 1-39.381586-39.145297c0-21.581109 17.642951-39.145297 39.381586-39.145296H943.997673a39.22406 39.22406 0 1 1 0 78.290593z" fill="#2c2c2c" p-id="5051"></path></svg>
|
package/src/assets/return.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744341268412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4440" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="168"><path d="M5.835093 329.386667a35.456 35.456 0 0 0 8.192 11.264l204.288 202.666666a48.213333 48.213333 0 0 0 67.882667 0 46.933333 46.933333 0 0 0 0-67.370666L164.299093 354.944h472.832c146.133333 0 264.448 117.418667 264.448 262.442667s-118.314667 262.442667-264.448 262.442666H156.064427a48.128 48.128 0 0 0-48.384 48c0 26.581333 21.632 48 48.384 48h481.066666c199.082667 0 360.661333-160.298667 360.661334-357.930666 0-197.589333-161.578667-357.973333-360.661334-357.973334H164.299093l121.898667-121.472a47.36 47.36 0 0 0 0-67.413333 47.786667 47.786667 0 0 0-67.882667 0L14.027093 273.237333c-14.933333 14.762667-18.346667 37.717333-8.192 56.192z" fill="#ffffff" p-id="4441"></path></svg>
|
package/src/assets/rotate.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743125287119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7545" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="144"><path d="M929 849a30 30 0 0 1-30-30v-83.137a447.514 447.514 0 0 1-70.921 92.209C722.935 933.225 578.442 975.008 442 953.482a444.917 444.917 0 0 1-241.139-120.591 30 30 0 1 1 37.258-47.01l0.231-0.231A385.175 385.175 0 0 0 442 892.625v-0.006c120.855 22.123 250.206-13.519 343.656-106.975a386.646 386.646 0 0 0 70.6-96.653h-87.247a30 30 0 0 1 0-60H929a30 30 0 0 1 30 30V819a30 30 0 0 1-30 30zM632 342a50 50 0 0 1 50 50v240a50 50 0 0 1-50 50H392a50 50 0 0 1-50-50V392a50 50 0 0 1 50-50h240zM402 607a15 15 0 0 0 15 15h190a15 15 0 0 0 15-15V417a15 15 0 0 0-15-15H417a15 15 0 0 0-15 15v190z m403.005-362.025a29.87 29.87 0 0 1-19.117-6.882l-0.232 0.231A386.5 386.5 0 0 0 689.478 168h-0.011c-145.646-75.182-329.021-51.747-451.117 70.35a386.615 386.615 0 0 0-70.6 96.65H255a30 30 0 0 1 0 60H95a30 30 0 0 1-30-30V205a30 30 0 0 1 60 0v83.129a447.534 447.534 0 0 1 70.923-92.206C317.981 73.866 493.048 37.2 647 85.836v-0.045a444.883 444.883 0 0 1 176.143 105.291 30 30 0 0 1-18.138 53.893z" fill="#2c2c2c" p-id="7546"></path></svg>
|
package/src/assets/save.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1739712834115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M323 154H212c-15.464 0-28 12.536-28 28v660c0 15.464 12.536 28 28 28h32V655.255a68 68 0 0 1 19.917-48.083l51.255-51.255A68 68 0 0 1 363.255 536h297.49a68 68 0 0 1 48.083 19.917l51.255 51.255A68 68 0 0 1 780 655.255V870h32c15.464 0 28-12.536 28-28V355.51a28 28 0 0 0-8.201-19.8L701 204.913V372c0 19.882-16.118 36-36 36H359c-19.882 0-36-16.118-36-36V154z m72 0v182h234V154H395z m517 201.51V842c0 55.228-44.772 100-100 100H212c-55.228 0-100-44.772-100-100V182c0-55.228 44.772-100 100-100h426.49a100 100 0 0 1 70.711 29.29l173.51 173.509A100 100 0 0 1 912 355.509zM659.088 608H364.912L316 656.912V870h392V656.912L659.088 608zM530.5 209.5c0-19.882 16.118-36 36-36s36 16.118 36 36v65.164c0 19.883-16.118 36-36 36s-36-16.117-36-36V209.5z" fill="#333333" p-id="6940"></path></svg>
|
package/src/assets/scale.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741399117151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2785" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852.68743 966.232318 171.311547 966.232318c-62.714867 0-113.562988-50.846038-113.562988-113.558335L57.748558 171.324994c0-62.712297 50.848122-113.558335 113.562988-113.558335l681.376907 0c62.714867 0 113.562988 50.846038 113.562988 113.558335l0 681.348989C966.250418 915.38628 915.40332 966.232318 852.68743 966.232318zM909.469948 171.324994c0-31.356149-25.424061-56.779168-56.781494-56.779168L171.311547 114.545826c-31.357433 0-56.781494 25.423019-56.781494 56.779168l0 681.348989c0 31.357172 25.424061 56.779168 56.781494 56.779168l681.376907 0c31.358457 0 56.781494-25.423019 56.781494-56.779168L909.469948 171.324994zM824.297706 483.610416c-15.665413 0-28.390747-12.697183-28.390747-28.389584l0.887243-186.638771L604.102866 461.264479l-40.145947-40.144302 193.023924-193.016015L568.782006 228.104161c-15.693044 0-28.390747-12.697183-28.390747-28.389584s12.697704-28.389584 28.390747-28.389584l254.711349 0c7.929925 0 15.082105 3.27151 20.238756 8.53949 5.490263 4.657067 8.955319 11.449773 8.955319 19.850094l0 255.506255C852.68743 470.913233 839.989727 483.610416 824.297706 483.610416zM455.219017 852.673983 200.506645 852.673983c-7.929925 0-15.082105-3.270487-20.239779-8.538467-5.489239-4.65809-8.955319-11.423167-8.955319-19.850094L171.311547 568.779168c0-15.692401 12.726357-28.389584 28.390747-28.389584 15.69202 0 28.390747 12.697183 28.390747 28.389584l-0.887243 186.6664 192.690312-192.710047 40.173577 40.143279-193.050531 193.016015 188.198837 0c15.69202 0 28.390747 12.697183 28.390747 28.389584C483.608741 839.9768 470.911038 852.673983 455.219017 852.673983z" fill="#272636" p-id="2786"></path></svg>
|
package/src/assets/test1.jpg
DELETED
|
Binary file
|
package/src/assets/test2.jpg
DELETED
|
Binary file
|
package/src/assets/text.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744341164825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3344" width="168" height="168" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M896 928H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32z m-736-64h704v-704h-704z" p-id="3345" fill="#ffffff"></path><path d="M704 352H320a32 32 0 0 1 0-64h384a32 32 0 0 1 0 64z" p-id="3346" fill="#ffffff"></path><path d="M512 736a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0v384a32 32 0 0 1-32 32z" p-id="3347" fill="#ffffff"></path></svg>
|
package/src/index.js
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import frame from './template/frame.html'
|
|
2
|
-
import { G, resetOptions } from './lib/global'
|
|
3
|
-
import * as U from './lib/utils';
|
|
4
|
-
import { initListener } from './lib/listeners';
|
|
5
|
-
import './template/frame.less'
|
|
6
|
-
|
|
7
|
-
if (process.env.NODE_ENV === "development") {
|
|
8
|
-
import('./lib/vconsole.min.js').then((module) => {
|
|
9
|
-
new module.default()
|
|
10
|
-
})
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
class drawing {
|
|
14
|
-
constructor(url, options) {
|
|
15
|
-
resetOptions(options)
|
|
16
|
-
this.getDeviceInfo()
|
|
17
|
-
if (typeof url === 'string') {
|
|
18
|
-
this.getImgInfo(url)
|
|
19
|
-
} else if (url.target && url.target.tagName === 'IMG') {
|
|
20
|
-
this.parseImgInfo(url.target)
|
|
21
|
-
} else {
|
|
22
|
-
throw new Error('Not supported')
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
parseImgInfo(target) {
|
|
27
|
-
G.img = {
|
|
28
|
-
width: target.naturalWidth,
|
|
29
|
-
height: target.naturalHeight,
|
|
30
|
-
WH: target.naturalWidth / target.naturalHeight,
|
|
31
|
-
HW: target.naturalHeight / target.naturalWidth
|
|
32
|
-
}
|
|
33
|
-
G.imgInstance = target
|
|
34
|
-
this.showImg()
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
getImgInfo(url) {
|
|
38
|
-
let img = new Image()
|
|
39
|
-
img.crossOrigin = 'anonymous';
|
|
40
|
-
img.onload = () => {
|
|
41
|
-
G.img = {
|
|
42
|
-
width: img.width,
|
|
43
|
-
height: img.height,
|
|
44
|
-
WH: img.width / img.height,
|
|
45
|
-
HW: img.height / img.width,
|
|
46
|
-
}
|
|
47
|
-
G.imgInstance = img
|
|
48
|
-
this.showImg()
|
|
49
|
-
}
|
|
50
|
-
img.onerror = () => reject(new Error("Image loading failed"));
|
|
51
|
-
img.src = url
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
getDeviceInfo() {
|
|
55
|
-
G.device = {
|
|
56
|
-
width: window.innerWidth,
|
|
57
|
-
height: window.innerHeight,
|
|
58
|
-
dpr: window.devicePixelRatio,
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
showImg() {
|
|
63
|
-
const canvasWidth = G.device.width - G.initOptions.spaceLeft * 2
|
|
64
|
-
const canvasHeight = Math.floor(canvasWidth * G.img.HW)
|
|
65
|
-
G.canvasInitCssSize = {
|
|
66
|
-
width: canvasWidth,
|
|
67
|
-
height: canvasHeight,
|
|
68
|
-
}
|
|
69
|
-
const _ped = U.stringToNode(frame)
|
|
70
|
-
const _canvas = U.stringToNode(`<canvas width="${G.img.width * G.device.dpr}"
|
|
71
|
-
height="${G.img.height * G.device.dpr}"
|
|
72
|
-
style="width: ${canvasWidth + 'px'};
|
|
73
|
-
height: ${canvasHeight + 'px'};
|
|
74
|
-
transform-origin: left top;">
|
|
75
|
-
</canvas>`)
|
|
76
|
-
const _canvasBox = _ped.querySelector('.canvas-box')
|
|
77
|
-
_ped.style.cssText = `height: ${G.device.height}px; width: ${G.device.width}px`
|
|
78
|
-
_canvasBox.appendChild(_canvas)
|
|
79
|
-
document.body.appendChild(_ped)
|
|
80
|
-
G.canvas = _canvas
|
|
81
|
-
G.canvasContext = G.canvas.getContext('2d', { antialias: true })
|
|
82
|
-
G.canvasContext.drawImage(G.imgInstance, 0, 0, G.canvas.width, G.canvas.height)
|
|
83
|
-
G.canvasBox = G.canvas.parentElement
|
|
84
|
-
G.pedEdit = G.canvasBox.parentElement
|
|
85
|
-
G.ped = G.pedEdit.parentElement
|
|
86
|
-
G.textContent = G.ped.lastElementChild
|
|
87
|
-
G.textInput = G.textContent.firstElementChild
|
|
88
|
-
|
|
89
|
-
// 获取可操作区域的宽高
|
|
90
|
-
const editRect = G.pedEdit.getBoundingClientRect()
|
|
91
|
-
G.editSize = {
|
|
92
|
-
width: editRect.width,
|
|
93
|
-
height: editRect.height,
|
|
94
|
-
}
|
|
95
|
-
let _boxHeight = 0
|
|
96
|
-
if (G.editSize.height > canvasHeight + 2 * G.initOptions.spaceTop) {
|
|
97
|
-
_boxHeight = G.editSize.height
|
|
98
|
-
} else {
|
|
99
|
-
_boxHeight = canvasHeight + 2 * G.initOptions.spaceTop
|
|
100
|
-
}
|
|
101
|
-
G.canvasBox.style.cssText = `height: ${_boxHeight}px; width: ${G.editSize.width}px`
|
|
102
|
-
if (process.env.NODE_ENV === "development") {
|
|
103
|
-
console.log('imgInfo=', G.img);
|
|
104
|
-
console.log('deviceInfo=', G.device);
|
|
105
|
-
console.log('editInfo=', G.editSize);
|
|
106
|
-
}
|
|
107
|
-
initListener()
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
export {
|
|
112
|
-
drawing
|
|
113
|
-
};
|
package/src/lib/GLOBAL.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
let PED_GlOBAL = {}
|
|
2
|
-
|
|
3
|
-
function resetOptions(options = {}) {
|
|
4
|
-
PED_GlOBAL = {
|
|
5
|
-
initOptions: {
|
|
6
|
-
spaceLeft: 30,
|
|
7
|
-
spaceTop: 30,
|
|
8
|
-
fontSize: 14,
|
|
9
|
-
fontPaddingLeft: 3,
|
|
10
|
-
fontPaddingTop: 5,
|
|
11
|
-
fontRaduis: 5,
|
|
12
|
-
fontLineHeight: 1.2,
|
|
13
|
-
fontLineWidth: 5,
|
|
14
|
-
fontShadowBlur: 5,
|
|
15
|
-
maxScale: 2,
|
|
16
|
-
operatePaddingLeft: 28,
|
|
17
|
-
operatePaddingTop: 10,
|
|
18
|
-
fontColor: '#000000',
|
|
19
|
-
fontBgColor: '#ffffff',
|
|
20
|
-
fontFamily: "Arial",
|
|
21
|
-
textOperateColor: "#884cf3",
|
|
22
|
-
getDataURL: () => { },
|
|
23
|
-
outType: 'image/jpeg',
|
|
24
|
-
encoderOptions: 1,
|
|
25
|
-
...options,
|
|
26
|
-
},
|
|
27
|
-
imgInstance: undefined,
|
|
28
|
-
img: {
|
|
29
|
-
width: 0,
|
|
30
|
-
height: 0,
|
|
31
|
-
WH: 0,
|
|
32
|
-
HW: 0
|
|
33
|
-
},
|
|
34
|
-
device: {
|
|
35
|
-
width: 0,
|
|
36
|
-
height: 0,
|
|
37
|
-
dpr: 1,
|
|
38
|
-
},
|
|
39
|
-
operateType: 0,
|
|
40
|
-
canvas: undefined,
|
|
41
|
-
canvasContext: undefined,
|
|
42
|
-
canvasInitCssSize: {
|
|
43
|
-
width: 0,
|
|
44
|
-
height: 0,
|
|
45
|
-
},
|
|
46
|
-
canvasBox: undefined,
|
|
47
|
-
ped: undefined,
|
|
48
|
-
pedEdit: undefined,
|
|
49
|
-
editSize: {
|
|
50
|
-
width: 0,
|
|
51
|
-
height: 0
|
|
52
|
-
},
|
|
53
|
-
preScale: 1,
|
|
54
|
-
currentScale: 1,
|
|
55
|
-
scrollPercent: {
|
|
56
|
-
width: 1,
|
|
57
|
-
height: 1,
|
|
58
|
-
},
|
|
59
|
-
outerPosition: {
|
|
60
|
-
x: 0,
|
|
61
|
-
y: 0,
|
|
62
|
-
},
|
|
63
|
-
screenPosition: {
|
|
64
|
-
x: 0,
|
|
65
|
-
y: 0,
|
|
66
|
-
},
|
|
67
|
-
textContent: undefined,
|
|
68
|
-
textInput: undefined,
|
|
69
|
-
touchType: '',
|
|
70
|
-
textId: 2,
|
|
71
|
-
textsInfo: {},
|
|
72
|
-
steps: [],
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export { PED_GlOBAL as G, resetOptions }
|
package/src/lib/Utils.js
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { G, resetOptions } from './global'
|
|
2
|
-
|
|
3
|
-
export function lockBox() {
|
|
4
|
-
G.pedEdit.style.overflow = 'hidden'
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export function unLockBox() {
|
|
8
|
-
G.pedEdit.style.overflow = 'auto'
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export function removePed() {
|
|
12
|
-
G.ped.remove()
|
|
13
|
-
resetOptions()
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export function simpleEvent(e) {
|
|
17
|
-
e.stopPropagation()
|
|
18
|
-
e.preventDefault()
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export function stringToNode(htmlString) {
|
|
22
|
-
const container = document.createElement('div')
|
|
23
|
-
container.innerHTML = htmlString.trim()
|
|
24
|
-
return container.firstElementChild
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function drawPanel(canvasScale, textInfo, textReact, canvasRect) {
|
|
28
|
-
const ctx = G.canvasContext
|
|
29
|
-
ctx.save()
|
|
30
|
-
|
|
31
|
-
// 计算缩放后的尺寸和位置
|
|
32
|
-
const width = textReact.width * canvasScale
|
|
33
|
-
const height = textReact.height * canvasScale
|
|
34
|
-
const x = (textReact.left - canvasRect.left) * canvasScale
|
|
35
|
-
const y = (textReact.top - canvasRect.top) * canvasScale
|
|
36
|
-
const borderRadius = textInfo.fontSize / G.initOptions.fontSize * G.initOptions.fontRaduis * canvasScale
|
|
37
|
-
const fontSize = textInfo.fontSize * canvasScale
|
|
38
|
-
|
|
39
|
-
// 计算中心点
|
|
40
|
-
const centerX = x + width / 2
|
|
41
|
-
const centerY = y + height / 2
|
|
42
|
-
|
|
43
|
-
// 应用旋转
|
|
44
|
-
ctx.translate(centerX, centerY)
|
|
45
|
-
ctx.rotate(textInfo.rotate * Math.PI / 180)
|
|
46
|
-
ctx.translate(-centerX, -centerY)
|
|
47
|
-
|
|
48
|
-
// 绘制面板
|
|
49
|
-
ctx.beginPath()
|
|
50
|
-
ctx.moveTo(x + borderRadius, y)
|
|
51
|
-
ctx.arcTo(x + width, y, x + width, y + borderRadius, borderRadius)
|
|
52
|
-
ctx.arcTo(x + width, y + height, x + width - borderRadius, y + height, borderRadius)
|
|
53
|
-
ctx.arcTo(x, y + height, x, y + height - borderRadius, borderRadius)
|
|
54
|
-
ctx.arcTo(x, y, x + borderRadius, y, borderRadius)
|
|
55
|
-
ctx.closePath()
|
|
56
|
-
|
|
57
|
-
ctx.fillStyle = 'white'
|
|
58
|
-
ctx.lineWidth = 1
|
|
59
|
-
ctx.lineCap = 'butt'
|
|
60
|
-
ctx.lineJoin = 'miter'
|
|
61
|
-
ctx.shadowBlur = 0
|
|
62
|
-
ctx.shadowColor = '#ffffff'
|
|
63
|
-
ctx.strokeStyle = 'white'
|
|
64
|
-
ctx.fill()
|
|
65
|
-
ctx.stroke()
|
|
66
|
-
|
|
67
|
-
// 设置文字样式
|
|
68
|
-
ctx.font = `${Math.round(fontSize)}px ${G.initOptions.fontFamily}`
|
|
69
|
-
ctx.textAlign = 'left'
|
|
70
|
-
ctx.textBaseline = 'middle'
|
|
71
|
-
ctx.fillStyle = 'black'
|
|
72
|
-
|
|
73
|
-
// 计算文字位置
|
|
74
|
-
const lineHeight = fontSize * G.initOptions.fontLineHeight
|
|
75
|
-
const textScale = fontSize / G.initOptions.fontSize / canvasScale
|
|
76
|
-
const startX = x + G.initOptions.fontPaddingTop * canvasScale * textScale
|
|
77
|
-
const startY = y + G.initOptions.fontPaddingLeft * canvasScale * textScale + lineHeight / 2
|
|
78
|
-
|
|
79
|
-
// 绘制多行文本
|
|
80
|
-
textInfo.textArray.forEach((line, index) => {
|
|
81
|
-
const textY = startY + index * lineHeight
|
|
82
|
-
ctx.fillText(line, startX, textY)
|
|
83
|
-
});
|
|
84
|
-
ctx.restore()
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
export function getDistance(touches) {
|
|
88
|
-
const dx = touches[1].clientX - touches[0].clientX
|
|
89
|
-
const dy = touches[1].clientY - touches[0].clientY
|
|
90
|
-
return Math.hypot(dx, dy)
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export function throttle(func, delay) {
|
|
94
|
-
let lastCall = 0;
|
|
95
|
-
return function (...args) {
|
|
96
|
-
const now = Date.now()
|
|
97
|
-
if (now - lastCall < delay) return
|
|
98
|
-
lastCall = now
|
|
99
|
-
func.apply(this, args)
|
|
100
|
-
}
|
|
101
|
-
}
|