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>
效果图: