当前位置: 首页 > Web前端 > HTML5

手机图片裁剪器,即开即用

时间:2023-04-05 00:37:17 HTML5

h5-cropper手机图片裁剪器,基于cropperjs的简单裁剪器项目地址https://github.com/sayll/h5-cropper案例演示HTML部分:裁剪案例

<按钮样式="宽度:100%;字体大小:18px;"id="button">开始裁剪
JS部分:constimg=document.getElementById('image')document.getElementById('button').onclick=function(){varcropper=newwindow.H5Cropper(img.src,function(base64){img.src=base64})}演示案例:https://sayll.github.io/h5-cropper/iindex.html在移动模式下查看,效果更好。如何使用直接下载使用通过下载,直接引用dist/index.js,通过全局window对象访问。constcropper=newwindow.H5Cropper('http://placekitten.com/g/300/200',function(base64){//todosomethingconsole.log(base64)})npmdownload使用下载方法:npmi-Sh5-cropperusage:importH5Cropperfrom'h5-cropper'constcropper=newH5Cropper('http://placekitten.com/g/300/200',function(base64){//做一些事情console.log(base64)})接口定义调用方法:newH5Cropper(url:string,callback?:(data64:string)=>any,options?:CropperjsOptions)参数说明url图片地址或base64callback裁剪完成后的回调函数,接收最终图片base64options一些高级配置,具体请查看插件Cropperjs