Recent project applied to the canvas, seen canvas technology strong, suddenly thought of before used open source library, most of whom were drawn a cutting box, will coordinate points and the width to the server, do cut by the background, at the right moment free, made a pure front cutting compression tools, based on canvas support PC and mobile platforms.

Realize the principle of

  1. Read locally selected image files (source files) using native URL API;
  2. Use the drawImage function of Canvas to draw the source image on the drawing board. There are two drawing strategies: ‘CONTAIN’ mode equal proportion compression center display; In COVER mode, select the end whose aspect ratio is smaller than that of the external Container. Cover and contain similar to background-size;
  3. [Fixed] Use mouse event to make background artboard moveable
  4. Draw the clipping frame in the center of the artboard according to the size configuration of the clipping frame, so that it can be resized;
  5. When the artboard moves or resize the clipping box, dynamically draw the corresponding clipping area;
  6. According to the quality parameters, the clipping area is compressed and clipped using toDataURL method, the base64 format of the clipping graph is obtained, the base64 blob processing is performed on base64, and finally the clipping results of Base64, BLOB and arrayBuffer formats can be output.

Directions for use

Expose the clip method externally and return a clipping object.

Const c = clip({container, // the dom of the source filesourceFile, }) // c.clip64:base64 result // Arthur c. lipBlob: blob results / / Arthur c. lipArrayBuffer: arrayBuffer resultsCopy the code

Making the address

PC demo address

Mobile demo address

conclusion

Due to the time, es6 coding is adopted without a lot of compatibility consideration, and there may be some experience problems.

Later free to improve, welcome correction.