你如何在Edge下载图片/ PNG数据URI？ [英] How do you download a image/png data URI in Edge?

问题描述

我试图使用基于 https://github.com/exupero/saveSvgAsPng 和 http：// techslides.com/save-svg-as-an-image 。 SVG转换为数据URI并在画布中呈现为图像，并转换为PNG数据URI。该URI使用锚标签作为文件下载。我已经能够确认这一点，可以在当前版本的FF，Chrome和Safari中使用;但是，触发锚标签上的下载会导致Edge挂起（仅在控制台中出现文档类型警告）或完全崩溃。有没有办法让Edge在Edge中工作，或者是数据URI尚未完全支持的锚定下载？

通过以上来源创建的代码：

  //这将获取svg并内联所有样式。它有一个属性源，以及SVG.var的宽度和高度svgDownload = getElementChildrenAndStyles（svgID）; var image = new Image（）; image.onload = function（）{var canvas = document.createElement（'canvas ）; canvas.width = svgDownload.width; canvas.height = svgDownload.height; var ctx = canvas.getContext（'2d'）; ctx.fillStyle =#FFFFFF; ctx.fillRect（0，0，canvas.width，canvas.height）; ctx.drawImage（image，0，0）; var a = document.createElement（a）; a.download =chart.png;尝试{console.log（转换画布）; a.href = canvas.toDataURL（image / png）; console.log（canvas converted。triggering download）; document.body.appendChild（一）; a.addEventListener（click，function（e）{a.parentNode.removeChild（a）;}）; a.click（）; } catch（e）{//错误处理}}; try {console.log（make image source url）; //这两种创建图像源的方法都适用于除Edge外的大多数浏览器//image.src =data：image / svg + xml; base64+ btoa（svgDownload.source.join（））; image.src = window.URL.createObjectURL（new Blob（svgDownload.source，{type：'image / svg + xml; base64'}））; console.log（image source set）;} catch（e）{//错误处理}  

$ b

解决方案

意识到这是一个老问题，但对于其他人来说，Edge和IE不支持dataURL作为锚标记的href。它会接受它作为img标签的来源。我能够想到的最佳解决方案是使用 download.js 下载文件。但是，接下来的问题是当您将图像标记的src设置为SVG以执行PNG的渲染时，对于该Image对象，加载事件不会在Edge中激发。还没有解决这个问题。

I am trying to export an SVG created in the browser (a d3.js chart) as a PNG using methods based from https://github.com/exupero/saveSvgAsPng and http://techslides.com/save-svg-as-an-image. The SVG is converted to a data URI and rendered as an image in a canvas, which is converted to a PNG data URI. This URI is downloaded as a file using an anchor tag. I have been able to confirm this to work in current versions of FF, Chrome, and Safari; however, triggering the download on the anchor tag causes Edge to either hang (with only a doctype warning in the console) or crash completely. Is there anyway to get this to work in Edge or is the anchor download with data URI not fully supported yet?

Code created from the sources above:

//this gets the svg and inlines all styles.  It has a property "source" as well as width and height of the SVG.
var svgDownload = getElementChildrenAndStyles(svgID);

var image = new Image();

image.onload = function () {
  var canvas = document.createElement('canvas');
  canvas.width = svgDownload.width;
  canvas.height = svgDownload.height;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0);

  var a = document.createElement("a");
  a.download = "chart.png";
  try {
    console.log("converting canvas");
    a.href = canvas.toDataURL("image/png");
    console.log("canvas converted. triggering download");
    document.body.appendChild(a);
    a.addEventListener("click", function(e) {
      a.parentNode.removeChild(a);
    });
    a.click();
  }
  catch (e){
    //error handling
  }

};
try {
  console.log("making image source url");
  //both methods of creating the image source here work in most browsers except Edge
  //image.src = "data:image/svg+xml;base64," + btoa( svgDownload.source.join() );
  image.src = window.URL.createObjectURL(new Blob(svgDownload.source, {"type": 'image/svg+xml;base64'}));
  console.log("image source set");
}
catch (e){
  //error handling
}

解决方案

Realise this is an old question but for others that end up here: Edge and IE don't support dataURL as the href of an anchor tag. It will accept it as the source of an img tag though. The best solution I've been able to come up with is to use download.js to download the file. However, the next problem you will hit is when you set the src of an image tag to SVG to do the rendering of the PNG, the "load" event won't fire in Edge for that Image object. Haven't got a way around that just yet.

这篇关于你如何在Edge下载图片/ PNG数据URI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！