使用Javascript下载图像[重复]答案

【问题标题】：Download Image by using Javascript [duplicate]使用Javascript下载图像[重复]
【发布时间】：2016-04-10 11:25:52
【问题描述】：

我有一个程序可以在图像上写入文本并下载它。我在图像上写了文字。现在我想点击下载按钮下载它。

要点是：有一个绘制按钮可以在图像上绘制文本。而不是我需要下载按钮，它将结合绘制文本并下载为 png 文件。我没用过php。只有它的画布。

这是程序链接：

[http://codepen.io/vengreat/pen/dGvJyK][1]

【问题讨论】：

问题是你没有在图像上写文本，你只是在你的 dom 中添加了文本并将它放在你的图像上。您应该查看如何将 html 转换为 canvas 对象，然后将 canvas 转换为图像并下载。这是第一部分的一个很好的js库html2canvas.hertzen.com

标签： javascript html css

【解决方案1】：

在此链接中尝试此功能，确保它会起作用

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}


document.getElementById('draw').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

https://jsfiddle.net/hellosrini/dw9bmt0u/

【讨论】：