canvas图片裁剪,双指缩放顺滑体验,支持PC端移动端

Demo

在线演示

使用说明

API请移步https://github.com/Gitjinfeiy...

使用

请参考demo

 let editor = new ImageEditor(options);
 

Options

{

container:'.wrapper',   //必填 挂载容器
limit:{
    minWidth:50,//宽度限制
    maxWidth:200,
    minHeight:50,//高度限制
    maxHeight:200,
    maxSize:50,//图片大小限制 kb
},
created:function(imageEditor){
  //editor被初始化后
},
beforeReadFile:function(){
 //初始化file之前 只有调用`readFile(file)`才会触发 (建议在这一步显示编辑器)
},
afterReadFile:function(){
      //通过FileReader读取文件之后
    },
beforeLoadImage:function(){
      //读取图片前 (显示编辑器)
    },
afterLoadImage:function(){
      //读取图片后
    },
beforeSave:function(){
      //保存之前
    },
afterSave:function(){
      //保存之后
    },
 afterRender:function(){
  //图片加载并开始渲染
 }
    

}

API

initImage(url,callback) 读取图片链接

readFile(file) 读取File

save() 保存结果,返回 blob,dataUrl

scaleInCenter(scale) 以canvas中心为中心缩放

rotateZ(deg) 以canvas中心为中心旋转

其他使用请参考demo

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值