H5+ 图片压缩上传
2016-08-11 19:18
405 查看
转载自：http://www.scscms.com/html/article/20150319-1607191.html
index.html
原码复制打印关于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5+ 图片压缩上传</title>
<script type="text/javascript">
var imgData = null;
function appendFile(path){
var img = new Image();
img.onload = function () {
var that = this;
var w = that.width,h = that.height,scale = w / h;
w = Math.min(200,w);//自己定义一个高度或者使用默认值
h = w / scale;
var canvas = document.createElement('canvas');
canvas.setAttribute("width",w);
canvas.setAttribute("height",h);
canvas.getContext('2d').drawImage(that, 0, 0, w, h);
imgData = canvas.toDataURL("image/jpeg",1);//1是清晰度[0.1~1]
var pic = document.createElement("img");
pic.width = w;
pic.height = h;
pic.src = imgData;
document.body.appendChild(pic);//把图片插入到页面中显示
plus.nativeUI.confirm( "您确定要上传图片?", function(e){
e.index == 0 && upload();//确定后开始上传
}, "系统提醒", ["确定","取消"] );
}
img.src = path;
}
// 上传文件
function upload(){
plus.nativeUI.showWaiting();
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
plus.nativeUI.closeWaiting();
plus.nativeUI.alert(xhr.responseText == "ok" ? "上传成功!" :"上传失败!");
}
};
xhr.open( "POST", "http://www.????.com/test.php"); //设置你的域名地址
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("imgfile="+encodeURIComponent(imgData)); //参数必须编码（坑）
}
//弹出系统确认对话框
function actionSheet(){
plus.nativeUI.actionSheet( {title:"请选择图片",cancel:"取消",buttons:[{title:"直接拍照"},{title:"选择相册"}]}, function(e){
if(1 == e.index){
//plus.nativeUI.alert("直接拍照");
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
appendFile(entry.fullPath);
}, function(e) {
plus.nativeUI.alert(e.message);
});
}, function(e) {}, {
filename: "_doc/camera/"
});
}else if(2 == e.index){
//plus.nativeUI.alert("选择相册");
plus.gallery.pick(function(path){
appendFile(path);
});
}
});
}
function plusReady(){
var mainActivity = plus.android.runtimeMainActivity();
actionSheet();//如果不想打开页面就弹出菜单就删除此行
document.querySelector("button").addEventListener("click",actionSheet,false);
var back = false;//退出应用
plus.key.addEventListener( "backbutton", function(){
back ? plus.runtime.quit() : (back = true);
plus.nativeUI.toast( "再按一次退出应用" );
setTimeout(function(){back=false},1000);
/* var main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);退到后台运行 */
}, false );
}
document.addEventListener("plusready",plusReady,false);
</script>
<style type="text/css">
html {font-family: sans-serif;-webkit-text-size-adjust: 100%;text-align: center;}
body{margin: 0;}
h1{-webkit-box-shadow: 0 1px 6px #ccc;box-shadow: 0 1px 6px #ccc;margin-top: -2px;font-size: 17px;
font-weight: 500;line-height: 44px;color: #000;text-align: center;white-space: nowrap;}
</style>
</head>
<body>
<h1>H5+ 图片压缩上传</h1>
<p><button type="button">上传图片</button></p>
</body>
</html>
test.php
原码复制打印关于
<?php
$files = $_POST["imgfile"];
$tmp = base64_decode(substr($files,22));
$fp = dirname(__FILE__)."/images/".time().".jpg";
file_put_contents( $fp, $tmp);
echo "ok";
?>
index.html
原码复制打印关于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5+ 图片压缩上传</title>
<script type="text/javascript">
var imgData = null;
function appendFile(path){
var img = new Image();
img.onload = function () {
var that = this;
var w = that.width,h = that.height,scale = w / h;
w = Math.min(200,w);//自己定义一个高度或者使用默认值
h = w / scale;
var canvas = document.createElement('canvas');
canvas.setAttribute("width",w);
canvas.setAttribute("height",h);
canvas.getContext('2d').drawImage(that, 0, 0, w, h);
imgData = canvas.toDataURL("image/jpeg",1);//1是清晰度[0.1~1]
var pic = document.createElement("img");
pic.width = w;
pic.height = h;
pic.src = imgData;
document.body.appendChild(pic);//把图片插入到页面中显示
plus.nativeUI.confirm( "您确定要上传图片?", function(e){
e.index == 0 && upload();//确定后开始上传
}, "系统提醒", ["确定","取消"] );
}
img.src = path;
}
// 上传文件
function upload(){
plus.nativeUI.showWaiting();
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
plus.nativeUI.closeWaiting();
plus.nativeUI.alert(xhr.responseText == "ok" ? "上传成功!" :"上传失败!");
}
};
xhr.open( "POST", "http://www.????.com/test.php"); //设置你的域名地址
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("imgfile="+encodeURIComponent(imgData)); //参数必须编码（坑）
}
//弹出系统确认对话框
function actionSheet(){
plus.nativeUI.actionSheet( {title:"请选择图片",cancel:"取消",buttons:[{title:"直接拍照"},{title:"选择相册"}]}, function(e){
if(1 == e.index){
//plus.nativeUI.alert("直接拍照");
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
appendFile(entry.fullPath);
}, function(e) {
plus.nativeUI.alert(e.message);
});
}, function(e) {}, {
filename: "_doc/camera/"
});
}else if(2 == e.index){
//plus.nativeUI.alert("选择相册");
plus.gallery.pick(function(path){
appendFile(path);
});
}
});
}
function plusReady(){
var mainActivity = plus.android.runtimeMainActivity();
actionSheet();//如果不想打开页面就弹出菜单就删除此行
document.querySelector("button").addEventListener("click",actionSheet,false);
var back = false;//退出应用
plus.key.addEventListener( "backbutton", function(){
back ? plus.runtime.quit() : (back = true);
plus.nativeUI.toast( "再按一次退出应用" );
setTimeout(function(){back=false},1000);
/* var main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);退到后台运行 */
}, false );
}
document.addEventListener("plusready",plusReady,false);
</script>
<style type="text/css">
html {font-family: sans-serif;-webkit-text-size-adjust: 100%;text-align: center;}
body{margin: 0;}
h1{-webkit-box-shadow: 0 1px 6px #ccc;box-shadow: 0 1px 6px #ccc;margin-top: -2px;font-size: 17px;
font-weight: 500;line-height: 44px;color: #000;text-align: center;white-space: nowrap;}
</style>
</head>
<body>
<h1>H5+ 图片压缩上传</h1>
<p><button type="button">上传图片</button></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5+ 图片压缩上传</title>
<script type="text/javascript">
var imgData = null;
function appendFile(path){
var img = new Image();
img.onload = function () {
var that = this;
var w = that.width,h = that.height,scale = w / h;
w = Math.min(200,w);//自己定义一个高度或者使用默认值
h = w / scale;
var canvas = document.createElement('canvas');
canvas.setAttribute("width",w);
canvas.setAttribute("height",h);
canvas.getContext('2d').drawImage(that, 0, 0, w, h);
imgData = canvas.toDataURL("image/jpeg",1);//1是清晰度[0.1~1]
var pic = document.createElement("img");
pic.width = w;
pic.height = h;
pic.src = imgData;
document.body.appendChild(pic);//把图片插入到页面中显示
plus.nativeUI.confirm( "您确定要上传图片?", function(e){
e.index == 0 && upload();//确定后开始上传
}, "系统提醒", ["确定","取消"] );
}
img.src = path;
}
// 上传文件
function upload(){
plus.nativeUI.showWaiting();
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
plus.nativeUI.closeWaiting();
plus.nativeUI.alert(xhr.responseText == "ok" ? "上传成功!" :"上传失败!");
}
};
xhr.open( "POST", "http://www.????.com/test.php"); //设置你的域名地址
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("imgfile="+encodeURIComponent(imgData)); //参数必须编码（坑）
}
//弹出系统确认对话框
function actionSheet(){
plus.nativeUI.actionSheet( {title:"请选择图片",cancel:"取消",buttons:[{title:"直接拍照"},{title:"选择相册"}]}, function(e){
if(1 == e.index){
//plus.nativeUI.alert("直接拍照");
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
appendFile(entry.fullPath);
}, function(e) {
plus.nativeUI.alert(e.message);
});
}, function(e) {}, {
filename: "_doc/camera/"
});
}else if(2 == e.index){
//plus.nativeUI.alert("选择相册");
plus.gallery.pick(function(path){
appendFile(path);
});
}
});
}
function plusReady(){
var mainActivity = plus.android.runtimeMainActivity();
actionSheet();//如果不想打开页面就弹出菜单就删除此行
document.querySelector("button").addEventListener("click",actionSheet,false);
var back = false;//退出应用
plus.key.addEventListener( "backbutton", function(){
back ? plus.runtime.quit() : (back = true);
plus.nativeUI.toast( "再按一次退出应用" );
setTimeout(function(){back=false},1000);
/* var main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);退到后台运行 */
}, false );
}
document.addEventListener("plusready",plusReady,false);
</script>
<style type="text/css">
html {font-family: sans-serif;-webkit-text-size-adjust: 100%;text-align: center;}
body{margin: 0;}
h1{-webkit-box-shadow: 0 1px 6px #ccc;box-shadow: 0 1px 6px #ccc;margin-top: -2px;font-size: 17px;
font-weight: 500;line-height: 44px;color: #000;text-align: center;white-space: nowrap;}
</style>
</head>
<body>
<h1>H5+ 图片压缩上传</h1>
<p><button type="button">上传图片</button></p>
</body>
</html>test.php
原码复制打印关于
<?php
$files = $_POST["imgfile"];
$tmp = base64_decode(substr($files,22));
$fp = dirname(__FILE__)."/images/".time().".jpg";
file_put_contents( $fp, $tmp);
echo "ok";
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用H5Canvas进行前端图片压缩再上传笔记
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
- 移动端（h5）上传,压缩，预览图片
- 项目分享五：H5图片压缩与上传
- 移动端利用H5实现压缩图片上传功能
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- H5 canvas实现客户端压缩图片上传
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
- H5图片压缩与上传
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- H5 图片压缩上传解决方案
- H5使用localResizeIMG插件压缩图片后并上传
- H5图片压缩与上传
- vuejs组件分享H5图片上传、压缩,拍照旋转
- 前端预览图片和H5canvas压缩图片上传
- 移动前端—H5实现图片先压缩再上传
- 移动端H5上传图片并压缩上传
- H5技术完美实现调用手机摄像头、相册。图片上传base64，图片压缩、预览、删除以及图片旋转90度的处理--demo。
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理