android FileReader 读取图片资源显示预览失败解决方法

最新推荐文章于 2024-11-08 07:00:45 发布

uuq

最新推荐文章于 2024-11-08 07:00:45 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： app程序文章标签： html5 canvas

本文链接：https://blog.youkuaiyun.com/uuq/article/details/21098295

app程序专栏收录该内容

6 篇文章

订阅专栏

在使用html5处理手机图片上传时，遇到客户端生成缩图的问题，以避免消耗用户流量。通过FileReader读取图片资源并在canvas中显示预览时遇到失败，本文提供了解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天用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);

}