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

liukai90 發布于2019-08-21 17:42 / 2375人閱讀

摘要：在線演示使用說明請移步使用請參考必填掛載容器寬度限制高度限制圖片大小限制被初始化后初始化之前只有調用才會觸發建議在這一步顯示編輯器通過讀取文件之后讀取圖片前顯示編輯器讀取圖片后保存之前保存之后圖片加載并開始渲染讀取圖片鏈接讀取保存結果，返回

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

云服務器 GPU云服務器 html 移動端縮放移動端體驗 webrtc支持移動端嗎移動端支持webrtc么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89904.html

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

摘要：在線演示使用說明請移步使用請參考必填掛載容器寬度限制高度限制圖片大小限制被初始化后初始化之前只有調用才會觸發建議在這一步顯示編輯器通過讀取文件之后讀取圖片前顯示編輯器讀取圖片后保存之前保存之后圖片加載并開始渲染讀取圖片鏈接讀取保存結果，返回 Demo 在線演示使用說明 API請移步https://github.com/Gitjinfeiy... 使用請參考demo let edi...

netmou 2019-08-01 18:03 評論0 收藏0
canvas圖片裁剪，雙指縮放順滑體驗，支持PC端移動端

摘要：在線演示使用說明請移步使用請參考必填掛載容器寬度限制高度限制圖片大小限制被初始化后初始化之前只有調用才會觸發建議在這一步顯示編輯器通過讀取文件之后讀取圖片前顯示編輯器讀取圖片后保存之前保存之后圖片加載并開始渲染讀取圖片鏈接讀取保存結果，返回 Demo 在線演示使用說明 API請移步https://github.com/Gitjinfeiy... 使用請參考demo let edi...

ghnor 2019-08-29 13:50 評論0 收藏0
HTML5中手勢原理分析與數學知識的實踐

摘要：中手勢原理分析與數學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分。這篇博文主要是解析了移動端常用手勢的原理，及從前端的角度學習過程中所使用的數學知識。 HTML5中手勢原理分析與數學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分。現代應用越來越重視與用戶的交互及體驗，手勢是最直接且最為有效的交互方式，一個好的手勢交互，能...

rollback 2019-08-20 18:33 評論0 收藏0
匠心打造canvas簽名組件

摘要：原文匠心打造簽名組件導讀月又是項目吃緊的時候，一大波需求襲來，猝不及防。可以先戳這里體驗把后面將要提到的簽名組件。剩下的也是綁定事件中關鍵的一步。設置完成了上述功能，一個簽名插件就已經成型了。本文首發于CSDN網站，下面的版本又經過進一步的修訂。原文：匠心打造canvas簽名組件導讀 6月又是項目吃緊的時候，一大波需求襲來，猝不及防。度過了漫長而煎熬的6月，是時候總結一波。最近移...

MAX_zuo 2019-08-20 17:53 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0