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

ゞ浴缸里的玫瑰 2022-10-16 00:54 247阅读 0赞

昨天用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.οnerrοr=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);

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebAPI接口FileReader实现预览图片

【传送门】[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader][https_developer.mozil

比眉伴天荒/ 2023年07月11日 12:48/ 0 赞/ 21 阅读

相关 QT 添加图片资源显示图片

本文基于QT Creator4.4.1 一.在QT中如何显示图片比如在一个QLabel上显示一个图片 MainWindow::MainWindow(QWid

红太狼/ 2023年01月04日 14:53/ 0 赞/ 241 阅读

相关 Maven中资源文件读取失败，找不到路径的解决方法

在pom.xml文件中配置resources，防止资源导出失败 <build> <resources> <resource>

左手的ㄟ右手/ 2022年12月16日 04:57/ 0 赞/ 186 阅读

相关 android找不到图片资源,android FileReader 读取图片资源显示预览失败解决方法

昨天用html5写一个手机上传图片问题，因为用户不可能自己剪辑图片，所以要在客户端生成缩图，不然用户没传两张把人家流量耗光了。代码如下， oImage.src="data

ゞ浴缸里的玫瑰/ 2022年10月16日 00:54/ 0 赞/ 248 阅读

相关 Android资源图片存放问题

在开发应用时,图片资源会放置到工程的资源文件夹中,drawable-hdpi、drawable-mdpi、drawable-ldpi drawable-hdpi、drawab

快来打我*/ 2022年08月24日 05:13/ 0 赞/ 191 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 531 阅读

相关 vue 发布后找不到图片等静态资源

在config/index.js中，将assetsPublicPath后面的“/”加个点就好了。原因： build.assetsPublicPath是资源的根目录这个

偏执的太偏执、/ 2022年05月30日 22:15/ 0 赞/ 379 阅读

相关图片预览新特性 h5 FileReader

图片预览新特性 h5 FileReader <!DOCTYPE html> <html lang="en"> <head> <meta

红太狼/ 2022年05月12日 01:58/ 0 赞/ 352 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 749 阅读

相关 FileReader预读取文件/图片

FileReader 1、是h5中新增的类，用来对input中type='file'类型进行处理的类 2、能够对上传的文件进行预先读写，实现预览效果

悠悠/ 2021年07月24日 13:41/ 0 赞/ 540 阅读