时间戳

首页 > 解决方案 > 保存画布元素

javascript - 保存画布元素

问题描述

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

var download = function(){

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

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

我怎样才能做到这一点？

标签： javascriptdownloadhtml5-canvas

解决方案

考虑使用元素上的toBlob()方法canvas首先获取画布内容的文件/blob。然后，使用如图所示的URL APIcreateObjectURL()的和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')

希望这可以帮助！

推荐阅读