Angular如何实现图片裁剪工具ngImgCrop

小编给大家分享一下Angular如何实现图片裁剪工具ngImgCrop,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司成都网站建设按需定制制作,是成都网站开发公司,为橡塑保温提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线:18982081108

ngImgCrop是AngularJS的一个图片裁剪插件,它实际上是一个封装好的AngularJs指令,可以让用户以圆框或者方框来裁剪图片

1、使用效果截图

Angular如何实现图片裁剪工具ngImgCrop   Angular如何实现图片裁剪工具ngImgCrop

2、demo演示

demo演示地址 http://jsfiddle.net/alexk111/rw6q9/

3、下载安装

可以使用两种方式来下载ngImgCrop插件

a、GitHub下载:git clone https://github.com/alexk111/ngImgCrop.git

b、bower安装,如果项目中使用了bower,使用命令bower install ngImgCrop即可

4、添加js和css依赖到项目中



5、添加AngularJs依赖

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

6、使用样例



 
 
 
 
 


 
Select an image file: 
      
 
Cropped Image:
 

7、属性介绍

8、注意点

结果文件是base64的格式,如果是直接展示的话没有问题,如果是以文件格式要将图片上传给后台服务器,那么还需要将base64转换成图片文件格式,附上我自己的转换代码

$scope.file可直接作为File文件格式上传至后台服务器

function getBlobBydataURL(dataURI,type){
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type:type });
    }

    var $Blob = getBlobBydataURL($scope.myCroppedImage,"image/png");
    $scope.file = $Blob;

看完了这篇文章,相信你对“Angular如何实现图片裁剪工具ngImgCrop”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前题目:Angular如何实现图片裁剪工具ngImgCrop
分享链接:http://bzwzjz.com/article/phoiei.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 手机网站制作 成都网站设计公司 成都网站建设 成都网站建设推广 成都网站建设 成都网站制作 成都网站设计 自适应网站设计 成都网站建设 手机网站建设 网站建设公司 网站制作公司 网站设计 网站建设方案 成都网站制作 成都网站建设 广安网站设计 营销型网站建设 成都网站建设 成都营销网站制作 移动手机网站制作 成都网站建设公司