<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="js/plugins/cropper/css/cropper.min.css" />
<style type="text/css">
.mui-bar {
background-color: #1FBBA6;
}
.mui-title {
color: #FAFAFA;
}
#imgBox {
height: 300px !important;
width: 300px !important;
margin: 30px auto;
background: url('js/plugins/cropper/images/bg.png');
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">头像</h1>
<a id="moreMenus" class="mui-icon mui-icon-compose mui-pull-right"
style="color:white;font-weight: bold;"></a>
</header>
<div class="mui-content">
<div id="imgBox">
<img id="userImage_id" width="300" height="300" />
</div>
<table align="center">
<tr>
<td style="padding:2px 5px;"><button type="button" disabled id="scaleX_id"
class="mui-btn mui-btn-blue toolbutton">左右变换</button></td>
<td style="padding:2px 5px;"><button type="button" disabled id="scaleY_id"
class="mui-btn mui-btn-blue toolbutton">上下变换</button></td>
<td style="padding:2px 5px;"><button type="button" disabled id="rotateMax_id"
class="mui-btn mui-btn-blue toolbutton">旋转90°</button></td>
</tr>
<tr>
<td colspan="3" style="padding:5px 5px;"><button type="button" disabled id="confirm_id"
class="mui-btn mui-btn-green mui-btn-block toolbutton">确定并保存</button> </td>
</tr>
</table>
<div style="padding: 10px; color:red;">
上传后图片服务端下载地址为：<span id="imagePath_div"></span>反斜杠我就不管了~~~可以将地址复制到浏览器进行预览下载等。
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript" src="js/plugins/cropper/js/cropper.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
plus.navigator.setStatusBarBackground("#1FBBA6");
document.getElementById("moreMenus").addEventListener("tap", function() {
var editButtons = new Array();
editButtons.push({
title: "拍照上传",
style: "default"
});
editButtons.push({
title: "从相册选择",
style: "default"
});
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: editButtons
}, function(e) {
var index = e.index;
switch (index) {
case 1:
captureImage(); //拍照
break;
case 2:
selectImage(); //相册选择
break;
}
});
});
document.getElementById("scaleX_id").addEventListener("tap", function() {
window._scaleX = window._scaleX * -1;
$("#userImage_id").cropper("scaleX", window._scaleX);
});
document.getElementById("scaleY_id").addEventListener("tap", function() {
window._scaleY = window._scaleY * -1;
$("#userImage_id").cropper("scaleY", window._scaleY);
});
document.getElementById("rotateMax_id").addEventListener("tap", function() {
$("#userImage_id").cropper("rotate", 90);
});
//确定裁切
document.getElementById("confirm_id").addEventListener("tap", function(e) {
var dataURL = $("#userImage_id").cropper("getCroppedCanvas", {
width: 300,
height: 300
});
// var imgUrl = dataURL.toDataURL("image/png", 1);
mui.toast("你好");
var imgUrl;
var dataURLX = dataURL;
dataURL.toBlob(function(blob) {
var url = URL.createObjectURL(blob);
console.log(url);
//blob:http://localhost:63342/d869ed9c-cad0-49f9-9965-e9959a15e0c0
console.log(blob);
//返回一个BLOB对象
// console.log(blobToBase64(blob));
mui.toast(url);
blobToDataURI(blob, function(data) {
// console.log(data); //data已经是base64
console.log("小");
// $('#serviceImage').attr("src",data);
imgUrl = data;
mui.toast(imgUrl);
console.log("朱");
// console.log(imgUrl);
// $("#userImage_id").attr("src" , imgUrl);
$("#userImage_id").cropper("replace", imgUrl);
$("#userImage_id").cropper("clear"); //裁切完成取消显示裁切框
$("#userImage_id").cropper("disable");
//确定裁切后销毁裁切组件，标记一下，下次继续裁切时需要初始化一下裁切组件
window.imageDisable = true;
//禁用几个功能按钮
$("button.toolbutton").prop("disabled", true);
//向后台提供数据
console.log(dataURLX);
uploadFile(imgUrl);
});
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result);
}
reader.readAsDataURL(blob);
}
}, "image/jpeg", 0.5);
// console.log(imgUrl);
// // $("#userImage_id").attr("src" , imgUrl);
// $("#userImage_id").cropper("replace", imgUrl);
// $("#userImage_id").cropper("clear"); //裁切完成取消显示裁切框
// $("#userImage_id").cropper("disable");
// //确定裁切后销毁裁切组件，标记一下，下次继续裁切时需要初始化一下裁切组件
// window.imageDisable = true;
// //禁用几个功能按钮
// $("button.toolbutton").prop("disabled", true);
// //向后台提供数据
// uploadFile(imgUrl);
});
//初始化裁切组件
initImageCropper();
});
//拍照
function captureImage() {
var cmr = plus.camera.getCamera(2);
cmr.captureImage(
function(path) {
//将图片地址转换
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var newPath = entry.toLocalURL() + "?version=" + Math.random();
loadImage(newPath);
});
},
function(error) {
mui.toast(error.message);
}, {
filename: "_documents/"
}
);
}
//文件上传
function uploadFile(image) {
// var rootPath = "http://81.70.23.51:5555";
var rootPath = "http://81.70.23.51:5555";
var url = rootPath + "/photo";
mui.ajax(url, {
dataType: "json",
type: "post",
data: {
xxx: image
},
success: function(data) {
if (data.result == "success") {
mui.toast("上传成功!");
document.getElementById("imagePath_div").innerText = data.message;
return;
}
mui.toast(data.message);
},
error: function(a, b, c) {
mui.toast("上传头像出现错误，请稍后再试!");
}
});
}
function initImageCropper() {
//初始化组件
$("#userImage_id").cropper({
aspectRatio: 3 / 3,
autoCropArea: 1,
dragMode: "move", //设置移动图片、重新绘制选图区域
cropBoxResizable: false,
//movable: true,//是否允许移动裁切框
zoomable: true, //是否允许放大图片
guides: true, //取消显示裁切线中间的虚线网格
minContainerWidth: 300,
minContainerHeight: 300,
minCanvasWidth: 300,
minCanvasHeight: 300,
crop: function(data) {
//初始化
window._scaleX = data.scaleX;
window._scaleY = data.scaleY;
}
});
}
//选择图片
function selectImage() {
plus.gallery.pick(function(path) {
loadImage(path);
}, function(e) {
mui.toast("没有选择图片.");
});
}
//确定选择图片
function loadImage(path) {
var img
mui裁切图片Demo.zip （30个子文件） 
mui裁切图片Demo js plugins cropper js 
cropper.min.js 37KB css cropper.min.css 4KB images 
bg.png 168B jquery-3.1.1.slim.min.js 68KB mui.js 252KB mui.min.js 120KB manifest.json 11KB unpackage cache apk cmManifestCache.json 7KB H54790448_cm.apk 3.94MB apkurl 77B cloudcertificate certdata 122B wgt H54790448 js plugins cropper js cropper.min.js 37KB css cropper.min.css 4KB images bg.png 168B jquery-3.1.1.slim.min.js 68KB mui.js 252KB mui.min.js 120KB manifest.json 4KB css mui.min.css 74KB mui.css 95KB
index.html 8KB .manifest fonts mui.ttf 29KB release apk H54790448__20221005224309.apk 4.14MB H54790448__20221005223802.apk 4.14MB .confirmed_dependencies 274B css mui.min.css 74KB mui.css 95KB index.html 8KB .project 1KB fonts mui.ttf 29KB资源评论
一键难忘
- 粉丝: 11w+
最新资源
- 如何学习好单片机编程设计方案.doc
- 互联网+背景下体育人文素养对大学生创业能力的影响.docx
- 如何使用AutoCAD的工具选项板.docx
- 对互联网+专业护理资源介入安康市养老事业发展的探索.docx
- 教育信息化管理的问题及解决对策.docx
- 第二章变电站综合自动化系统的间隔层装置.doc
- 区块链技术对于深化会计电算化的前景分析.docx
- 计算机竞赛题大全.docx
- myeclipse连接数据库建立web工程简单测试访问成功例子.doc
- VxWorks嵌入式数据库管理系统设计方案.doc
- 企业网络管理和业务调度自动化设计方案.docx
- “教学中的互联网搜索”《记金华的双龙洞》教案设计思路.doc
- 基于 IMDB 情感分析数据集运用 LSTM 结合预训练词典向量模型开展电影评论情感分类研究
- 交通指挥灯PLC控制系统方案设计书.doc
- 浅析大数据时代电力企业档案的开发利用.docx
- 项目管理之需求识别和项目识别.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
