耀极客论坛

 找回密码
 立即注册
查看: 2984|回复: 0

使用fileReader的一个坑及解决

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 02:28:04 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了使用fileReader的一个坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于fileReader的一个坑
  在用fileReader做图片浏览时,
  使用base64格式
  1. var file=this.$refs.resource.files[0]
  2. var reader = new FileReader();
  3. // 以DataURL的形式读取文件:
  4. reader.readAsDataURL(file);
复制代码
  1. //读取后的回调js是多线程
  2. reader.onloadend=(e)=>{
  3. }
复制代码
  Javascript 本身是单线程的,并没有异步的特性。由于 Javascript 的运用场景是浏览器,浏览器本身是典型的 GUI 工作线程,GUI 工作线程在绝大多数系统中都实现为事件处理,避免阻塞交互,因此产生了Javascript 异步基因。此后种种都源于此。
  没错,网络,文件。。。。都是基于浏览器的接口实现的
  如果两次读取的都 是相同的文件,并不会执行加载完成事件。

fileReader在ios上面的坑(图片转base64)
  最近在做项目,传图片这是很老的功能了,然后想压图片直接传base64...一开始用的代码
  1. var fileUpload = function(obj, callback){
  2.             //检测浏览器是否支持FileReader对象
  3.             if(typeof FileReader == "undefined"){
  4.                 alert("您的浏览器不支持FileReader对象!");
  5.             }
  6.             var file = obj;
  7.             //判断类型是不是图片
  8.             if(!/image\/\w+/.test(file.type)){
  9.                 alert("请确保文件为图像类型");
  10.                 return false;
  11.             }
  12.             var reader = new FileReader();
  13.             reader.onload = function (e) {
  14.                 var img = new Image,
  15.                     width = 95,    //图片resize宽度
  16.                     quality = 0.2,  //图像质量
  17.                     canvas = document.createElement('canvas'),
  18.                     drawer = canvas.getContext("2d");
  19.                 img.src = this.result;
  20.                 var scale = parseInt(img.height / img.width);
  21.                 img.width=width;
  22.                 img.height = width * scale;
  23.                 canvas.width = img.width;
  24.                 canvas.height = img.height;
  25.                 drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
  26.                 var base64 = canvas.toDataURL('image/jpeg', 0.2);
  27.                 console.log(base64);
  28.                 var image_base64 = img.src.replace("data:image/png;base64,","");
  29.                 image_base64=encodeURIComponent(image_base64);
  30.                 alert("19")
  31.                 // 调用回调
  32.                 callback&&callback(img.src);
  33.             }
  34.             reader.readAsDataURL(file);
  35.         }
复制代码
  上面这段代码在PC和安卓上运行一切正常,但在ios上会返回固定的一串base64编码,不管你传什么图片都一样..
  然后就改……
  再改.....
  查看各种文档..
  继续改...
  最后是这样子决解的
  1. function getBase64(fileObj){
  2.             var file = fileObj,
  3.                 cvs = document.getElementById("canvas"),
  4.                 ctx = cvs.getContext("2d");
  5.             if(file){
  6.                 var url = window.URL.createObjectURL(file);//PS:不兼容IE
  7.                 var img = new Image();
  8.                 img.src = url;
  9.                 img.onload = function(){
  10.                     ctx.clearRect(0,0,cvs.width,cvs.height);
  11.                     cvs.width = img.width;
  12.                     cvs.height = img.height;
  13.                     ctx.drawImage(img,0,0,img.width,img.height);
  14.                     var base64 = cvs.toDataURL("image/png");
  15.                     callback(base64);
  16.                     alert("20")
  17.                 }
  18.             }
  19.         }
复制代码
  这个才是分享的重点……。
  原因就是ios上不支持FileReader对象!
  以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 10:51 , Processed in 0.071779 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表