编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义UI,引用'cropper.js', 'exif.js'

/*初始化裁剪插件*/
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var Cropper = window.Cropper;
var console = window.console || { log: function () {} };
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var actions = document.getElementById('actions');
var isUndefined = function (obj) {
return typeof obj === 'undefined';
};
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1:1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
$("#containerDiv").show();
$("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : true,// 容器是否显示网格背景
movable : true,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
var cropper = new Cropper(image, options);

/*选择图片*/
var inputImage = document.getElementById('inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('Please choose an image file.');
}
}
$(inputImage).find("img").hide();
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ' disabled';
}

/*按钮绑定事件*/
actions.querySelector('.docs-buttons').onclick = function (event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var result;
var input;
var data;

if (!cropper) {
return;
}

while (target !== this) {
if (target.getAttribute('data-method')) {
break;
}
target = target.parentNode;
}

if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
return;
}

data = {
method: target.getAttribute('data-method'),
target: target.getAttribute('data-target'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};

if (data.method) {
if (typeof data.target !== 'undefined') {
input = document.querySelector(data.target);

if (!target.hasAttribute('data-option') && data.target && input) {
try {
data.option = JSON.parse(input.value);
} catch (e) {
console.log(e.message);
}
}
}

if (data.method === 'getCroppedCanvas') {
data.option = JSON.parse(data.option);
}

result = cropper[data.method](data.option, data.secondOption);

switch (data.method) {
case 'scaleX':
case 'scaleY':
target.setAttribute('data-option', -data.option);
break;

case 'getCroppedCanvas':
if (result) {
fileImg = result.toDataURL('image/jpg');
$("#previewResult").attr("src", fileImg).show();
//$("#photoBtn").val("重新选择");
submitForm();
}

break;

case 'destroy':
$("#inputImage").val("");
$("#containerDiv").hide();
$("#imgEdit").hide();
break;
}

if (typeof result === 'object' && result !== cropper && input) {
try {
input.value = JSON.stringify(result);
} catch (e) {
console.log(e.message);
}
}
}
}

var fileImg = "";
$(function(){
$("#imgCutConfirm").bind("click",function(){
$("#containerDiv").hide();
$("#imgEdit").hide();
//$("#getCroppedCanvasModal").modal("hide");
})
});

//上传头像
function submitForm() {
$("#registerForm").attr("enctype","multipart/form-data");
var formData = new FormData($("#registerForm")[0]);
formData.append("photo", encodeURIComponent(fileImg));//
//formData.append("fileFileName","photo.jpg");
$.ajax({
url: "/my/upphoto",
type: 'POST',
data: formData,
timeout : 10000, //超时时间设置,单位毫秒
async: true,
cache: false,
contentType: false,
processData: false,
success: function (result) {
},
error: function (returndata) {
Alert.closedLoading();
}
});
}

手机端图像编辑上传-cropper的更多相关文章

  1. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  2. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  3. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  5. django 常用方法总结 < 手写分页-上传头像-redis缓存,排行 ...>

    1.不使用自带模块<Paginator>的手写分页功能views.pydef post_list(request): page = request.GET.get('page', 1) # ...

  6. jquery.uploadifive 解决上传限制图片或文件大小

    dotNet疯狂之路No.28  今天很残酷,明天更残酷,后天很美好,但是绝大部分人是死在明天晚上,只有那些真正的英雄才能见到后天的太阳.  We're here to put a dent in t ...

  7. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  8. html5,js插件实现手机端实现头像剪切上传

    思路:先打开相册,选取图片,在剪切图片,转化为base64格式,然后上传到七牛存储,返回url,再传给后端,整个流程就是这样.用的是angular框架,图像插件用到imagecropper.js,废话 ...

  9. 编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似

    1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8"  page ...

随机推荐

  1. 文件IO模型

    In case of kernel-space network drivers, all three regions are mapped to kernel space, and any acces ...

  2. centos7下安装docker(13.4容器volume总结)

    最近我们学习了docker 存储,首先docker存储有两种:storage driver和data volume. storage driver是由镜像层和容器层组成的,可以通过docker ins ...

  3. 使用chrome远程调试设备及调试模拟器设备

    使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统 ...

  4. SDOI2016 R1做题笔记

    SDOI2016 R1做题笔记 经过很久很久的时间,shzr终于做完了SDOI2016一轮的题目. 其实没想到竟然是2016年的题目先做完,因为14年的六个题很早就做了四个了,但是后两个有点开不动.. ...

  5. mac下进行连接pptp协议

    环境:mac系统 软件:shimo 协议:pptp协议 说明: mac 自带vpn已经不支持 pptp协议的vpn,可以下载shimo连接. mac下进行vpn连接pptp协议操作方法: 下载: 链接 ...

  6. ubantu 安装 wget

    sudo apt-get update sudo apt-get install wget wget

  7. HTML+CSS之盒子模型

    一.元素分类 CSS中html的标签元素大体分为三种类型 1.块状元素 @特点: #每个块级元素都从新的一行开始,并且其后的元素也另起一行(一个块级元素独占一行) #元素的高度.宽度.行高以及顶和底边 ...

  8. 现代JavaScript函数库 usuallyjs 的安装和使用

    usuallyjs usuallyjs 是一个面向现代 Web 开发的 JavaScript 实用函数库. usuallyjs 基于 ES6 开发,抛弃了传统 Web 开发中 DOM 和 BOM 操作 ...

  9. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  10. LeetCode 657. Robot Return to Origin

    There is a robot starting at position (0, 0), the origin, on a 2D plane. Given a sequence of its mov ...