![[Webinar] AI Is Already Inside Your SaaS Stack — Learn How to Prevent the Next Silent Breach](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWn65wd33dg2uO99NrtKbpYLfcepwOLidQDMls0HXKlA91k6HURluRA4WXgJRAZldEe1VReMQZyyYt1PgnoAn5JPpILsWlXIzmrBSs_TBoyPwO7hZrWouBg2-O3mdeoeSGY-l9_bsZB7vbpKjTSvG93zNytjxgTaMPqo9iq9Z5pGa05CJOs9uXpwHFT4/s1600/ai-cyber.jpg?#)
![[The AI Show Episode 144]: ChatGPT’s New Memory, Shopify CEO’s Leaked “AI First” Memo, Google Cloud Next Releases, o3 and o4-mini Coming Soon & Llama 4’s Rocky Launch](https://www.marketingaiinstitute.com/hubfs/ep%20144%20cover.png)
![Rogue Company Elite tier list of best characters [April 2025]](https://media.pocketgamer.com/artwork/na-33136-1657102075/rogue-company-ios-android-tier-cover.jpg?#)
_Andreas_Prott_Alamy.jpg?width=1280&auto=webp&quality=80&disable=upscale#)
![Apple Watch Series 10 Back On Sale for $299! [Lowest Price Ever]](https://www.iclarified.com/images/news/96657/96657/96657-640.jpg)
![EU Postpones Apple App Store Fines Amid Tariff Negotiations [Report]](https://www.iclarified.com/images/news/97068/97068/97068-640.jpg)
![Apple Slips to Fifth in China's Smartphone Market with 9% Decline [Report]](https://www.iclarified.com/images/news/97065/97065/97065-640.jpg)
No dependencies, use native js and canvas to implement a mobile image editor
Introduction A mobile image editor written with native js and canvas Source code https://github.com/lijibing01/picture_edit Online Experience http://ai.xkcoin.cn/index.html Usage yarn add picture_edit import * as PED from 'picture_edit' new PED.drawing(url, options) refer to https://github.com/lijibing01/picture_edit/blob/master/index.html Function description Supports h5 of vue, react, and native js projects Page You can zoom in and out the image with two fingers You can doodle on the image You can enter text and input method emoticons You can move the text with one finger after entering the text 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 You can withdraw the content Support the export of the original image, and you can also export the image compression quality Options Parameter Name Default Value Type Description spaceLeft 30 number Initialize the left and right spacing of the image spaceTop 30 number Distance from the top and bottom fontSize 14 number Text size fontPaddingLeft 3 number Text top and bottom padding fontPaddingTop 5 number Text left and right padding fontRaduis 5 number Text corner radius fontLineHeight 1.2 number Text line height ratio fontLineWidth 5 number Line width fontShadowBlur 5 number Line shadow operatePaddingLeft 28 number Left and right margins of the operation module operatePaddingTop 10 number Top and bottom margins of the operation module fontColor '#000000' string Text color fontBgColor '#ffffff' string Text background color fontFamily "Arial" string Font textOperateColor "#884cf3" string Border color of the operation module getDataURL () => {} function Callback function to get the edited image outType 'image/jpeg' string image/png, image/webp, image/jpeg 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 How to build yarn & yarn serve Welcome star
Introduction
A mobile image editor written with native js and canvas
Source code
https://github.com/lijibing01/picture_edit
Online Experience
http://ai.xkcoin.cn/index.html
Usage
- yarn add picture_edit
- import * as PED from 'picture_edit'
- new PED.drawing(url, options)
- refer to https://github.com/lijibing01/picture_edit/blob/master/index.html
Function description
- Supports h5 of vue, react, and native js projects Page
- You can zoom in and out the image with two fingers
- You can doodle on the image
- You can enter text and input method emoticons
- You can move the text with one finger after entering the text
- 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
- You can withdraw the content
- Support the export of the original image, and you can also export the image compression quality
Options
| Parameter Name | Default Value | Type | Description |
|---|---|---|---|
| spaceLeft | 30 | number | Initialize the left and right spacing of the image |
| spaceTop | 30 | number | Distance from the top and bottom |
| fontSize | 14 | number | Text size |
| fontPaddingLeft | 3 | number | Text top and bottom padding |
| fontPaddingTop | 5 | number | Text left and right padding |
| fontRaduis | 5 | number | Text corner radius |
| fontLineHeight | 1.2 | number | Text line height ratio |
| fontLineWidth | 5 | number | Line width |
| fontShadowBlur | 5 | number | Line shadow |
| operatePaddingLeft | 28 | number | Left and right margins of the operation module |
| operatePaddingTop | 10 | number | Top and bottom margins of the operation module |
| fontColor | '#000000' | string | Text color |
| fontBgColor | '#ffffff' | string | Text background color |
| fontFamily | "Arial" | string | Font |
| textOperateColor | "#884cf3" | string | Border color of the operation module |
| getDataURL | () => {} | function | Callback function to get the edited image |
| outType | 'image/jpeg' | string | image/png, image/webp, image/jpeg |
| 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 |
How to build
yarn & yarn serve
Welcome star
