HTML5+Canvas手机拍摄,本地压缩上传图片
发布时间:2015-11-17, 14:37:28 分类:HTML | 编辑 off 网址 | 辅助
正文 2517字数 234,024阅读
<!DOCTYPE HTML>
<html lang="zh-CN">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<head>
<meta charset="UTF-8">
<title>LocalResizeIMG</title></head>
<style> body {
margin: 20px 20%;
color: #777;
text-align: center;
}</style>
<body><h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>
<hr/>
<input type="file"/>
<hr/>
<!-- javascript ================================================== -->
<script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>
<!-- mobileBUGFix.js 兼容修复移动设备 -->
<script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript"> $('input:file').localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
$('body').append(img);
$.ajax({
url: './uploads.php',
type: 'POST',
data: {formFile: result.clearBase64},
dataType: 'HTML',
timeout: 1000,
error: function () {
alert('Error loading PHP document');
},
success: function (result) {
}
});
}
}); </script>
</body>
</html>
Run code
Cut to clipboard
PHP代码:
<?php
$base64 = $_POST['formFile'];
$IMG = base64_decode($base64);
$path = './';
file_put_contents($path . time() . '.jpg', $IMG);
?>
Run code
Cut to clipboard
在前端把图片压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在PHP解开Base64,写入到一个文件去。
原插件地址:http://github.com/think2011/LocalResizeIMG
然后发现我朋友也写有一篇这个插件的使用的文章,地址在这里:http://a3147972.blog.51cto.com/2366547/1551066
最后,欢迎加Q群: 252799167
2015年04月11日12:23:10 Update:
这插件的作者已经对插件进行了升级,推荐使用新的插件:https://github.com/think2011/localResizeIMG3/
2015年8月12日 10:59:31 Update:
作者又对插件进行了版本更新:
https://github.com/think2011/localResizeIMG4
原文
http://cong5.net/post/260
Run code
Cut to clipboard
(支付宝)给作者钱财以资鼓励 (微信)→
暂无评论 »