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

  1. yarn add picture_edit
  2. import * as PED from 'picture_edit'
  3. new PED.drawing(url, options)
  4. refer to https://github.com/lijibing01/picture_edit/blob/master/index.html

Function description

  1. Supports h5 of vue, react, and native js projects Page
  2. You can zoom in and out the image with two fingers
  3. You can doodle on the image
  4. You can enter text and input method emoticons
  5. You can move the text with one finger after entering the text
  6. 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
  7. You can withdraw the content
  8. 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