megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题 

<!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>

 

posted @ 2016-08-07 21:03  五艺  阅读(163)  评论(0)    收藏  举报