android FileReader 读取图片资源显示预览失败解决方法
2014-03-12 16:33
996 查看
昨天用html5写一个手机上传图片问题,因为用户不可能自己剪辑图片,所以要在客户端生成缩图,不然用户没传两张把人家流量耗光了。
代码如下,
希望对有同样问题的同学有帮助,目前我使用
代码如下,
oImage.src="data:application/octet-stream;"+e.target.result.substr(e.target.result.indexOf("base64,"));是重点,因为发现android系统直接选择相册的话,老是显示不了预览图,这样不能把图片放到canvas里面,所以直接把base64前面的东西删除,然后加上mime
希望对有同样问题的同学有帮助,目前我使用
canvas.toDataURL("image/png");因为有些浏览器不支持image/jpeg格式,但是png格式文件大,所以只生成640*640
function fileSelected() { // hide different warnings // get selected file element var oFile = document.getElementById('image_file').files[0]; // filter for image files var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; // little test for filesize showerror sResultFileSize=oFile.size; if (sResultFileSize > iMaxFilesize) { return; } // get preview element var oImage = document.getElementById('preview'); // prepare HTML5 FileReader document.getElementById('showerror').innerHTML='正在读取文件。。。(要十多秒)请稍候'; var oReader = new FileReader(); oReader.onload = function(e){ oImage.src = e.target.result; oImage.src="data:application/octet-stream;"+e.target.result.substr(e.target.result.indexOf("base64,")); oImage.onload = function () { // binding onload event //nwidth=oImage.naturalWidth;//原始图片的宽和高 //nheight=oImage.naturalHeight; //sizemyimg(640,640);//自动缩放到640*640 //drawimg(oImage);//把图片传到canvas里面 // we are going to display some custom image information here sResultFileSize = bytesToSize(oFile.size); document.getElementById('showerror').innerHTML='读取完成,请点上传按扭,有多张图片请继续上传'; fileup=false; }; oImage.onerror=function(){ document.getElementById('showerror').innerHTML='没有缩略图,请拍照或点上传按扭,有多张图片请继续上传'; fileup=true; } }; oReader.readAsDataURL(oFile); } function drawimg(oimg){ canvas = document.getElementById("myCanvas"); canvas.width = newwidth; canvas.height = newheight; ctx = canvas.getContext('2d'); ctx.drawImage(oimg, 0, 0, nwidth, nheight,0, 0, newwidth, newheight); pic=canvas.toDataURL("image/png"); pic=pic.substr(22); }
相关文章推荐
- 关于图片资源在android2.1/2.2/2.3下无法显示的问题以及解决方法
- 关于Drawable资源被用在多个地方显示图片时,改变其中一个实例的状态会同时作用到其他实例的解决方法
- HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果
- Android开发中调用系统相册上传图片到服务器OPPO等部分手机上出现短暂的显示桌面问题的解决方法
- win7中资源管理器不能显示图片预览的解决方法
- Android读取本地json文件的方法(解决显示乱码问题)
- 安卓(android)建立项目时失败,出现Android Manifest.xml file missing几种解决方法?(总结中)
- 在Android开发中替换资源图片不起作用的解决方法
- 在Android Jar包使用图片资源的解决方法
- 在Android开发中替换资源图片不起作用的解决方法
- angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
- android通过webView加载第三方h5应用,部分手机加载部分图片失败和播放部分视频失败的解决方法
- android imageview 图片不能正常显示 或不能自适应的解决方法
- 在Android项目中替换资源图片不起作用的解决方法
- 读取input:file的路径并显示本地图片的方法
- win7中资源管理器不能显示图片预览的解决方法
- dedecms ERROR: Copy Uploadfile Error! 上传图片失败解决方法
- win7中资源管理器不能显示图片预览的解决方法
- 安卓(android)建立项目时失败。出现AndroidManifest.xml file missing几种解决方法?
- android pad上图片放在drawable文件夹下不正确的显示的讨巧的解决方法