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

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

uuq

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

阅读量9.1k

点赞数

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

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

版权

在使用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 t