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

2024年2月13日 355次阅读 来源: jinfeiyangmemeda

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

    原文作者：jinfeiyangmemeda
    原文地址: https://segmentfault.com/a/1190000012092239
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞