手机端图像编辑上传-cropper
编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义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的更多相关文章
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- HTML5手机端拍照上传
1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...
- 手机端 H5上传头像
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- django 常用方法总结 < 手写分页-上传头像-redis缓存,排行 ...>
1.不使用自带模块<Paginator>的手写分页功能views.pydef post_list(request): page = request.GET.get('page', 1) # ...
- jquery.uploadifive 解决上传限制图片或文件大小
dotNet疯狂之路No.28 今天很残酷,明天更残酷,后天很美好,但是绝大部分人是死在明天晚上,只有那些真正的英雄才能见到后天的太阳. We're here to put a dent in t ...
- 关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
- html5,js插件实现手机端实现头像剪切上传
思路:先打开相册,选取图片,在剪切图片,转化为base64格式,然后上传到七牛存储,返回url,再传给后端,整个流程就是这样.用的是angular框架,图像插件用到imagecropper.js,废话 ...
- 编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似
1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
随机推荐
- Mysql 索引 事物
索引 针对庞大数据 加速查询 缺点 占用空间 分类: 普通索引: 通过 index 创建 唯一索引: 就是 unique key 主键索引: 就是 primary key 联合索引(多列)" ...
- 浅析SQLite的锁机制和WAL技术
锁机制 SQLite基于锁来实现并发控制.SQLite的锁是粗粒度的,并不拥有PostgreSQL那样细粒度的行锁,这也使得SQLite较为轻量级.当一个连接要写数据库时,所有其它的连接都被锁住,直到 ...
- [容斥原理] hdu 4135 Co-prime
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4135 Co-prime Time Limit: 2000/1000 MS (Java/Others) ...
- centos7下kubernetes(10。kubernetes-daemonset)
deployment部署得副本pod会分布在各个node上,每个node上可以运行很多个pod. daemonset的不同之处就在于,daemonset可以让每个node上只运行一个pod daemo ...
- 机器学习算法总结(五)——聚类算法(K-means,密度聚类,层次聚类)
本文介绍无监督学习算法,无监督学习是在样本的标签未知的情况下,根据样本的内在规律对样本进行分类,常见的无监督学习就是聚类算法. 在监督学习中我们常根据模型的误差来衡量模型的好坏,通过优化损失函数来改善 ...
- [国家集训队]happiness
嘟嘟嘟 就这么建. --- #include<cstdio> #include<iostream> #include<cmath> #include<algo ...
- 爬取伯乐在线文章(五)itemloader
ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...
- 【window】window10永久关闭更新
在使用pc过程中自己遇到的问题 相关资料:http://www.ghost580.com/win10/2016-10-21/17295.html 作者:smile.轉角 QQ:493177502
- 009_一行python重要工具
一.一行启动httpserver 你可以先登录容器(webssh),然后(注意必须是在/data/log/debug/pprof/目录) 例如生成 jvm dump文件 jmap -dump:form ...
- 淡旺季机票的价格问题(switch语句与if-else语句嵌套)
项目背景 淡旺季机票的价格,原价机票价格为5000元, 淡季头等舱打5折,经济舱打4折 旺季头等舱打9折,经济舱打8折 要求 编写程序实现: 输入任意的月份与舱位来计算机票的价格 1代表头等舱,2代表 ...