angularjs 客户端拍照图片选择、压缩、水印、上传

公司要求微信用的angulars，有一个拍照加水印的要求，贴出来共享，萌新从项目中抽离的，如有bug请指正轻喷。

1.html（只贴相关部分代码）

<div class="form-control" style="height: auto;"><div class="item"><div class="thumb-wrap" ng-repeat="picFile in picFiles"><img id="uploadImg_{{picFile.index}}" ng-click="captureModalClick(this);" ui-turn-on="xjCaptureModal" ngf-src="picFile.src" class="thumb"><img class="thumb-close" ng-click="removePic(this);" src="../images/common/close.png" /></div>                    <div class="thumb-wrap upload"> <input type="file" ngf-select="fileSelect($file);" accept="image/*" capture="camera"/>+</div></div>
</div>

2. modals，图片放大显示的弹出框。

<div ui-content-for="modals"><div class="modal" ui-if='xjCaptureModal' ui-state='xjCaptureModal'><div class="modal-backdrop in"></div><div class="modal-dialog" style="height: 100%;"><div class="modal-content" style="height: 95%;"><div class="modal-header"><h4 class="modal-title text-center">查看照片</h4></div><div class="modal-body" style="height: 90%;" ui-turn-off="xjCaptureModal"><div class="scrollable section"><div class="scrollable-content"><img ng-if="picFile != null" ngf-src="picFile" style="width: 100%;"/></div></div></div></div></div></div>
</div>

3.controller ，注意该控制器使用了自定义服务 imageCompress。需要在定义控制器的时候独立添加，设置依赖关系。

app.controller('addmyController', function($rootScope, $scope, $http, $routeParams, $window, $location,$q,imageCompress) {$scope.uploadHttpUrl = “上传地址url”;$scope.picFiles=[];  //图片数组//拍照选择图片$scope.fileSelect = function (file){if(file){var srcText = “水印文字”;imageCompress.resizeFile(file,srcText).then(function(blob_data) {var picFile = {index : $scope.picFiles.length,src : blob_data}$scope.picFiles.push(picFile);},function(err_reason){console.log(err_reason);});}}//移除图片$scope.removePic = function(element){var index = element.picFile.index;$scope.picFiles.splice(index, 1);for(var i = 0; i < $scope.picFiles.length; i++){if($scope.picFiles[i].index > index){$scope.picFiles[i].index --;}}};//图片弹出放大显示 $scope.captureModalClick = function(element){$scope.picFile = element.picFile.src;};上传图片按钮$scope.submitItem =function(){var params = {};    if($scope.picFiles.length > 0){var uploadFileIndex = 0;var photoIds = "";    var doUploadFiles = function(callback){var picFile = $scope.picFiles[uploadFileIndex];if(picFile.fileId && Object.prototype.toString.call(picFile.src) === "[object String]"){photoIds += picFile.fileId;uploadFileIndex ++;if(uploadFileIndex < $scope.picFiles.length){photoIds += ",";doUploadFiles(callback);}else{callback(true, photoIds);}}else{var isNeedRotate = false;var imgId = "uploadImg_" + picFile.index;var uploadImg = document.getElementById(imgId);if(uploadImg && uploadImg.height > uploadImg.width&& (navigator.userAgent.indexOf('iPhone') > -1)){isNeedRotate = true;}$scope.uploadFile(picFile.src, isNeedRotate, function(isSuccess, uploadFileId){if(isSuccess){photoIds += uploadFileId;uploadFileIndex ++;if(uploadFileIndex < $scope.picFiles.length){photoIds += ",";doUploadFiles(callback);}else{callback(true, photoIds);}}else{callback(false);}});}};doUploadFiles(function(isSuccess,photoIds){if(isSuccess){params.pics=photoIds;}else{$window.alert("上传图片出错");}});}else{}｝//上传图片 $scope.uploadFile = function(file,isNeedRotate, callback){if($scope.uploadHttpUrl && file){compressFile($q, file, isNeedRotate, function(blobData){var fd = new FormData();if(blobData){fd.append('file', blobData);fd.append('fileTypePostfix', ".jpg");}else{fd.append('file', file);}$http.post($scope.uploadHttpUrl, fd, {transformRequest: angular.identity,headers: {'Content-Type': undefined}}).success(function(data){callback(ture);}).error(function(){callback(false);});});}else{callback(false);}}    });

4.service ，用于压缩和添加水印。为什么用服务，canvas在angular中不太支持见菜鸟教程对service 的解释。

service代码如下：

app.service('imageCompress', ['$q', function($q){var dataURItoBlob = function(dataURI) {// convert base64/URLEncoded data component to raw binary data held in a stringvar byteString;if(dataURI.split(',')[0].indexOf('base64') >= 0){byteString = atob(dataURI.split(',')[1]);}else{byteString = unescape(dataURI.split(',')[1]);}// separate out the mime componentvar mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];// write the bytes of the string to a typed arrayvar ia = new Uint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], {type: mimeString});};var resizeFile = function(file,strText) {var deferred = $q.defer();try{var reader = new FileReader();reader.onload = function(e) {var img = document.createElement("img");img.src = e.target.result;var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);var MAX_WIDTH = 750;var MAX_HEIGHT = 750;img.onload = function(){var width = img.width;var height = img.height;if (width > height) {if (width > MAX_WIDTH) {height *= MAX_WIDTH / width;width = MAX_WIDTH;}} else {if (height > MAX_HEIGHT) {width *= MAX_HEIGHT / height;height = MAX_HEIGHT;}}canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);//添加水印ctx.font="20px microsoft yahei";var gradient=ctx.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");ctx.fillStyle=gradient;ctx.fillText(strText,50,50,100);var dataURL = canvas.toDataURL('image/jpeg');var blob = dataURItoBlob(dataURL);deferred.resolve(blob);};};reader.readAsDataURL(file);}catch(e){deferred.resolve(e);}return deferred.promise;};return {resizeFile: resizeFile};
}]);

angularjs 客户端拍照图片选择、压缩、水印、上传相关推荐

移动端/手机端完成图片旋转压缩剪裁上传
本篇文章主要介绍移动端/手机端图片的旋转.压缩.剪裁.上传这个功能的实现已经好了几次方案流程了,对最终的方案流程进行简述实现功能的主要方法/思想 1.图片的选取主要是通过input实现 2.图片的 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤导包 <dependency><gr ...
移动前端—H5实现图片先压缩再上传
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
无水印上传本地图片到网络获取地址+小书匠使用 +github和七牛云图床绑定--菜鸟小回
无水印上传本地图片到网络获取地址+小书匠使用 +github和七牛云图床绑定简介: 最近开始写博客,缺少一个Markdown编辑器.寻找了两三天终于找到了这款<小书匠>,可复制粘图, ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...

angularjs 客户端拍照图片选择、压缩、水印、上传

angularjs 客户端拍照图片选择、压缩、水印、上传相关推荐

最新文章

热门文章