Angular实现图片裁剪工具ngImgCrop实践
ngImgCrop是AngularJS的一个图片裁剪插件，它实际上是一个封装好的AngularJs指令，可以让用户以圆框或者方框来裁剪图片
1、使用效果截图
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依赖到项目中
<script src="angular.js"></script> <script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >
5、添加AngularJs依赖
var myAppModule = angular.module('MyApp', ['ngImgCrop']);
6、使用样例
<html>
<head>
<script src="angular.js"></script>
<script src="ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
<script>
angular.module('app', ['ngImgCrop'])
.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
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>
<body ng-app="app" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</body>
</html>
7、属性介绍
<img-crop
image="{string}" 需要进行裁剪的图片文件 如$scope.myImage
result-image="{string}" 保存裁剪结果的图片文件 如$scope.myCroppedImage
[change-on-fly="{boolean}"] 可选项：表示是否在拖拽裁剪区域时实时更新结果文件
[area-type="{circle|square}"] 可选项：表示裁剪窗口是方的还是圆的，默认是圆的
[area-min-size="{number}"] 可选项，表示裁剪结果的最小大小，默认是80，即结果最小是高80像素、宽80像素
[result-image-size="{number}"] 可选项，表示裁剪结果大小，默认是200，即高200像素、宽200像素
[result-image-format="{string}"] 可选项，表示裁剪结果保存的文件类型，可以选择image/jpeg、image/png、image/webp，默认是image/png
[result-image-quality="{number}"] 可选项，表示裁剪结果的质量，取值在0.0到1.0之间
[on-change="{expression}"] 可选项，检测到图片修改后执行的表达式
[on-load-begin="{expression"] 可选项，图片开始加载执行的表达式
[on-load-done="{expression"] 可选项，图片加载完成执行的表达式
[on-load-error="{expression"] 可选项，图片加载失败执行的表达式
></img-crop>
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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS通过ng-Img-Crop实现头像截取的示例
最近闲着无聊,写了一个实用代码,AngularJS通过ng-Img-Crop实现头像截取,分享给大家 1.安装插件 bower install ngImgCrop 2.引入插件 <script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="
-
Angular实现图片裁剪工具ngImgCrop实践
ngImgCrop是AngularJS的一个图片裁剪插件,它实际上是一个封装好的AngularJs指令,可以让用户以圆框或者方框来裁剪图片 1.使用效果截图 2.demo演示 demo演示地址 http://jsfiddle.net/alexk111/rw6q9/ 3.下载安装 可以使用两种方式来下载ngImgCrop插件 a.GitHub下载:git clone https://github.com/alexk111/ngImgCrop.git b.bower安装,如果项目中使用了bow
-
angular实现图片懒加载实例代码
这两天一直纠结angular的图片懒加载插件中无法自拔.在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上.这里主要谈谈在使用插件的过程遇到的一些问题. 一)我使用的是angular-imglazyload这个插件.[https://www.npmjs.com/package/angular-imglazyload]主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映.下面是我的
-
OpenCV实现图片编解码实践
原图: 图像信息,可以看到图像是一个816*2100像素的图片: python代码: import cv2 import numpy as np import matplotlib.pyplot as plt img = cv2.imread('11.jpg', 0) img1 = img.astype('float') img_dct = cv2.dct(img1) img_dct_log = np.log(abs(img_dct)) img_recor = cv2.idct(img_dct)
-
Ionic + Angular.js实现图片轮播的方法示例
本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl
-
微信小程序基于Taro的分享图片功能实践详解
前言 在各种小程序(微信.百度.支付宝).H5.NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于React的多终端开发利器:京东Taro(泰罗·奥特曼),Taro致力于多终端统一解决方案,一处代码,多处运行. Taro支持以React语言开发小程序,支持CSS预处理器,支持实时编译更新,支持NPM,等等等等,简直不要太爽! 微信小程序分享图片功能是经常在小程序业务中出现的,比如学习打卡分享,推广会员分享,推广商品分享等等.因为小程序是不支持直接分享图片到朋友圈的,一般操作为: 生成包含
-
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
1.MultiBox 一个lightbox支持的内容格式包括:图片,Flash,视频,mp3,html. 主页:http://www.phatfusion.net/multibox/ 下载:http://www.phatfusion.net/multibox/multibox.zip 示例:http://www.phatfusion.net/multibox/ 2.ImageMenu 一个图片展示控件.当鼠标移到某一张图片时将展开整张图片. 主页:http://www.phatfusion.ne
-
JavaWeb实现裁剪图片上传完整代码
本文实例为大家分享了JavaWeb实现裁剪图片上传完整案例,供大家参考,具体内容如下 实现思路 •使用jcrop插件手机要裁剪图片的坐标 •将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪 ◦后台处理流程: 1.将上传的图片按按照比例进行压缩后上传到文件服务器,并且将压缩后的图片保存在本地临时目录中. 2.将压缩后的图片回显到页面,使用jcrop进行裁剪,手机裁剪坐标(x,y,width,height) ■@paramx 目标切片起点坐标X ■@param y 目标切片起点
-
php图片裁剪函数
本文实例为大家分享了php图片裁剪函数的具体代码,供大家参考,具体内容如下 /* * 图片裁剪工具 * 将指定文件裁剪成正方形 * 以中心为起始向四周裁剪 * @param $src_path string 源文件地址 * @param $des_path string 保存文件地址 * @param $des_w double 目标图片宽度 * */ function img_cut_square($src_path,$des_path,$des_w=100){ $img_info = get
-
Java模拟登录正方教务抓取成绩、课表、空教室
本文实例为大家分享了Java模拟登录正方教务抓取成绩.课表.空教室等信息,供大家参考,具体内容如下 1.Jwgl.java package com.ican.yueban.jwgl; import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; import java.util.Scanner; import org.apache.http.Ht
-
基于angular6.0实现的一个组件懒加载功能示例
我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,