picture_edit 2.1.2 → 3.0.0
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/dist/index.html +1 -1
- package/dist/picture-edit.js +1 -1
- package/package.json +1 -1
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><link rel="icon" href="f7eef546d302bcf9d3b9.ico"/><title>PED Demo</title><style>body,html{width:100%;height:100%;margin:0;font-family:Arial}</style><script defer="defer" src="picture-edit.js"></script></head><body><img src="1887594f3dabac2fddbe.jpg" style="width:10rem" onclick="showImage(event)"> <img src="https://gips2.baidu.com/it/u=
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><link rel="icon" href="f7eef546d302bcf9d3b9.ico"/><title>PED Demo</title><style>body,html{width:100%;height:100%;margin:0;font-family:Arial}</style><script defer="defer" src="picture-edit.js"></script></head><body><img src="1887594f3dabac2fddbe.jpg" style="width:10rem" onclick="showImage(event)"> <img src="https://gips2.baidu.com/it/u=641660390,3943119249&fm=3074&app=3074&f=PNG?w=2560&h=1440" style="width:10rem" onclick='showImage("https://gips2.baidu.com/it/u=641660390,3943119249&fm=3074&app=3074&f=PNG?w=2560&h=1440")'><script>function showImage(e){new PED.drawing(e,{spaceLeft:15,getDataURL(e){const t=document.createElement("img");t.src=e,t.style.width="90vw",t.style.marginLeft="5vw",document.body.appendChild(t)}})}</script></body></html>
|
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 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})()));
|
|
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={56(t,e,n){t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},72(t){var e=[];function n(t){for(var n=-1,i=0;i<e.length;i++)if(e[i].identifier===t){n=i;break}return n}function i(t,i){for(var a={},s=[],r=0;r<t.length;r++){var c=t[r],d=i.base?c[0]+i.base:c[0],l=a[d]||0,p="".concat(d," ").concat(l);a[d]=l+1;var g=n(p),u={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==g)e[g].references++,e[g].updater(u);else{var f=o(u,i);i.byIndex=r,e.splice(r,0,{identifier:p,updater:f,references:1})}s.push(p)}return s}function o(t,e){var n=e.domAPI(e);return n.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;n.update(t=e)}else n.remove()}}t.exports=function(t,o){var a=i(t=t||[],o=o||{});return function(t){t=t||[];for(var s=0;s<a.length;s++){var r=n(a[s]);e[r].references--}for(var c=i(t,o),d=0;d<a.length;d++){var l=n(a[d]);0===e[l].references&&(e[l].updater(),e.splice(l,1))}a=c}}},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))}}},186(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIi8+PC9zdmc+Cg=="},270(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDE5bDctNyAzIDMtNyA3LTMtM3oiLz48cGF0aCBkPSJNMTggMTNsLTEuNS03LjVMMiAybDMuNSAxNC41TDEzIDE4bDUtNXoiLz48cGF0aCBkPSJNMiAybDcuNTg2IDcuNTg2Ii8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMiIvPjwvc3ZnPgo="},314(t){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n="",i=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),i&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),i&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n}).join("")},e.i=function(t,n,i,o,a){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(i)for(var r=0;r<this.length;r++){var c=this[r][0];null!=c&&(s[c]=!0)}for(var d=0;d<t.length;d++){var l=[].concat(t[d]);i&&s[l[0]]||(void 0!==a&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),e.push(l))}},e}},439(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjwvc3ZnPgo="},540(t){t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},568(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMyA2IDUgNiAyMSA2Ii8+PHBhdGggZD0iTTE5IDZ2MTRhMiAyIDAgMCAxLTIgMkg3YTIgMiAwIDAgMS0yLTJWNm0zIDBWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIi8+PGxpbmUgeDE9IjEwIiB5MT0iMTEiIHgyPSIxMCIgeTI9IjE3Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMTEiIHgyPSIxNCIgeTI9IjE3Ii8+PC9zdmc+Cg=="},571(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMSA0IDEgMTAgNyAxMCIvPjxwYXRoIGQ9Ik0zLjUxIDE1YTkgOSAwIDEgMCAyLjEzLTkuMzZMMSAxMCIvPjwvc3ZnPgo="},594(t,e,n){n.d(e,{A:()=>r});var i=n(601),o=n.n(i),a=n(314),s=n.n(a)()(o());s.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 touch-action: none;\n}\n.picture-edit-frame .body-content {\n flex: 1;\n background-color: #1a1a1a;\n overflow: auto;\n will-change: transform;\n -webkit-overflow-scrolling: touch;\n}\n.picture-edit-frame .cancel-btn {\n position: fixed;\n left: 12px;\n top: 12px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.45);\n z-index: 2;\n border-radius: 50%;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: background-color 0.2s;\n}\n.picture-edit-frame .cancel-btn:active {\n background-color: rgba(0, 0, 0, 0.7);\n}\n.picture-edit-frame .save-btn {\n position: fixed;\n right: 12px;\n top: 12px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(18, 150, 219, 0.85);\n z-index: 2;\n border-radius: 50%;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: background-color 0.2s;\n}\n.picture-edit-frame .save-btn:active {\n background-color: #1296db;\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: #111;\n height: 5em;\n display: flex;\n text-align: center;\n color: #fff;\n align-items: center;\n justify-content: space-around;\n padding: 0 8px;\n padding-bottom: env(safe-area-inset-bottom, 0);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n}\n.picture-edit-frame .operate-item {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n transition: background-color 0.15s;\n}\n.picture-edit-frame .operate-item:active {\n background-color: rgba(255, 255, 255, 0.12);\n}\n.picture-edit-frame .operate-img {\n width: 22px;\n height: 22px;\n pointer-events: none;\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: rgba(0, 0, 0, 0.75);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n}\n.picture-edit-frame .text-content .text-input {\n min-height: 15%;\n border-radius: 8px;\n border: 2px solid rgba(18, 150, 219, 0.7);\n outline: none;\n width: 92%;\n box-sizing: border-box;\n position: absolute;\n top: 8%;\n left: 4%;\n right: 4%;\n z-index: 2;\n padding: 8px 12px;\n font-size: 16px;\n color: #fff;\n background-color: rgba(255, 255, 255, 0.1);\n}\n.picture-edit-frame .text-content .text-input:focus {\n border-color: #1296db;\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: 22px;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n}\n.picture-edit-frame .operate-scale {\n position: absolute;\n width: 18px;\n height: 18px;\n background-color: #fff;\n right: -9px;\n top: -9px;\n border-radius: 50%;\n box-sizing: border-box;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n",""]);const r=s},601(t){t.exports=function(t){return t[1]}},604(t){t.exports="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iNCA3IDQgNCAyMCA0IDIwIDciLz48bGluZSB4MT0iOS41IiB5MT0iMjAiIHgyPSIxNC41IiB5Mj0iMjAiLz48bGluZSB4MT0iMTIiIHkxPSI0IiB4Mj0iMTIiIHkyPSIyMCIvPjwvc3ZnPgo="},659(t){var e={};t.exports=function(t,n){var i=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}},825(t){t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var i="";n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,o&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(i,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var a=e[i]={id:i,exports:{}};return t[i](a,a.exports,n),a.exports}n.m=t,n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.b="undefined"!=typeof document&&document.baseURI||self.location.href,n.nc=void 0;var i={};n.r(i),n.d(i,{drawing:()=>q});const o=`<div class="picture-edit-frame"> <div class="cancel-btn" operate="cancel"> <img src="${new URL(n(439),n.b)}" class="operate-img" operate="cancel" style="width:18px;height:18px"> </div> <div class="save-btn" operate="save"> <img src="${new URL(n(186),n.b)}" class="operate-img" operate="save" style="width:18px;height:18px"> </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(n(270),n.b)}" class="operate-img" operate="line"> </div> <div class="operate-item" operate="text"> <img src="${new URL(n(604),n.b)}" class="operate-img" operate="text"> </div> <div class="operate-item" operate="back"> <img src="${new URL(n(571),n.b)}" class="operate-img" operate="back"> </div> <div class="operate-item" operate="clear"> <img src="${new URL(n(568),n.b)}" class="operate-img" operate="clear"> </div> </div> <div class="text-content"> <div contenteditable="true" class="text-input"></div> </div> </div>`;let a={};function s(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 r(){a.pedEdit.style.overflow="hidden"}function c(){a.pedEdit.style.overflow="auto"}function d(){a.ped.remove(),s()}function l(t){t.stopPropagation(),t.preventDefault()}function p(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function g(t){const e=t[1].clientX-t[0].clientX,n=t[1].clientY-t[0].clientY;return Math.hypot(e,n)}var u=n(270);let f=0,h=1,x=null,m=null,v=null,y={coefficient:1,left:0,top:0},b={id:void 0,x:0,y:0,scale:1,left:0,top:0},I={x:0,y:0,centerX:0,centerY:0,initialRotation:0,startAngle:0},w={x:0,y:0,initFontSize:14,centerX:0,centerY:0,initialScale:1,initLength:0};function S(){if(a.textInput.innerText.length){let t=a.textInput.innerText.split(/[\n\r]/);const e=a.initOptions.fontSize*a.currentScale;let n=`<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++)n=n+t[e]+""+(e==t.length-1?"":"</br>");n+="</div>";let i=p(n);a.canvasBox.appendChild(i);const o=a.canvasBox.getBoundingClientRect(),s=i.getBoundingClientRect(),r=a.editSize.height/2-o.top-s.height/2,c=a.editSize.width/2-o.left-s.width/2;i.style.cssText=`${i.style.cssText}; transform: translate(${c}px, ${r}px) rotate(0deg);`;const d=a.textId++;i.dataset.pedTextId=d,a.textsInfo[d]={textArray:t,x:c,y:r,rotate:0,fontSize:e,fontColor:a.initOptions.fontColor,fontBgColor:a.initOptions.fontBgColor,width:s.width,height:s.height,dom:i},a.steps.push({type:"creat_text",textId:d}),i.addEventListener("touchstart",M),i.addEventListener("touchmove",P),i.addEventListener("touchend",z),i.addEventListener("click",C),a.textInput.innerText=""}a.textInput.removeEventListener("blur",S),a.textContent.style.display="none"}function C(t){l(t),function(t){T();const e=t.dataset.pedTextId;m=a.textsInfo[e];const n=a.initOptions.textOperateColor,i=`<div class="ped-operate-border" style="position: absolute;\n width: ${m.width+2*a.initOptions.operatePaddingLeft}px;\n height: ${m.height+2*a.initOptions.operatePaddingTop}px;\n left: ${m.x-a.initOptions.operatePaddingLeft}px;\n top: ${m.y-a.initOptions.operatePaddingTop}px;\n border: 1.5px dashed ${n};\n box-sizing: border-box;\n border-radius: 4px;\n background: transparent;\n transform: rotate(${m.rotate}deg);">\n </div>`;x=p(i);const o=p(`<div class="operate-rotate" style="position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);\n width:28px;height:28px;border-radius:50%;background:${n};\n display:flex;align-items:center;justify-content:center;\n box-shadow:0 2px 8px rgba(0,0,0,0.25);cursor:pointer;">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;pointer-events:none;">\n <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>\n </svg></div>`);o.addEventListener("touchstart",L),o.addEventListener("touchmove",A),o.addEventListener("touchend",$);const s=p(`<div class="operate-scale" style="position:absolute;right:-14px;top:-14px;\n width:28px;height:28px;border-radius:50%;background:#fff;\n display:flex;align-items:center;justify-content:center;\n box-shadow:0 2px 8px rgba(0,0,0,0.25);cursor:pointer;">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${n}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;pointer-events:none;">\n <polyline points="15 3 21 3 21 9"/><line x1="14" y1="10" x2="21" y2="3"/>\n <polyline points="9 21 3 21 3 15"/><line x1="10" y1="14" x2="3" y2="21"/>\n </svg></div>`);s.addEventListener("touchstart",j),s.addEventListener("touchmove",H),s.addEventListener("touchend",B),x.appendChild(o),x.appendChild(s),a.canvasBox.appendChild(x)}(t.currentTarget)}function T(){x&&x.remove()}function M(t){if(1===t.touches.length){const e=t.touches[0],n=t.currentTarget.dataset.pedTextId;let{x:i,y:o}=a.textsInfo[n];b={id:n,x:e.clientX,y:e.clientY,scale:a.currentScale,left:i,top:o}}}function P(t){if(l(t),1===t.touches.length){a.touchType="scaleCanvas",T();const e=t.currentTarget,n=e.dataset.pedTextId,i=t.touches[0].clientX-b.x+b.left,o=t.touches[0].clientY-b.y+b.top;e.style.cssText=`${e.style.cssText}; transform: translate(${i}px, ${o}px) rotate(${a.textsInfo[n].rotate}deg);`,a.textsInfo[n].x=i,a.textsInfo[n].y=o}}function z(){"scaleCanvas"===a.touchType&&(a.touchType="",a.steps.push({type:"move_text",textId:b.id,scale:b.scale,x:b.left,y:b.top}))}function Z(t,e){return Math.atan2(e,t)*(180/Math.PI)}function L(t){if(l(t),1===t.touches.length){const e=m.dom.getBoundingClientRect(),n=t.touches[0],i=n.clientX,o=n.clientY,a=e.left+e.width/2,s=e.top+e.height/2;I={x:i,y:o,centerX:a,centerY:s,initialRotation:m.rotate,startAngle:Z(i-a,o-s)}}}function A(t){if(l(t),1===t.touches.length){x.remove(),a.touchType="addRotateLog";const e=t.touches[0],n=Z(e.clientX-I.centerX,e.clientY-I.centerY)+I.initialRotation-I.startAngle;m.dom.style.cssText=`${m.dom.style.cssText}; transform: translate(${m.x}px, ${m.y}px) rotate(${n}deg)`,m.rotate=n}}function $(t){l(t),"addRotateLog"===a.touchType&&(a.touchType="",a.steps.push({type:"rotate_text",textId:m.dom.dataset.pedTextId,rotate:I.initialRotation}))}function j(t){if(l(t),1===t.touches.length){const e=m.dom.getBoundingClientRect(),n=t.touches[0];w={x:n.clientX,y:n.clientY,centerX:e.left+e.width/2,centerY:e.top+e.height/2,initFontSize:m.fontSize,initialScale:m.fontSize/a.initOptions.fontSize,initLength:g([n,{clientX:e.left+e.width/2,clientY:e.top+e.height/2}])}}}function H(t){if(l(t),1===t.touches.length){a.touchType="addScaleLog",T();const e=g([t.touches[0],{clientX:w.centerX,clientY:w.centerY}])/w.initLength*w.initialScale,n=a.initOptions.fontSize*e;m.dom.style.cssText=`${m.dom.style.cssText};\n font-size: ${n}px;\n line-height: ${n*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 B(t){l(t),"addScaleLog"===a.touchType&&(a.touchType="",m.width=m.dom.offsetWidth,m.height=m.dom.offsetHeight,m.fontSize=parseFloat(m.dom.style.fontSize),a.steps.push({type:"scale_text",textId:m.dom.dataset.pedTextId,scale:a.currentScale,fontSize:w.initFontSize}))}function E(){a.operateType=0,c(),v&&(v.src=u)}var N=n(72),k=n.n(N),D=n(825),O=n.n(D),R=n(659),W=n.n(R),X=n(56),J=n.n(X),Y=n(540),G=n.n(Y),U=n(113),F=n.n(U),V=n(594),_={};_.styleTagTransform=F(),_.setAttributes=J(),_.insert=W().bind(null,"head"),_.domAPI=O(),_.insertStyleElement=G(),k()(V.A,_),V.A&&V.A.locals&&V.A.locals;class q{constructor(t,e){if(s(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 n=p(o),i=p(`<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>`),s=n.querySelector(".canvas-box");n.style.cssText=`height: ${a.device.height}px; width: ${a.device.width}px`,s.appendChild(i),document.body.appendChild(n),a.canvas=i,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 x=a.pedEdit.getBoundingClientRect();a.editSize={width:x.width,height:x.height};let m=0;m=a.editSize.height>e+2*a.initOptions.spaceTop?a.editSize.height:e+2*a.initOptions.spaceTop,a.canvasBox.style.cssText=`height: ${m}px; width: ${a.editSize.width}px`,function(){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(n=>{const i=a.textsInfo[n],o=i.dom;o.style.cssText=`${o.style.cssText}; transform: translate(${i.x}px, ${i.y}px) rotate(0deg)`;const s=o.getBoundingClientRect();!function(t,e,n,i){const o=a.canvasContext;o.save();const s=n.width*t,r=n.height*t,c=(n.left-i.left)*t,d=(n.top-i.top)*t,l=e.fontSize/a.initOptions.fontSize*a.initOptions.fontRaduis*t,p=e.fontSize*t,g=c+s/2,u=d+r/2;o.translate(g,u),o.rotate(e.rotate*Math.PI/180),o.translate(-g,-u),o.beginPath(),o.moveTo(c+l,d),o.arcTo(c+s,d,c+s,d+l,l),o.arcTo(c+s,d+r,c+s-l,d+r,l),o.arcTo(c,d+r,c,d+r-l,l),o.arcTo(c,d,c+l,d,l),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(p)}px ${a.initOptions.fontFamily}`,o.textAlign="left",o.textBaseline="middle",o.fillStyle="black";const f=p*a.initOptions.fontLineHeight,h=p/a.initOptions.fontSize/t,x=c+a.initOptions.fontPaddingTop*t*h,m=d+a.initOptions.fontPaddingLeft*t*h+f/2;e.textArray.forEach((t,e)=>{const n=m+e*f;o.fillText(t,x,n)}),o.restore()}(e,i,s,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,c()):(a.operateType=1,r()),v="DIV"===t.target.tagName?t.target.firstElementChild:t.target,v.src=0===a.operateType?u:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTI5NmRiIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDE5bDctNyAzIDMtNyA3LTMtM3oiLz48cGF0aCBkPSJNMTggMTNsLTEuNS03LjVMMiAybDMuNSAxNC41TDEzIDE4bDUtNXoiLz48cGF0aCBkPSJNMiAybDcuNTg2IDcuNTg2Ii8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMiIvPjwvc3ZnPgo=";else if("text"===e)E(),a.textContent.style.display="block",a.textInput.focus(),a.textInput.addEventListener("blur",S);else if("back"===e){if(E(),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,n=t.x*a.currentScale/t.scale,i=t.y*a.currentScale/t.scale;a.textsInfo[e].x=n,a.textsInfo[e].y=i,a.textsInfo[e].dom.style.cssText=`${a.textsInfo[e].dom.style.cssText}; transform: translate(${n}px, ${i}px) rotate(${a.textsInfo[e].rotate}deg);`}else if("scale_text"===t.type){const e=t.textId,n=a.textsInfo[e],i=t.fontSize*a.currentScale/t.scale;n.fontSize=i,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*(i/a.initOptions.fontSize)}px;\n padding: ${a.initOptions.fontPaddingLeft*(i/a.initOptions.fontSize)}px ${a.initOptions.fontPaddingTop*(i/a.initOptions.fontSize)}px;`;const o=n.dom.getBoundingClientRect();n.width=o.width,n.height=o.height}else if("rotate_text"===t.type){const e=t.textId,n=a.textsInfo[e];n.rotate=t.rotate,n.dom.style.cssText=`${n.dom.style.cssText}; \n transform: translate(${n.x}px, ${n.y}px) rotate(${t.rotate}deg);`}}}else"clear"===e&&d()}),a.canvas.addEventListener("touchstart",t=>{if(1===t.touches.length){if(1===a.operateType){l(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 n=a.canvas.getBoundingClientRect(),i=e.clientX-n.left,o=e.clientY-n.top,s=a.canvas.width/n.width;y={coefficient:s,left:n.left,top:n.top};const r=i*s,c=o*s;a.canvasContext.moveTo(r,c),a.steps.push({type:"line",start:{x:r,y:c},moves:[]})}}else if(2===t.touches.length){l(t),E(),r(),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,h=1,f=g(t.touches);const e=t.touches[0],n=t.touches[1],i=(e.clientX+n.clientX)/2,o=(e.clientY+n.clientY)/2,s=a.canvas.getBoundingClientRect(),c=a.canvasBox.getBoundingClientRect();a.screenPosition={x:i,y:o},a.outerPosition={x:i-c.left,y:o-c.top},a.canvas.style.transformOrigin=`${i-s.left}px ${o-s.top}px`}});let t=0;a.canvas.addEventListener("touchmove",e=>{if(1===e.touches.length){if(1===a.operateType){l(e);const t=e.touches[0],n=t.clientX-y.left,i=t.clientY-y.top,o=n*y.coefficient,s=i*y.coefficient;a.canvasContext.lineTo(o,s),a.canvasContext.stroke();let r=a.steps.length-1;a.steps[r].moves.push({x:o,y:s})}}else 2===e.touches.length&&1!==a.operateType&&"scaleCanvas"===a.touchType&&(l(e),cancelAnimationFrame(t),t=requestAnimationFrame(()=>function(t){const e=g(t.touches)/f;h=e,a.canvas.style.transform=`scale(${e})`}(e)))}),a.canvas.addEventListener("touchend",t=>{if(0===t.touches.length&&"scaleCanvas"===a.touchType){f=0,a.touchType="";const t=a.canvasBox.getBoundingClientRect(),e=t.width,n=t.height,i=e*h,o=n*h,s=a.canvas.getBoundingClientRect();a.canvas.style.cssText=`width: ${s.width}px; height: ${s.height}; transform: scale(1); transform-origin: center`,a.canvasBox.style.cssText=`width: ${i}px; height: ${o}px`,a.pedEdit.scrollTo(i/e*a.outerPosition.x-a.screenPosition.x,o/n*a.outerPosition.y-a.screenPosition.y),a.currentScale=i/a.editSize.width;const r=a.currentScale/a.preScale;Object.keys(a.textsInfo).forEach(t=>{const e=a.textsInfo[t];e.x=e.x*r,e.y=e.y*r,e.fontSize=e.fontSize*r,e.width=e.width*r,e.height=e.height*r,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;`})}c()})}()}}return i})());
|