思路:在前端把图片压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在PHP解开Base64,写入到一个文件去。
<!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);
//console.log(result);
$.ajax({
url: './uploads.php',
type: 'POST',
data:{formFile:result.clearBase64},
dataType: 'HTML',
timeout: 1000,
error: function(){
alert('Error loading PHP document');
},
success: function(result){
//console.log(result);
alert("Uploads success~")
}
});
}
});
</script>
</body>
</html>
<?php
$base64 = $_POST['formFile'];
$IMG = base64_decode($base64);
$path = './';
file_put_contents($path.time().'.jpg',$IMG);
?>
插件地址:
https://github.com/think2011/localResizeIMG3/
demo下载:
分享到:
相关推荐
HTML5+Canvas手机拍摄,本地压缩上传图片
HTML5+Canvas+jQuery调用手机拍照功能,本地压缩上传图片。以上都是测试通过了的。
html5+canvas+js头像缩放裁剪
HTML5的file文件上传功能,在页面上配合canvas即可完成拍照上传图片的问题,但是会出现图片旋转的问题。
HTML5+Canvas微信运动折线图代码特效是一款基于HTML5+Canvas跟jQuery实现的某段时间内的动态折线图信息,非常有用。
通过HTML5的video开启手机拍照,拍照时需要手机确认开启摄像权限。然后再通过canvas捕获视频流保存为图片base64字符,最后将图片流传递到服务端进行保存。
实现过程:在HTML中对图片进行上传,在图片文件还未上传至服务器仍停留在form表单时,对该文件进行处理,在此过程中先获取原图的64位base编码,然后利用canvas对原图进行等比缩放,将缩放之后的图片生成新的64位base...
这是一款利用HTML5+Canvas手机端微信端微网站大转盘抽奖代码,HTML5+Canvas进行绘制中间内容区域,模仿现实抽奖效果,自适应浏览器宽度。
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转...
《HTML5+Canvas核心技术图形动画与游戏开发》.((美)David+Geary).pdf
实现手机端照片上传预览、压缩、旋转功能。 实现手机端照片上传预览、压缩、旋转功能。
一款非常漂亮的基于HTML5+Canvas实现的放烟花特效,地面旋转,夜空3D烟花动画特效。
html5+exif+canvas照片上传 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag...
因为最近一段时间,一直在弄微信项目,其中涉及到了证件上传的功能,刚开始的时候一点头绪都没有,上网查了很多资料,QQ群里面也问了不少人,很多人说...只是用到了HTML5的file文件上传功能,再配合canvas即可。下面附
html5+exif.js+mobileBUGFix.mini.js+canvas 移动端图片上传预览压缩旋转,iOS90度...html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。
html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip
h5+canvas调手机照相功能渣渣版
亲测html5+canvas+jquery拼图游戏实例,供学习参考 html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏 例子只是引子,一个思路,具体可以根据自己需求扩张。
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转...