摘要:移动端图片裁剪器,基于制作的简单裁剪器项目地址案例演示部分裁剪案例开始裁剪部分演示案例手机模式查看,效果更佳。
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 |
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/59581.html
摘要:移动端图片裁剪器,基于制作的简单裁剪器项目地址案例演示部分裁剪案例开始裁剪部分演示案例手机模式查看,效果更佳。 h5-cropper 移动端图片裁剪器,基于 cropperjs 制作的简单裁剪器 项目地址 https://github.com/sayll/h5-cropper 案例演示 HTML部分: 裁剪案例 开始裁剪 JS...
摘要:极致的插件机制,系统内的系统,安装和卸载不会对原来的系统产生影响强大的功能完全满足各阶段的需求,支持用户多端访问后台微信前台等,系统中的系统。多入口模式,多入口分为后台前端,微信,对内接口,对外接口,不同的业务,不同的设备,进入不同的入口。 RageFrame 2.0 为二次开发而生,让开发变得更简单 项目地址:https://github.com/jianyan74/... 前言 这...
摘要:极致的插件机制,系统内的系统,安装和卸载不会对原来的系统产生影响强大的功能完全满足各阶段的需求,支持用户多端访问后台微信前台等,系统中的系统。多入口模式,多入口分为后台前端,微信,对内接口,对外接口,不同的业务,不同的设备,进入不同的入口。 RageFrame 2.0 为二次开发而生,让开发变得更简单 项目地址:https://github.com/jianyan74/... 前言 这...
摘要:极致的插件机制,系统内的系统,安装和卸载不会对原来的系统产生影响强大的功能完全满足各阶段的需求,支持用户多端访问后台微信前台等,系统中的系统。多入口模式,多入口分为后台前端,微信,对内接口,对外接口,不同的业务,不同的设备,进入不同的入口。 RageFrame 2.0 为二次开发而生,让开发变得更简单 项目地址:https://github.com/jianyan74/... 前言 这...
摘要:目前团队使用已研发了好几款,它能满足及支撑我们上百个页面的业务场景,让我们的开发效率大大提升,使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案 写在开头 WeexBox...
阅读 2338·2023-04-25 18:13
阅读 531·2021-11-22 12:10
阅读 2789·2021-11-22 11:57
阅读 1988·2021-11-19 11:26
阅读 1879·2021-09-22 15:40
阅读 1282·2021-09-03 10:28
阅读 2529·2019-08-30 15:53
阅读 1767·2019-08-30 15:44