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

netmou 發(fā)布于2019-08-01 18:03 / 3372人閱讀

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

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之前 只有調(diào)用`readFile(file)`才會觸發(fā) (建議在這一步顯示編輯器)
},
afterReadFile:function(){
      //通過FileReader讀取文件之后
    },
beforeLoadImage:function(){
      //讀取圖片前 (顯示編輯器)
    },
afterLoadImage:function(){
      //讀取圖片后
    },
beforeSave:function(){
      //保存之前
    },
afterSave:function(){
      //保存之后
    },
 afterRender:function(){
  //圖片加載并開始渲染
 }

}

API

initImage(url,callback) 讀取圖片鏈接

readFile(file) 讀取File

save() 保存結(jié)果，返回 blob，dataUrl

scaleInCenter(scale) 以canvas中心為中心縮放

rotateZ(deg) 以canvas中心為中心旋轉(zhuǎn)

其他使用請參考demo

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51551.html

相關(guān)文章

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

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

liukai90 2019-08-21 17:42 評論0 收藏0
canvas圖片裁剪，雙指縮放順滑體驗，支持PC端移動端

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

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

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

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

摘要：原文匠心打造簽名組件導(dǎo)讀月又是項目吃緊的時候，一大波需求襲來，猝不及防?？梢韵却吝@里體驗把后面將要提到的簽名組件。剩下的也是綁定事件中關(guān)鍵的一步。設(shè)置完成了上述功能，一個簽名插件就已經(jīng)成型了。本文首發(fā)于CSDN網(wǎng)站，下面的版本又經(jīng)過進一步的修訂。原文：匠心打造canvas簽名組件導(dǎo)讀 6月又是項目吃緊的時候，一大波需求襲來，猝不及防。度過了漫長而煎熬的6月，是時候總結(jié)一波。最近移...

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

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

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