ngImgCrop, AngularJS的图像裁剪指令( 这里项目不再被维护)

分享于 

7分钟阅读

GitHub

  繁體 雙語
Image Crop directive for AngularJS
  • 源代码名称:ngImgCrop
  • 源代码网址:http://www.github.com/alexk111/ngImgCrop
  • ngImgCrop源代码文档
  • ngImgCrop源代码下载
  • Git URL:
    git://www.github.com/alexk111/ngImgCrop.git
    Git Clone代码到本地:
    git clone http://www.github.com/alexk111/ngImgCrop
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/alexk111/ngImgCrop
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    ngImgCrop

    警告警告

    这里项目不再维护。 你可以自由 fork 并启动一个新项目。

    概述

    AngularJS的简单图像裁剪指令。 允许裁剪图像中的圆或者正方形。

    屏幕截图

    Circle Crop

    Square Crop

    实时演示

    现场演示 JSFiddle

    要求

    • AngularJS
    • 支持现代浏览器

    安装

    下载

    你有两个选择来获取文件:

    添加文件

    将脚本添加到应用程序中。 确保 ng-img-crop.js 文件在 angular.js 之后为 :

    <scriptsrc="angular.js"></script>
    <scriptsrc="ng-img-crop.js"></script>
    <linkrel="stylesheet"type="text/css"href="ng-img-crop.css">

    添加 dependancy

    将图像裁剪 MODULE 作为dependancy添加到应用程序模块中:

    var myAppModule =angular.module('MyApp', ['ngImgCrop']);

    用法

    • 向要使用图像裁剪控件的HTML文件添加图像裁剪指令 <img-crop>。 注意:一个容器,要放置指令,应该有预先定义的大小。 因为图像裁剪控件适合它的容器的大小,所以这是必需的。
    • 将指令绑定到源映像属性( 使用 image=""选项"。 指令将从该属性读取图像数据并监视更新。 属性可以是图像的url,也可以是数据 uri。
    • 将指令绑定到结果图像属性( 使用 result-image=""选项"。 每次更新时,指令将把裁剪区域的内容放入数据uri格式的那个属性中。
    • 设置对应用程序有意义的选项。
    • 已完成!

    结果图像

    结果图像将始终是圆形和正方形区域类型的正方形。 强烈建议将图像存储在后端,因为如果你决定实现某些设计更改,则可以轻松更新图片。 作为一个圆圈在前端显示方形图像不是问题- 这就像在css中添加一个的border-radius 样式一样简单。

    示例代码

    以下代码允许使用文件输入选择图像并将它的裁剪。 裁剪后的图像数据每次更新时插入到img中。

    <html>
    <head>
     <scriptsrc="angular.js"></script>
     <scriptsrc="ng-img-crop.js"></script>
     <linkrel="stylesheet"type="text/css"href="ng-img-crop.css">
     <style>.cropArea {background: #E4E4E4;overflow: hidden;width:500px;height:350px; }</style>
     <script>angular.module('app', ['ngImgCrop']). controller('Ctrl', function($scope) {$scope.myImage='';$scope.myCroppedImage='';varhandleFileSelect=function(evt) {var file=evt.currentTarget.files[0];var reader =newFileReader();reader.onload=function (evt) {$scope.$apply(function($scope){$scope.myImage=evt.target.result; }); };reader.readAsDataURL(file); };angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect); });</script>
    </head>
    <bodyng-app="app"ng-controller="Ctrl">
     <div>Select an image file: <inputtype="file"id="fileInput"/></div>
     <divclass="cropArea">
     <img-cropimage="myImage"result-image="myCroppedImage"></img-crop>
     </div>
     <div>Cropped Image:</div>
     <div><imgng-src="{{myCroppedImage}}"/></div>
    </body>
    </html>

    命令行选项

    <img-cropimage="{string}"result-image="{string}" [change-on-fly="{boolean}"]
     [area-type="{circle|square}"]
     [area-min-size="{number}"]
     [result-image-size="{number}"]
     [result-image-format="{string}"]
     [result-image-quality="{number}"]
     [on-change="{expression}"]
     [on-load-begin="{expression"]
     [on-load-done="{expression"]
     [on-load-error="{expression"]
    ></img-crop>

    图像

    可以分配的Angular 表达式到数据绑定。 NgImgCrop获取从它的进行裁剪的图像。

    结果图像

    可以分配的Angular 表达式到数据绑定。 NgImgCrop将被裁剪图像的数据uri放入它。

    change-on-fly

    可选。默认情况下,在用户拖动裁剪区域时减少CPU使用情况。当用户停止裁剪区域时,结果映像仅在用户停止拖动/调整大小之后更新。 设置 true 以始终更新结果图像,因为用户拖动/调整裁剪区域的大小。

    区域类型

    可选。裁剪区域的类型。 可能的值:circle|square。默认值:圆。

    area-min-size

    可选 crop ( 以像素为单位) 区域的宽度。最小宽度/高度。 默认值:80.

    result-image-size

    可选。结果图像( 以像素为单位)的宽度/高度。 默认值:200.

    result-image-format

    可选。结果图像格式。 可能的值包括图像/jpeg。图像/png和图像/webp。 浏览器支持不同。默认:图像/png。

    result-image-quality

    可选。结果图像质量。 0.0和 1.0之间可能的值包括。 默认值:浏览器默认值。

    更改

    可选。在更改图像的裁剪部分时计算的表达式。 裁剪后的图像数据可以作为 $dataURI.

    on-load-begin

    Optional可选。在源映像开始加载时计算的表达式。

    on-load-done

    可选。用于在源映像成功加载时进行评估的表达式。

    on-load-error

    可选。用于在源映像未加载时进行评估的表达式。

    许可证

    查看许可协议文件。


    图像  proj  angular  DIR  THIS  MAIN  
    相关文章