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

前端的有关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条回答 默认 最新

  • Go 旅城通票 2017-05-06 08:10
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大