Question

我发现可以使用以下脚本将<canvas>元素的内容下载到文件中：

var download = function(){

    var link = document.createElement("a");
    link.download = 'filename.png';
    link.href = cvs2.toDataURL();
    link.click();
}

但是，在Chrome（android）上使用此方法时，似乎已将该文件下载到了我设备上的私人chrome文件夹中。我需要的是将画布内容作为图像文件下载到常规下载文件夹（即/sdcard/Downloads）中。

我该如何实现？

Answer 1

请考虑在canvas元素上使用the toBlob() method，首先获取画布内容的文件/ blob。然后，使用如图所示的URL API的createObjectURL()和revokeObjectURL()方法，将相应的url分配给您的临时下载链接：

var download = function(filename, mimeType) {

  /* Use toBlob to get a file from the canvas element */
  canvas.toBlob(function(blob) {

    /* Get url for this file blob */
    var url = URL.createObjectURL(blob);

    /* Create temporary link and start download */
    var link = document.createElement("a");    
    link.download = filename;
    link.href = url;
    link.click();

    /* Clean up */
    URL.revokeObjectURL(url);

  }, mimeType);
}

/* Usage example */
download('my-filename.png', 'image/png')

希望这会有所帮助！

Answer 2

对于Chrome，您可以使用donwloads.download()

保存画布元素

2 个答案: