picture_edit 2.1.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.
Files changed (29) hide show
  1. package/README.md +45 -0
  2. package/README_CN.md +45 -0
  3. package/dist/1887594f3dabac2fddbe.jpg +0 -0
  4. package/dist/f7eef546d302bcf9d3b9.ico +0 -0
  5. package/dist/index.html +1 -0
  6. package/dist/picture-edit.js +1 -0
  7. package/favicon.ico +0 -0
  8. package/index.html +44 -0
  9. package/package.json +33 -0
  10. package/src/assets/cancel.svg +1 -0
  11. package/src/assets/delete.svg +1 -0
  12. package/src/assets/painting.svg +1 -0
  13. package/src/assets/painting_cancel.svg +1 -0
  14. package/src/assets/pin_to_top.svg +1 -0
  15. package/src/assets/return.svg +1 -0
  16. package/src/assets/rotate.svg +1 -0
  17. package/src/assets/save.svg +1 -0
  18. package/src/assets/scale.svg +1 -0
  19. package/src/assets/test1.jpg +0 -0
  20. package/src/assets/test2.jpg +0 -0
  21. package/src/assets/text.svg +1 -0
  22. package/src/index.js +113 -0
  23. package/src/lib/GLOBAL.js +76 -0
  24. package/src/lib/Utils.js +101 -0
  25. package/src/lib/listeners.js +539 -0
  26. package/src/lib/vconsole.min.js +10 -0
  27. package/src/template/frame.html +28 -0
  28. package/src/template/frame.less +143 -0
  29. package/webpack.config.js +51 -0
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # Introduction
2
+ A mobile image editor written with native js and canvas
3
+
4
+ # Usage
5
+ 1. Refer to index.html to import the file
6
+
7
+ # Parameter Description
8
+ | Parameter Name | Default Value | Type | Description |
9
+ |---------|-------|------|------|
10
+ | spaceLeft | 30 | number | Initialize the left and right spacing of the image |
11
+ | spaceTop | 30 | number | Distance from the top and bottom |
12
+ | fontSize | 14 | number | Text size |
13
+ | fontPaddingLeft | 3 | number | Text top and bottom padding |
14
+ | fontPaddingTop | 5 | number | Text left and right padding |
15
+ | fontRaduis | 5 | number | Text corner radius |
16
+ | fontLineHeight | 1.2 | number | Text line height ratio |
17
+ | fontLineWidth | 5 | number | Line width |
18
+ | fontShadowBlur | 5 | number | Line shadow |
19
+ | operatePaddingLeft | 28 | number | Left and right margins of the operation module |
20
+ | operatePaddingTop | 10 | number | Top and bottom margins of the operation module |
21
+ | fontColor | '#000000' | string | Text color |
22
+ | fontBgColor | '#ffffff' | string | Text background color |
23
+ | fontFamily | "Arial" | string | Font |
24
+ | textOperateColor | "#884cf3" | string | Border color of the operation module |
25
+ | getDataURL | () => {} | function | Callback function to get the edited image |
26
+ | outType | 'image/jpeg' | string | image/png, image/webp, image/jpeg |
27
+ | encoderOptions | 1 | number | When outType is image/jpeg or image/webp, the quality of the exported image can be selected from the range of 0 to 1 |
28
+
29
+ # Function description
30
+ 1. Supports h5 of vue, react, and native js projects Page
31
+ 1. You can zoom in and out the image with two fingers
32
+ 2. You can doodle on the image
33
+ 3. You can enter text and input method emoticons
34
+ 4. You can move the text with one finger after entering the text
35
+ 5. After clicking the text, click the button in the upper right corner of the operation and drag to zoom in and out the text. Click the icon at the bottom of the operation to rotate the text
36
+ 6. You can withdraw the content
37
+ 7. Support the export of the original image, and you can also export the image compression quality
38
+
39
+ # How to build
40
+
41
+ ```shell
42
+ yarn & yarn serve
43
+ ```
44
+
45
+ Welcome star
package/README_CN.md ADDED
@@ -0,0 +1,45 @@
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/dist/1887594f3dabac2fddbe.jpg ADDED
Binary file
package/dist/f7eef546d302bcf9d3b9.ico ADDED
Binary file
package/dist/index.html ADDED
@@ -0,0 +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=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" style="width:10rem" onclick='showImage("https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960")'><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 ADDED
@@ -0,0 +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})()));
package/favicon.ico ADDED
Binary file
package/index.html ADDED
@@ -0,0 +1,44 @@
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/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "picture_edit",
3
+ "version": "2.1.0",
4
+ "main": "dist/picture-edit.js",
5
+ "scripts": {
6
+ "serve": "webpack serve --mode development --open",
7
+ "build": "webpack --mode production"
8
+ },
9
+ "keywords": [
10
+ "Mobile image editing",
11
+ "H5 image editing",
12
+ "canvas image editing",
13
+ "Mobile phone image editing",
14
+ "移动端图片编辑",
15
+ "H5图片编辑",
16
+ "canvas图片编辑",
17
+ "手机图片编辑"
18
+ ],
19
+ "author": "lijibing",
20
+ "license": "ISC",
21
+ "description": "image editing",
22
+ "devDependencies": {
23
+ "css-loader": "^7.1.2",
24
+ "html-loader": "^5.1.0",
25
+ "html-webpack-plugin": "^5.6.3",
26
+ "less": "^4.2.1",
27
+ "less-loader": "^12.2.0",
28
+ "style-loader": "^4.0.0",
29
+ "webpack": "^5.96.1",
30
+ "webpack-cli": "^5.1.4",
31
+ "webpack-dev-server": "^5.1.0"
32
+ }
33
+ }
package/src/assets/cancel.svg ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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>
package/src/assets/painting_cancel.svg ADDED
@@ -0,0 +1 @@
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>
package/src/assets/pin_to_top.svg ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
Binary file
package/src/assets/test2.jpg ADDED
Binary file
package/src/assets/text.svg ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,113 @@
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 ADDED
@@ -0,0 +1,76 @@
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 ADDED
@@ -0,0 +1,101 @@
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
+ }