canvas圖片裁剪，雙指縮放順滑體驗，支援PC端移動端

jinfeiyangmemeda發表於2017-11-21
Canvas

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

相關文章