zhuzhu2015_
2017-05-06 07:46
采纳率: 72.7%
浏览 4.4k
已采纳

前端的有关IE兼容性的问题(图片的下载)

通过canvas画图,
然后生成图片,方式如下:
var myc = document.getElementById("myCanvas");
var ctx=myc.getContext("2d");
var image = new Image();
ctx.clearRect(0,0,800,800);//清空一波画布
ctx.drawImage(一些参数);//画一张图片
image.src = myc.toDataURL("image/png");//生成这张图片,并将格式设定为png
(生成这里貌似就出了问题,在火狐,谷歌之类的浏览器,进行了这一步之后是可以再图片上右击,然后进行图片的存储的,可是IE不行,IE的图片另存为那一栏是灰色的)
最后进行下载到本地,
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};

        // 加工image data,替换mime type
        imgData = imgData.replace(_fixType(type),'image/octet-stream');

        /**
         * 在本地进行文件保存
         * @param  {String} data     要保存到本地的图片数据
         * @param  {String} filename 文件名
         */
        var saveFile = function(data, filename){
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };

        // 下载后的问题名
        var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
        // download
        saveFile(imgData,filename);

然而这段代码就是在IE里面运行不了,火狐,谷歌之类都试过都可以正常运行,正常生成图片,并进行下载。
然后我在网上找了这么一段代码:
var imgURL = img.src;
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
我发现当图片的路径地址URL确定的时候,就是说页面中的图片确实存在,且有真实路径的情况下是可以进行下载的(在IE下),但是在我用canvas画图画出来的图片再来进行存储的时候for(; oPop.document.readyState != "complete"; )这一行代码报错,报的错意思就是oPop不可为null之类的空值,原错是:无法获取未定义或 null 引用的属性“document”。
求各位大神帮忙看看吧,实在是没招儿了。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 已采纳

    ie不支持a对象的download属性的,也不再支持data协议打开图片,你的canvas toDataURL得到的就是data协议的数据,直接打开不了,会报错,你去掉open的第三发个参数看就知道了

    你要兼容ie只能讲数据post回服务器,服务器通过设置content-dispositon为attachment后,将post回的base64解码为图片2进制后输出进行保存操作

    打赏 评论
  • 123KangKang 2017-08-23 10:35

    在网上看到一个这样的函数
    http://blog.csdn.net/tiglle/article/details/72953632
    function saveFile(data,filename){
    var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href=data;
    save_link.download=filename;
    var event=document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    save_link.dispatchEvent(event);
    };

    打赏 评论
  • mukti 2017-08-31 05:12

    使用 msSaveBlob()

    打赏 评论
  • mukti 2017-08-31 06:40

    使用 msSaveBlob() https://feizhaojun.com/?p=1481

    打赏 评论
  • mukti 2017-08-31 06:48

    createElementNS 这个方法不支持IE 你尝试了也没有用

    打赏 评论

相关推荐 更多相似问题