最近項目中應用到canvas,見識到了canvas技術的強大,忽然想到以前用過的開源的裁減庫,大多數都是劃出一個裁剪框,將座標點和長寬傳到服務端,由後臺作裁剪,正好有空,作了個基於canvas的純前端裁剪壓縮工具,支持pc和移動端平臺。html
對外暴露clip方法,返回一個裁剪對象。前端
const c = clip({
container, //源文件的外包包裹框--dom
sourceFile, //源文件--file
outPutOpt //輸出圖片的類型和壓縮質量參數--object
showType //畫板顯示模式--COVER CONTAIN(默認)
})
// c.clip64:base64結果
// c.clipBlob:blob結果
// c.clipArrayBuffer:arrayBuffer結果
複製代碼
github地址git
pc demo地址es6
mobile demo地址github
由於時間關係,採用es6編碼,沒有作不少的兼容性考慮,可能存在一些體驗問題。canvas
後期有空了再改進,歡迎指正。api