编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义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. 「AHOI / HNOI2017」影魔

    「AHOI / HNOI2017」影魔 题目描述 解决这类比较复杂的区间贡献问题关键在于找到计算的对象. 比如这道题,我们计算的对象就是区间中间的最大值. 对于点\(i\),我们找到左边第一个比他大的 ...

  2. spring boot监控--actuator

    原文地址:http://blog.csdn.net/wh_ouyangshuang/article/details/48048111 spring-boot-actuator模块提供了一个监控和管理生 ...

  3. 【转】TCP和SOCKET关系

    socket是TCP/IP协议的API   TCP是数据的介质,Socket是TCP的介质. 查了一下RFC文档,Socket是RFC147,更新时间是1971年.TCP是RFC793,更新时间是19 ...

  4. hash_hmac 签名

    <?php /** * =========================================================== * Model_Base * Descriptio ...

  5. 多个窗口开启后,切换到指定title的窗口

    1.在google中,可以开启多个窗口,这是需要切换到自己需要的窗口去定位元素.如下: #获取两个窗口的标题 ${titles} Selenium2Library.Get Window Titles ...

  6. Java中volatile关键字解析

    一.内存模型的相关概念 大家都知道,计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程中,势必涉及到数据的读取和写入.由于程序运行过程中的临时数据是存放在主存(物理内存)当中的,这时就存 ...

  7. odoo学习总结

                                                   odoo10总结 1.odoo中的向导应用. .py文件 # -*- coding: utf-8 -*-f ...

  8. 20175234 数据库MySQL(课下作业)

    20175234 数据库MySQL(课下作业) 内容: 1.下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SE ...

  9. 基于 HTML5 的工业互联网 3D 可视化应用

    工业企业中生产线处于高速运转,由工业设备所产生.采集和处理的数据量远大于企业中计算机和人工产生的数据,生产线的高速运转则对数据的实时性要求也更高.破解这些大数据就是企业在新一轮制造革命中赢得竞争力的钥 ...

  10. Python学习第二篇

    list_num=list(range(1,1000001)) print(min(list_num)) print(max(list_num)) print(sum(list_num)) print ...