使用fileReader的一个坑及解决

 更新时间:2021年12月09日 10:12:04   作者:5649498  
这篇文章主要介绍了使用fileReader的一个坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于fileReader的一个坑

在用fileReader做图片浏览时,

使用base64格式

var file=this.$refs.resource.files[0]
var reader = new FileReader();
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
//读取后的回调js是多线程
reader.onloadend=(e)=>{
}

Javascript 本身是单线程的,并没有异步的特性。由于 Javascript 的运用场景是浏览器,浏览器本身是典型的 GUI 工作线程,GUI 工作线程在绝大多数系统中都实现为事件处理,避免阻塞交互,因此产生了Javascript 异步基因。此后种种都源于此。

没错,网络,文件。。。。都是基于浏览器的接口实现的

如果两次读取的都 是相同的文件,并不会执行加载完成事件。

fileReader在ios上面的坑(图片转base64)

最近在做项目,传图片这是很老的功能了,然后想压图片直接传base64...一开始用的代码

var fileUpload = function(obj, callback){
            //检测浏览器是否支持FileReader对象
            if(typeof FileReader == "undefined"){
                alert("您的浏览器不支持FileReader对象!");
            }
            var file = obj;
            //判断类型是不是图片
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image,
                    width = 95,    //图片resize宽度
                    quality = 0.2,  //图像质量
                    canvas = document.createElement('canvas'),
                    drawer = canvas.getContext("2d");
                img.src = this.result;
                var scale = parseInt(img.height / img.width);
                img.width=width;
                img.height = width * scale;
                canvas.width = img.width;
                canvas.height = img.height;
                drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL('image/jpeg', 0.2);
                console.log(base64);
                var image_base64 = img.src.replace("data:image/png;base64,","");
                image_base64=encodeURIComponent(image_base64);
                alert("19")
                // 调用回调
                callback&&callback(img.src);
            }
            reader.readAsDataURL(file);
        }

上面这段代码在PC和安卓上运行一切正常,但在ios上会返回固定的一串base64编码,不管你传什么图片都一样..

然后就改……

再改.....

查看各种文档..

继续改...

最后是这样子决解的

function getBase64(fileObj){
            var file = fileObj,
                cvs = document.getElementById("canvas"),
                ctx = cvs.getContext("2d");
            if(file){
                var url = window.URL.createObjectURL(file);//PS:不兼容IE
                var img = new Image();
                img.src = url;
                img.onload = function(){
                    ctx.clearRect(0,0,cvs.width,cvs.height);
                    cvs.width = img.width;
                    cvs.height = img.height;
                    ctx.drawImage(img,0,0,img.width,img.height);
                    var base64 = cvs.toDataURL("image/png");
                    callback(base64);
                    alert("20")
                }
            }
        }

这个才是分享的重点……。

原因就是ios上不支持FileReader对象!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS算法教程之字符串去重与字符串反转

    JS算法教程之字符串去重与字符串反转

    这篇文章主要给大家介绍了关于JS算法教程之字符串去重与字符串反转的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序发送短信验证码完整实例

    微信小程序发送短信验证码完整实例

    这篇文章主要介绍了微信小程序发送短信验证码完整实例,实现发送短信验证码,带60秒倒计时功能,无需服务器端,非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • js+css实现有立体感的按钮式文字竖排菜单效果

    js+css实现有立体感的按钮式文字竖排菜单效果

    这篇文章主要介绍了js+css实现有立体感的按钮式文字竖排菜单效果,通过javascript动态调用页面元素样式实现竖排菜单的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript原型模式用法实例详解

    javascript原型模式用法实例详解

    这篇文章主要介绍了javascript原型模式用法,以实例形式较为详细的分析了javascript原型模式的原理与使用技巧,需要的朋友可以参考下
    2015-06-06
  • 九个超级好用的Javascript技巧

    九个超级好用的Javascript技巧

    在实际的开发工作过程中,积累了一些常见又超级好用的 Javascript 技巧和代码片段,包括整理的其他大神的 JS 使用技巧,今天筛选了 9 个,以供大家参考
    2023-04-04
  • 微信小程序左右滑动删除事件详解

    微信小程序左右滑动删除事件详解

    这篇文章主要为大家详细介绍了微信小程序左右滑动删除事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • bootstrap响应式工具使用详解

    bootstrap响应式工具使用详解

    这篇文章主要介绍了bootstrap响应式工具使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • javascript获取checkbox复选框获取选中的选项

    javascript获取checkbox复选框获取选中的选项

    这篇文章主要介绍了javascript获取checkbox复选框获取选中的选项的方法,需要的朋友可以参考下
    2014-08-08
  • 微信小程序实现触底加载与下拉刷新的示例代码

    微信小程序实现触底加载与下拉刷新的示例代码

    本文主要介绍了微信小程序实现触底加载与下拉刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 解决 window.onload 被覆盖的问题方法

    解决 window.onload 被覆盖的问题方法

    这篇文章主要介绍了解决 window.onload 被覆盖的问题方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论