javascript - Canvas.toDataURL not working on mobile Safari iOS?

 mobiledu2502883483 发布于 2022-11-12 17:00

通过canvas做图片压缩上传,用canvas.toDataURL将原图转换成base64传到服务器,在PC端浏览器可以正常运行,在android端浏览器也可以正常运行,就是在iPhone的safari上获取压缩过后的base64数据时,返回的是个“data;”,也就是toDataURL没有生效。

var compress = function(source_img_obj, quality, output_format){
    var mime_type = "image/jpeg";

    if(output_format!=undefined && output_format=="png"){
        mime_type = "image/png";
    }
    alert(source_img_obj);
    var cvs = document.createElement('canvas');
        //naturalWidth真实图片的宽度
        cvs.width = source_img_obj.naturalWidth;
        cvs.height = source_img_obj.naturalHeight;
    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
        result_image_obj.src = newImageData;
    return result_image_obj;
}

传入的source_img_obj也是base64数据,是正常的,但在IOS系统的Safari中执行cvs.toDataURL(mime_type, quality/100)后返回的newImageData"data;",在Stack Overflow上看到有解答说是iPhone上Safari不支持toDataURL,如果要换其他插件之类的,项目改动比较大,是否真的没有解决方案?

4 个回答
  • 请问你解决了吗?我也遇到这个问题了

    2022-11-12 17:01 回答
  • "image/png" 貌似不支持第二个参数,所以你不要toDataURL的第二个参数,再试试,这个跟IOS没有关系,我的在IOS是没有问题的。

    2022-11-12 17:01 回答
  • https://developer.mozilla.org...
    这里说是支持safari mobile 3.0以上版本的,检查下toDataURL的参数,当type是image/jpeg时,第二个参数的值在0-1之间,当type是其他类型时,第二个参数值默认是0.92,自己写的会被忽略掉。

    2022-11-12 17:01 回答
  • 几种可能性:

    1. 图片文件 size 太大,是否图片超过了 3M ?

    2. 图片的 dimension 太大,是否图片尺寸超过了 1000 x 1000 像素?

    3. 你指定的 mime_type 不支持,你用的是哪个 mime type?

    2022-11-12 17:01 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有