javascript - chrome 可以下载图片，但 firefox 不行

Question

我有一个将 SVG 下载为 PNG 的功能。它在 Chrome 中运行良好，但在 Firefox 中不会触发下载。需要改变什么？

function downloadGraph(contextDivId){

var svgselect  = $("#"+contextDivId).children("svg")[0],
xml  = new XMLSerializer().serializeToString(svgselect);

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(xml)));
var img = '<img src="'+imgsrc+'">'; 
$("#svgdataurl").html(img);

var bbox = svgselect.getBBox()
var canvas = document.querySelector(".downloadcanv");
$(canvas).attr("width",bbox.width);
$(canvas).attr("height",bbox.height);
var context = canvas.getContext("2d");

var image = new Image;
image.src = imgsrc;

context.drawImage(image, 0, 0);

  var canvasdata = canvas.toDataURL("image/png");

  var pngimg = '<img src="'+canvasdata+'">'; 
  $("#pngdataurl").html(pngimg);

  var a = document.createElement("a");
  a.download = "Graph.png";
  a.href = canvasdata;
  a.click();
}

Answer 1

这可能对你有帮助。这是一篇较旧的帖子，但它可能会起作用。它建议 FireFox 采用不同的格式:

https://gist.github.com/jweir/706988

// Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));