龙空技术网

canvas 转图片保存图片并下载,支持IE11等浏览器

雨竹165179353 96

前言:

今天朋友们对“ie支持canvas吗”可能比较着重,我们都想要知道一些“ie支持canvas吗”的相关知识。那么小编在网上汇集了一些对于“ie支持canvas吗””的相关资讯,希望朋友们能喜欢,咱们快快来学习一下吧!

在开发过程中,通过画布生成了一个二维码,但是需求提供下载功能。但是通过网上很多方法都支持的不是很好。经过尝试,大致通过以下代码。可以比较完美的在各种浏览器上进行文件下载保存。

需要注意的是,检查浏览器时,判断edge必须放在chrome之前,否则会出现edge被判断为chrome的问题。

function downLoadImg() { var browser = myBrowser(); //console.log('myBrowser = ',myBrowser) var canvas = $("#qrcode").find("canvas")[0]; // var context = canvas.getContext('2d'); // console.log('canvas = ',canvas) var image = new Image(); image.src = canvas.toDataURL("image/png"); if (browser==="IE" || browser==="Edge"){ var blob = canvas.msToBlob(); window.navigator.msSaveBlob(blob,'二维码.png') }else if (browser==="FF"){ var url = canvas.toDataURL('image/png') var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || '二维码' a.href = url a.dispatchEvent(event) }else{ var base64ToBlob = function(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for(let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }; let aLink = document.createElement('a'); let blob = base64ToBlob(image.src); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为 aLink.download = name || '二维码.png'; aLink.href = URL.createObjectURL(blob); aLink.click(); }}//判断浏览器类型function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 //console.log("userAgent = ",userAgent) var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Edge浏览器 if (userAgent.indexOf("Trident") > -1 || userAgent.indexOf("Edge") > -1) { return "Edge"; } //判断是否Firefox浏览器 if (userAgent.indexOf("Chrome") > -1){ return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否Safari浏览器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }; //判断是否IE浏览器}

标签: #ie支持canvas吗