megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
实现点击input 的上传按钮，选择图片后，直接定位并展示图片。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<input type="file" id="cameraInput" name="cameraInput"/>
<!--图片预览-->
<div id="preview">
<canvas id="myCanvas"></canvas>
<img id="imgBtn"/>
<div>
<label id="tip2"></label>
</div>
</div>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="mobileFix.mini.js?v=20150704"></script>
<!-- 或者引用megapixImage.js 可网上下载到-->
<script>
var fileInput = document.getElementById('cameraInput');
fileInput.onchange = function () {
var file = fileInput.files[0];
var mpImg = new MegaPixImage(file);
//var resCanvas1 = document.getElementById('myCanvas');
var resCanvas1 = document.getElementById('imgBtn');
mpImg.render(resCanvas1, {
maxWidth: 550,
maxHeight: 550,
quality: 0.8
});
};
</script>
</body>
</html>
效果图：
