移動端圖片裁剪器，安裝即用

時間 2019-11-08

標籤移動圖片裁剪安裝即用欄目無線简体版

原文原文鏈接

h5-cropper

移動端圖片裁剪器，基於 cropperjs 製做的簡單裁剪器javascript

項目地址

https://github.com/sayll/h5-cropperhtml

案例演示

HTML部分：java

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

JS部分：git

const img = document.getElementById('image')

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

演示案例：https://sayll.github.io/h5-cropper/index.htmlgithub

手機模式查看，效果更佳。

使用方式

直接下載使用

經過下載,直接引用dist/index.js,經過全局的window對象訪問。typescript

const cropper = new window.H5Cropper('http://placekitten.com/g/300/200', function (base64) {
  // to do something
  console.log(base64)
})

npm 下載使用

下載方式：npm

npm i -S h5-cropper

使用方式：函數

import H5Cropper from 'h5-cropper'
const cropper = new H5Cropper('http://placekitten.com/g/300/200', function (base64) {
  // to do something
  console.log(base64)
})

接口定義

調用方式：url

new H5Cropper(url: string, callback?: (data64: string) => any, options?: CropperjsOptions)

參數	描述
url	圖片地址或base64
callback	裁剪完成後的回調函數，接收最終的圖片base64
options	一些高級配置，詳細請查看插件Cropperjs

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。