javascript - 是否可以仅使用 Javascript 将 HTML Canvas 另存为图像?

标签 javascript html html5-canvas

我正在开发一个二维码项目,一些图像是通过 Canvas 生成的。所以它们实际上并不是图像。用户无法通过点击“另存为”上下文菜单项来下载/保存它。

如何让用户能够下载它?

最佳答案

假设您的“另存为”按钮如下所示(未初始化,见下文):

<a href="#" id="saveas" download="">Save as</a>

然后,当您在 Canvas 上创建 QR 码后,请执行以下操作来初始化它:

/// QR created here..

var link = document.getElementById('saveas');

link.download = 'filename.png';  /// set a filename or a default
link.href = canvas.toDataURL();  /// create a data-uri as link

这里的关键是 anchor 标记的新 download 属性。这将弹出另存为请求者,而不是导航到图像。

您还可以选择隐藏链接并在初始化时显示它。你明白了..

关于javascript - 是否可以仅使用 Javascript 将 HTML Canvas 另存为图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20986925/

相关文章:

javascript - NodeJs, promise 不等待

javascript - 仅获取单击的 div 元素的子元素

html - 如何使用CSS在可变宽度的图像两侧显示上一个和下一个按钮?

javascript - 使用 JS 更改没有 id 或 class 的内联 CSS

javascript - 子元素填充空间以匹配另一个 div 的宽度

javascript - 如何使用带有扩展名的canvas2image将DIV保存为图像

javascript - 在 Canvas 中用圆圈连接线

javascript - 如何将图像放在我使用路径绘制的梯形 html Canvas 上

javascript - React es7 static childContextTypes 意外标记

javascript - 奇怪的 jQuery $.each() 行为