Question

我正在处理QR Code项目，并且通过Canvas生成一些图像。所以它们实际上不是图像。并且用户无法通过点击“另存为”上下文菜单项来下载/保存它。

如何让用户下载它？

Answer 1

假设您的“另存为”按钮看起来像这样（未初始化，见下文）：

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

然后，当您在画布上创建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

此处的关键是锚标记的新download属性。这将弹出一个保存为请求者，而不是导航到图像。

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

Answer 2

var image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image); // or whereever you want.

编辑： onload只有服务器加载的图片才需要事件处理程序。

Answer 3

//创建保存标记然后

var data = canvas.toDataURL（）; //如果你愿意，默认是png add param image / jpg document.getElementById（'save'）。href = data;

是否可以将HTML画布保存为仅使用Javascript的图像？

3 个答案: