使用megapixImage.js定位并展示上传的图片

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>

效果图：

使用megapixImage.js定位并展示上传的图片

相关推荐