MUI 图片上传剪切预览，可选（拍照+系统相册）
整合网上的例子。。麻蛋。没跑通。。没办法。自己就拿他们的例子完善了一下。。已经可以使用了！
准备工作： 这几个文件要引入。特别是JS 文件！！！
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/cropper.css" rel="stylesheet" /> <script src="../js/mui.min.js"></script>
<script src="../js/app.min.js"></script>
<script src="../js/jquery-1.9.min.js"></script>
<script src="../js/exif.js"></script>
<script src="../js/cropper.min.js"></script>
- app.min.js : https://github.com/kikinteractive/app/tree/master
- cropper.js : https://github.com/fengyuanchen/cropper
- exif.js : https://github.com/exif-js/exif-js
1 主文件编辑页面： headinfo.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我的资料</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style type="text/css"> #head {
line-height: 40px;
} .head-img {
width: 40px;
height: 40px;
} #head-img1 {
position: absolute;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
} </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
完成
</button>
<h1 class="mui-title">头像修改</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">个人头像
<span class="mui-pull-right head">
<img class="head-img mui-action-preview" id="head-img1" src=""/>
</span>
</a>
</li>
</ul>
</div> <script src="../js/mui.min.js"></script>
<script src="../js/app.min.js"></script>
<script type="text/javascript">
(function($) {
$.init();
$.plusReady(function() {
//初始化头像，和预览图
setTimeout(function() {
//赋值一个默认的头像
document.getElementById("head-img1").src = "../img/add.png";
setTimeout(function() {
initImgPreview();
}, 200);
}, 0); //弹出菜单
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
if(mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function(b) {
switch(b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
} });
}); //拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
//存储到本地
plus.io.resolveLocalFileSystemURL(e, function(entry) {
cutImage(entry.toLocalURL());//裁剪图片，传入绝对地址
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.jpg"
})
} //相册
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) { //entry为图片原目录（相册）流
cutImage(entry.toLocalURL());
}, function(e) {
console.log("读取图片错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
}; //预览图像
document.getElementById("head-img1").addEventListener('tap', function(e) {
e.stopPropagation(); //阻止冒泡
}); function initImgPreview() {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if(imgs && imgs.length > 0) {
var slider = document.createElement("div");
slider.setAttribute("id", "__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap", function() {
slider.style.display = "none";
});
slider.addEventListener("touchmove", function(event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id", "__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function(value, index, array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap', function() {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index, 0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
var img = document.createElement("img");
img.setAttribute("src", value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
} //裁剪图片
function cutImage(path) {
$.openWindow({
url: 'cropper.html',
id: 'cropper',
extras: {
path: path,
},
show: {
aniShow: 'zoom-fade-in',
duration: 800
},
waiting: {
autoShow: true
}
});
} //更新用户头像，主要是裁剪页面裁剪完后触发的
//添加updateHeadImg自定义事件监听
window.addEventListener('updateHeadImg',function(event){
//获得事件参数
var my_icon = event.detail.img_path;
//根据id向服务器请求新闻详情
if(my_icon != "") {
document.getElementById("head-img1").src = my_icon;
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = my_icon;
}
}); })(mui);
</script>
</body> </html>
2 剪切文件： cropper.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>裁剪头像</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/cropper.css" rel="stylesheet" /> <style type="text/css">
body {
background-color: #000000;
}
#cropper-example-1 {
background-color: #000000;
height: 93%;
width: 100%;
position: absolute;
} #quxiao,
#xuanzhuan,
#xuanqu {
font-size: 20px;
} .divbut {
width: 100%;
text-align: center;
position: fixed;
z-index: 2;
bottom: 0px;
background-color: #000000;
height: 7.5%;
line-height: 50px;
} .divbut>div:first-child {
float: left;
width: 20%;
} .divbut>div:last-child {
float: right;
width: 20%;
} img#im {
height: 100%;
width: 100%;
}
</style>
</head> <body>
<div id="cropper-example-1" class="mui-hidden">
<img id="im" alt="Picture" />
</div> <div class="divbut">
<div>
<p id="quxiao" class="iconfont icon-quxiao">取消</p>
</div>
<div>
<p id="xuanqu" class="iconfont icon-queding">确认</p>
</div>
</div>
<img src="" alt="" class="mui-hidden" id="im_exif" /> <script src="../js/jquery-1.9.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/exif.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/app.min.js"></script>
<script>
(function(c) {
var Cro = function() {}
c.extend(Cro.prototype, {
orientation: null,
urldata: null,
view: null,
num: 0,
sbx: null,
sby: null,
n: 0,
onReady: function() {
var that = this;
mui.init();
that.bindEvent();
that.view = plus.webview.currentWebview(); var img = document.getElementById("im_exif");
img.src = that.view.path;
img.addEventListener("load", function() {
//exif调整图片的横竖
EXIF.getData(this, function() {
var orientation = EXIF.getAllTags(this).Orientation;
$("#im").attr("src", that.loadcopyImg(img, orientation));
document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
that.cropperImg();
});
})
},
cropperImg: function() {
var that = this;
$('#cropper-example-1 > img').cropper({
aspectRatio: 1 / 1,
autoCropArea: 1,
strict: true,
background: false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
crop: function(data) {
that.urldata = that.base64(data);
}
});
},
loadcopyImg: function(img, opt) {
var that = this;
var canvas = document.createElement("canvas");
var square = 500;
var imageWidth, imageHeight;
if(img.width > img.height) {
imageHeight = square;
imageWidth = Math.round(square * img.width / img.height);
} else {
imageHeight = square; //this.width;
imageWidth = Math.round(square * img.width / img.height);
}
canvas.height = imageHeight;
canvas.width = imageWidth;
if(opt == 6) {
that.num = 90;
} else if(opt == 3) {
that.num = 180;
} else if(opt == 8) {
that.num = 270;
}
if(that.num == 360) {
that.num = 0;
} var ctx = canvas.getContext("2d");
ctx.translate(imageWidth / 2, imageHeight / 2);
ctx.rotate(that.num * Math.PI / 180);
ctx.translate(-imageWidth / 2, -imageHeight / 2);
ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
var dataURL = canvas.toDataURL("image/jpeg", 1);
return dataURL;
},
bindEvent: function() {
var that = this;
document.getElementById("quxiao").addEventListener("tap", function() {
mui.back(); //取消就直接返回
});
document.getElementById("xuanqu").addEventListener("tap", function() {
var preView = plus.webview.getWebviewById('plus/headinfo.html');
//触发上一个页面刷新图片事件
mui.fire(preView,'updateHeadImg',{
img_path:that.urldata
});
mui.back();
});
},
base64: function(data) {
var that = this;
var img = document.getElementById("im"); var canvas = document.createElement("canvas");
//像素
canvas.height = 500;
canvas.width = 500;
var bx = data.x;
var by = data.y;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, 500, 500);
var dataURL = canvas.toDataURL("image/jpeg", 1.0); //第二个参数是质量
return dataURL;
}
}); var cro = new Cro(); c.plusReady(function() {
cro.onReady();
})
})(mui)
</script>
</body> </html>
MUI 图片上传剪切预览，可选（拍照+系统相册）的更多相关文章
- MUI(拍照+系统相册)图片上传剪切预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- JQuery插件：图片上传本地预览插件，改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
随机推荐
- Ubuntu下SSH安装及提高SSH登陆认证速度的办法
Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条: sudo apt-get install openssh-server (查看返回的结果,如果没有出错, ...
- （转）Linux下PS命令详解
(转)Linux下PS命令详解 整理自:http://blog.chinaunix.net/space.php?uid=20564848&do=blog&id=74654 要对系统中进 ...
- Tomcat：基础安装与使用教程
Tomcat:基础安装与使用教程 背景 此文记录了 Tomcat 的基本使用方法,主要为了强化记忆. 安装步骤 第一步:下载和安装 Java 下载地址:http://www.oracle.com/te ...
- 删除TP数据库缓存
删除 /Runtime/Data/_fields/ 缓存表文件
- 图片上传裁剪（asp.net）
图片在线裁剪功能 前台展现用jquery.Jcrop实现,后台使用 System.Drawing.Image类来进行裁剪 完整dome下载 http://download.csdn.net/detai ...
- 谈API网关的背景、架构以及落地方案
Chris Richardson曾经在他的博客上详细介绍过API网关,包括API网关的背景.解决方案以及案例.对于大多数基于微服务的应用程序而言,API网关都应该是系统的入口,它会负责服务请求路由.组 ...
- 探索Java语言与JVM中的Lambda表达式
Lambda表达式是自Java SE 5引入泛型以来最重大的Java语言新特性,本文是2012年度最后一期Java Magazine中的一篇文章,它介绍了Lamdba的设计初衷,应用场景与基本语法.( ...
- TopK的一个简单实现
转自:http://rangerwolf.iteye.com/blog/2119096 题外话: <Hadoop in Action> 是一本非常不错的交Hadoop的入门书,而且建议看英 ...
- 在caffe中增加和convolution相同的层
1.打开vision_layers.hpp,复制ConvolutionLayer的代码,把类名还有构造函数的名字改为WtfLayer,把里面的带GPU的函数删掉. 2.Wtf_layer.cpp 添加 ...
- JavaScript 中，num = num || 1 这种写法有哪些优缺点？
语法糖,等价于 if(!!num === false) num=1; 类似于java的 num=null ? 1 : num 以下是来自某位知友的解答: 就是个简写法而已.好处就是短一点,但是其实坏处 ...