截取图片生成头像插件
2017-09-30 16:13
120 查看
上传头像插件
目的: 帮助开发者快速开发上传头像功能点背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提供一个比较自由度的上传并且可以剪切的插件。
资源: 具体资源请查看这里
实现大致思路如下:
先有一个上传的(本地上传的功能),然后获取图片的地址。获取图片地址之后,进行截取图片(这里推荐一个插件)点这里,具体怎么用就不再赘述。
等截取图片之后,需要将截取的文件转换为二进制大文件。$(‘#image’).cropper(‘getCroppedCanvas’).toBlob();
调取接口,将二进制大文件上传即可。
直接上代码:
先引入如下文件cropper.js [点这里](https://github.com/fengyuanchen/cropperjs)
具体业务代码
$(function () { var URL = window.URL || window.webkitURL; var $image = $('#image'); var $rotate = $('#userImg_rotate'); var $reUpload = $('#userImg_reUpload'); var $zoomOut = $('#userImg_zoomOut'); var $zoomIn = $('#userImg_zoomIn'); var $save = $('#userImg_save'); var croppable = false; var $previews = $('.userImg_preview'); var options = { aspectRatio: 1, viewMode: 1, built: function () { croppable = true; }, build: function (e) { var $clone = $(this).clone(); $clone.css({ display: 'block', width: '100%', minWidth: 0, minHeight: 0, maxWidth: 'none', maxHeight: 'none' }); $previews.css({ width: '100%', overflow: 'hidden' }).html($clone); }, crop: function (e) { var imageData = $(this).cropper('getImageData'); var previewAspectRatio = e.width / e.height; $previews.each(function () { var $preview = $(this); var previewWidth = $preview.width(); var previewHeight = previewWidth / previewAspectRatio; var imageScaledRatio = e.width / previewWidth; $preview.height(previewHeight).find('img').css({ width: imageData.naturalWidth / imageScaledRatio, height: imageData.naturalHeight / imageScaledRatio, marginLeft: -e.x / imageScaledRatio, marginTop: -e.y / imageScaledRatio }); }); } }; var originalImageURL = $scope.userInfo_imgUrl; var uploadedImageURL; $scope.initCropper = function(){ // init $image.attr('src',$scope.userInfo_imgUrl).cropper(options); }; // rotate $rotate.on('click', function(){ $image.cropper('rotate', 90); }); // zoomOut $zoomOut.on('click',function(){ $image.cropper('zoom', -0.1); }); // zoomIn $zoomIn.on('click',function(){ $image.cropper('zoom', 0.1); }); // Move /*$move.on('click',function(){ $image.cropper('setDragMode'); });*/ // reUpload $reUpload.on('click',function(){ $image.cropper('destroy').attr('src', $scope.userInfo_imgUrl).cropper(options); if (uploadedImageURL) { URL.revokeObjectURL(uploadedImageURL); uploadedImageURL = ''; } }); // Keyboard $(document.b 4000 ody).on('keydown', function (e) { if (!$image.data('cropper') || this.scrollTop > 300) { return; } switch (e.which) { case 37: e.preventDefault(); $image.cropper('move', -1, 0); break; case 38: e.preventDefault(); $image.cropper('move', 0, -1); break; case 39: e.preventDefault(); $image.cropper('move', 1, 0); break; case 40: e.preventDefault(); $image.cropper('move', 0, 1); break; } }); // 剪切和确定上传图片 $save.on('click',function(){ common.Loading.show(); $('#image').cropper('getCroppedCanvas').toBlob(function (blob) { var formData = new FormData(); formData.append('photoFile', blob); // 这里写入后端给你的上传接口 $.ajax(API_URL+'', { method: "POST", data: formData, headers: { 'auth-token' : common.Cookie.get('token') }, processData: false, contentType: false, success: function (res) { common.Loading.hide(); common.Toast.show('头像上传成功!'); try{ $scope.$apply(function(){ $scope.isShowUnCompleteInfoBox = false; $scope.isShowCompleteInfoBox = false; $scope.userInfo_imgUrl = res.data; }) }catch(err){ console.log(err) } }, error: function () { common.Toast.show('头像上传失败!'); } }); }); }) // 上传图片,这里传本地的图片并且获取一个本地图片的路径 var $inputImage = $('#inputImage'); if (URL) { $inputImage.change(function () { var files = this.files; var file; if (!$image.data('cropper')) { return; } if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { if (uploadedImageURL) { URL.revokeObjectURL(uploadedImageURL); } uploadedImageURL = URL.createObjectURL(file); $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options); $inputImage.val(''); } else { common.Toast.show('请选择图片再上传!') } } }); } else { $inputImage.prop('disabled', true).parent().addClass('disabled'); } });
相关文章推荐
- mvc4 截取上传图片做头像,自动生成不同小尺寸缩略图
- mvc4 截取上传图片做头像,自动生成不同小尺寸缩略图 (地址)
- js 头像上传(图片截取) 插件 全屏高清版 源码
- ASP 实例:头像上传。文件(图片)上传,头像截取(Jquery的imgAreaSelect插件来选取截取区域)
- mvc4 截取上传图片做头像,自动生成不同小尺寸缩略图
- ASP 实例:头像上传。文件(图片)上传,头像截取(Jquery-ui插件来选取截取区域)
- PHPThumb处理图片,生成缩略图,图片尺寸调整,图片截取,图片加水印,图片旋转
- 【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope
- css sprites 图片精灵自动生成 插件
- android 半透明裁剪框 截取图片 头像
- 使用Mason和PHP生成饭否图片插件
- 美图秀秀开发插件生成的图片都有哪些格式?
- 【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope
- C#放缩、截取、合并图片并生成高质量新图的类
- 截取多个视频生成批量图片并批量命名保存的matlab实现
- 微信公众号点击分享生成分享的图片,可以调整二维码,头像,昵称到背景图指定位置
- shearphoto2.0头像截取插件
- Java实现头像截取裁剪后图片保存,获取的是base64数据,怎么转换为图片并保存到数据库。并读取出来。
- 使用Mason和PHP生成饭否图片插件
- 微信生成公众号带参数二维码用户头像 加上文字生成图片(三)