博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FileReader在ios上面的坑(图片转base64)
阅读量:5752 次
发布时间:2019-06-18

本文共 2384 字,大约阅读时间需要 7 分钟。

最近在做项目,传图片这是很老的功能了,然后想压图片直接传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对象!

转载于:https://www.cnblogs.com/samsimi/p/6559591.html

你可能感兴趣的文章
磨刀不误砍柴 - 配置适合工作学习的桌面环境
查看>>
自己动手写docker-3
查看>>
Java笔记-反射机制(一)
查看>>
OpenCV在Android中的集成与简单使用
查看>>
redux v3.7.2源码解读与学习之 applyMiddleware
查看>>
【React】为什么我不再使用setState?
查看>>
Git原理与高级使用(3)
查看>>
从JDK源码看Writer
查看>>
Express 结合 Webpack 实现HMRwi
查看>>
listen源码分析第一篇 address:port分析
查看>>
SQL模糊查询通配符_和%处理
查看>>
ssl免费申请
查看>>
我的友情链接
查看>>
mysql优化的相关知识
查看>>
基于protobuf的RPC实现
查看>>
ehcache 常用参数
查看>>
坚信每个人都能成为品牌
查看>>
Java语言的基础知识3
查看>>
JAVA的对象复制
查看>>
jquery要怎么写才能速度最快?(转)
查看>>