最近需要使用到一個圖片切割的工具,在angular的package中找了一下,沒有找到比較合適,因為只需要支援html5的瀏覽器,就實作了一個間單的工具(ngImageEditor)。
以下是demo實際執行的畫面:
使用與安裝:
Demo
Install
1 | bower install ngImageEditor |
Support
- IE9+
- chrome
- firefox
設定editor的attributes
1 | <div img-src="imgSrc" ng-image-editor="imageEditor" selected="selected"></div> |
載入要切割的圖片
1 | $scope.imgSrc='/images/head.jpeg'; |
設定切割的區塊位置及大小
1 | $scope.selected = {width:150,height:150,top:0,left:0}; |
將區塊大小的image取出
1 | $scope.imageEditor.toDataURL(); |
實作方式主要是透過canvas作轉換,至於cross domain,必須是同個domain,否則要從server上設定,允許哪個domain可以存取作編輯。
在server上設定你要跨網域的domain:
1 | Access-Control-Allow-Origin: http://your.domain.com |
在javascript中呼叫img.src
之前,加入以下設定:
1 | img.crossOrigin = "Anonymous"; |