MUI(拍照+系统相册)图片上传剪切预览
- <!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 图片上传剪切预览,可选(拍照+系统相册)
整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 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"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- CATEGORICAL, ORDINAL AND INTERVAL VARIABLES
WHAT IS THE DIFFERENCE BETWEEN CATEGORICAL, ORDINAL AND INTERVAL VARIABLES? In talking about variabl ...
- django时区设置以及全球用户如何各自显示当地时间
在Django的配置文件settings.py中,有两个配置参数是跟时间与时区有关的,分别是TIME_ZONE和USE_TZ 如果USE_TZ设置为True时,Django会使用系统默认设置的时区,即 ...
- macOS Sierra10.12.5 显示允许任何来源
在终端输入:sudo spctl --master-disable即可.
- Spring Boot 集成Shiro和CAS
Spring Boot 集成Shiro和CAS 标签: springshirocas 2016-01-17 23:03 35765人阅读 评论(22) 收藏 举报 分类: Spring(42) 版 ...
- Siamese Network简介
Siamese Network简介 Siamese Network 是一种神经网络的框架,而不是具体的某种网络,就像seq2seq一样,具体实现上可以使用RNN也可以使用CNN. 简单的说,Siame ...
- 在TensorFlow中基于lstm构建分词系统笔记
在TensorFlow中基于lstm构建分词系统笔记(一) https://www.jianshu.com/p/ccb805b9f014 前言 我打算基于lstm构建一个分词系统,通过这个例子来学习下 ...
- 程序员训练机器学习 SVM算法分享
http://www.csdn.net/article/2012-12-28/2813275-Support-Vector-Machine 摘要:支持向量机(SVM)已经成为一种非常受欢迎的算法.本文 ...
- 1 R语言介绍
注释:# 赋值:<- 查看.设定当前工作目录:getwd() setwd() wd:workspace directory[setwd("c:/myproject/project ...
- linux命令学习——tar
tar命令用来处理压缩,压缩和解压.在linux上经常遇到tar命令,总结如下: tar-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件这五个是独 ...
- 什么是BFC(Block Formatting Context)
原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...