The picture clipper on the mobile side is ready for installation.

  canvas, Cut out, html5, javascript


The mobile picture clipper is based oncropperjsA simple cutting device

Project address

Case presentation

HTML section:

<!DOCTYPE html>
<html lang="cn">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="./h5-cropper.js"></script>
<body style="font-size: 14px">
  <img id="image" src="" width="100%" alt="">
    <button style="width: 100%; font-size: 18px;" id="button">开始裁剪</button>
<script src="./index.js"></script>

JS section:

const img = document.getElementById('image')

document.getElementById('button').onclick = function () {
  var cropper = new window.H5Cropper(img.src, function (base64) {
    img.src = base64

Demonstration case:

Mobile phone mode view, the effect is better.

Use way

Direct download

Through download, direct referencedist/index.jsThrough the globalwindowObject access.

const cropper = new window.H5Cropper('', function (base64) {
  // to do something

Npm download and use

Download mode:

npm i -S h5-cropper


import H5Cropper from 'h5-cropper'
const cropper = new H5Cropper('', function (base64) {
  // to do something

Interface definition

Call method:

new H5Cropper(url: string, callback?: (data64: string) => any, options?: CropperjsOptions)
Parameter describe
url Picture Address or base64
callback After clipping, the callback function receives the final image base64.
options For some advanced configurations, please check the plug-in for details.Cropperjs