移动端图片裁剪器，安装即用

MASAILA 发布于2019-08-23 18:14 / 2930人阅读

摘要：移动端图片裁剪器，基于制作的简单裁剪器项目地址案例演示部分裁剪案例开始裁剪部分演示案例手机模式查看，效果更佳。

h5-cropper

移动端图片裁剪器，基于 cropperjs 制作的简单裁剪器

项目地址

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

案例演示

HTML部分：




  
  
  裁剪案例

JS部分：

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.html

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

使用方式 直接下载使用

通过下载,直接引用dist/index.js,通过全局的window对象访问。

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

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)
})

接口定义

调用方式：

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

参数	描述
url	图片地址或base64
callback	裁剪完成后的回调函数，接收最终的图片base64
options	一些高级配置，详细请查看插件Cropperjs

GPU云服务器云服务器移动端js图片打包 H5移动端上传图片图片裁剪图片裁剪比例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104879.html

RageFrame 一个 Yii2 + AdminLET 免费开源多商户通用后台管理系统

摘要：极致的插件机制，系统内的系统，安装和卸载不会对原来的系统产生影响强大的功能完全满足各阶段的需求，支持用户多端访问后台微信前台等，系统中的系统。多入口模式，多入口分为后台前端，微信，对内接口，对外接口，不同的业务，不同的设备，进入不同的入口。 RageFrame 2.0 为二次开发而生，让开发变得更简单项目地址：https://github.com/jianyan74/... 前言这...

sunny5541 2019-07-01 14:08 评论0 收藏0
RageFrame 一个 Yii2 + AdminLET 免费开源多商户通用后台管理系统

摘要：极致的插件机制，系统内的系统，安装和卸载不会对原来的系统产生影响强大的功能完全满足各阶段的需求，支持用户多端访问后台微信前台等，系统中的系统。多入口模式，多入口分为后台前端，微信，对内接口，对外接口，不同的业务，不同的设备，进入不同的入口。 RageFrame 2.0 为二次开发而生，让开发变得更简单项目地址：https://github.com/jianyan74/... 前言这...

Ali_ 2019-07-25 14:50 评论0 收藏0