cropper.js和exif.js实现头像上传缩放裁剪旋转
本文实例为大家分享了cropper.js和exif.js实现头像上传缩放裁剪旋转的具体代码，供大家参考，具体内容如下
做了一个头像上传的小功能，同时处理了ios竖着拍照图片旋转的问题。cropper.js（注意：cropper压缩版的js在手机版版缩放图片会有黑屏和图片飞了的bug，所以建议引入开发版本的cropper）依赖jquery，exif是用来获取拍照信息的，用于修复ios竖着拍照旋转的问题，我用的是amazeui框架，我在文件中也引入。
这是html文件
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cropper图片裁剪缩放</title>
<link rel="stylesheet" href="css/amazeui.min.css">
<link rel="stylesheet" href="css/cropper.css">
<link rel="stylesheet" href="css/amazeui.cropper.css">
</head>
<body>
<div class="am-form-group">
<label>logo</label>
<div class="am-cf">
<a href="javascript:;" id="up-img-touch" data-am-modal="{target: '#doc-modal-1'}">
<img src="picture-2.jpg" id="pic_img" style="width: 100px;">
<input type="hidden" name="new_pic" id="new_pic" value="">
</a>
</div>
</div>
<!--图片上传框-->
<div class="am-popup up-frame-bj " id="doc-modal-1">
<div class="am-modal-dialog up-frame-parent up-frame-radius">
<div class="header_check header_setting">
<a href="javascript:;" class="iconfont" data-am-modal-close>关闭</a>
<h1>上传</h1>
</div>
<div class="up-frame-body">
<div class="up-pre-main am-cf" >
<div class="up-pre-before up-frame-radius">
<img alt="" src="" id="image">
</div>
</div>
<div class="upload_btn am-cf">
<div class="am-fl am-form-file">
<button type="button" class="am-btn">上传图片</button>
<input type="file" id="inputImage">
</div>
<div class="rotateimg">
<span οnclick="rotateimgleft()">左</span>
<span οnclick="rotateimgright()">右</span>
</div>
<div class="am-fr">
<button type="button" class="am-btn" id="up-btn-ok" url="admin/user/upload.action">确定</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/amazeui.min.js" charset="utf-8"></script>
<script src="js/cropper.js" charset="utf-8"></script>
<script src="js/exif.js" charset="utf-8"></script>
<script src="js/custom_up_img.js" charset="utf-8"></script>
</html>
这是js文件
$(function() {
'use strict';
// 初始化
var $image = $('#image');
$image.cropper({
aspectRatio:1/1,
viewMode : 1,
autoCropArea:0.8,
dragMode:'move',
cropBoxMovable:false,
cropBoxResizable:false,
zoomOnTouch:true,
zoomable:true,
movable:true,
});
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var Orientation
var rotate_num
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.attr("src",blobURL)
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
$image.one('built.cropper', function () {
// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset', true).cropper('replace', blobURL);
$inputImage.val('');
} else {
window.alert('Please choose an image file.');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
$('#up-btn-ok').on('click',function(){
var img_src=$image.attr("src");
if(img_src==""){
$('#my-alert').modal('open');
return false;
}
var url=$(this).attr("url");
var canvas=$("#image").cropper('getCroppedCanvas');
var cv_img = document.createElement("canvas");
var ctx = cv_img.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
cv_img.width =canvas.width;
cv_img.height =canvas.width;
ctx.clearRect(0,0, canvas.width, canvas.height);//先清掉画布上的内容
ctx.translate(x,y);//将绘图原点移到画布中点
if(Orientation == 6) {
ctx.rotate(Math.PI/2);
} else if(Orientation == 3) {
ctx.rotate(-Math.PI/2);
} else if(Orientation == 8) {
ctx.rotate(Math.PI/1);
}
ctx.translate(-x,-y);//将画布原点移动
ctx.drawImage(canvas,0,0);
var data=cv_img.toDataURL("image/jpeg");
$("#pic_img").attr("src",data)
$('#new_pic').val($("#pic_img").attr("src"));
$('#doc-modal-1').modal('close');
});
});
function rotateimgright() {
$("#image").cropper('rotate', 90);
}
function rotateimgleft() {
$("#image").cropper('rotate', -90);
}
function set_alert_info(content){
$("#alert_content").html(content);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Cropper.js 实现裁剪图片并上传(PC端)
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例.本案例是参考cropper站点实例,进行修改简化. option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: the crop box is just within the container 裁剪框只能在 1内移动 1: the crop
-
使用cropper.js裁剪头像的实例代码
最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下..用起来挺简单的,下面是我做的一个小例子: 开始先放个成品图: 下面给出前后端的代码 前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好. 关于jsp页面引用的两个关于cropper的 文件,我就不提供了.大家需要的可以去官方的github上去下载. 地址:https://github.com/fengyuanchen/cropper <%@ page language="ja
-
基于cropper.js封装vue实现在线图片裁剪组件功能
效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri
-
jquery 图片截取工具jquery.imagecropper.js
除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示需要asp.net支持.测试通过 ImageCropper 下载 http://www.jb51.net/jiaoben/25688.html插件用法: 复制代码 代码如下: var imageCropper = $('#imgBackground').imageCropper(); 要注意的是此插件只应用在有src属性的img标签上. 通过插件输出的参数,即可以通过服务器端代码截取图片,比
-
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind
-
cropper.js和exif.js实现头像上传缩放裁剪旋转
本文实例为大家分享了cropper.js和exif.js实现头像上传缩放裁剪旋转的具体代码,供大家参考,具体内容如下 做了一个头像上传的小功能,同时处理了ios竖着拍照图片旋转的问题.cropper.js(注意:cropper压缩版的js在手机版版缩放图片会有黑屏和图片飞了的bug,所以建议引入开发版本的cropper)依赖jquery,exif是用来获取拍照信息的,用于修复ios竖着拍照旋转的问题,我用的是amazeui框架,我在文件中也引入. 这是html文件 <!doctype html>
-
全屏js头像上传插件源码高清版
本文实例为大家分享了全屏js头像上传插件源码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ccp</title> <link href="Content/ccp.css" rel=&qu
-
js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高. 这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法 html <div class="r
-
基于HTML5+js+Java实现单文件文件上传到服务器功能
上传单文件到服务器 应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定. 好了,开始上代码. HTML5代码: <form name="upform" action="" method="POST"> <input type ="
-
js前端实现多图图片上传预览的两个方法(推荐)
一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu
-
JS自定义函数对web前端上传的文件进行类型大小判断
废话不多说了直接给大家贴js代码了.具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me
-
JS实现表单多文件上传样式美化支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f
-
node.js使用express框架进行文件上传详解
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex
-
JS+html5实现异步上传图片显示上传文件进度条功能示例
本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na
-
JS中FormData类实现文件上传
本文实例为大家分享了JS中FormData类实现文件上传的具体代码,供大家参考,具体内容如下 上篇文章讲到了FormReader类实现文件上传,但是那是HTML5的新特性,在不支持H5的浏览器上则无法使用.这次介绍一个JS的普通类FormData,在不支持H5浏览器环境下也可以文件上传和预览,并且还能监控上传进度. 案例一:xhr.upload.onprogress监控文件的上传进度,并且动态显示 <!DOCTYPE html> <html lang="en">