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

来源：互联网发布：mac压缩pdf文件大小编辑：程序博客网时间：2024/06/07 04:45

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>

效果图：

DEMO2.zip (14.9 KB)
下载次数: 2

查看图片附件

0 0