Canvas - 使用 php 或 js 保存到图像

Question

我有一个画布元素，想给它命名并将它保存为我的文件系统中的 jpg。

var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL();
console.log(dataURL)

我可以使用 PHP 或 JS。

这可能吗？看起来应该很容易。

Answer 1

你可以试试这个

获取url为base64以hreaf为数据url创建动态链接并点击强制下载然后删除链接

var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);

 var e = document.createElement('a');
        var href = dataURL
        e.setAttribute('href', href);
        e.setAttribute('download', "FILE NAME.png");
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);

<canvas id="myCanvas"></canvas>

Answer 2

如果您要绑定点击事件的元素已经存在，则此解决方案将起作用：

var url = canvas.toDataURL();
var link = document.getElementById('-insert a element id here');
link.download = "DownloadName";
link.href = url;

这将创建数据 url，然后将其分配给您拥有的任何链接的 href（如果它已经存在），您只需将 '-insert a element id here' 替换为您希望分配给它的链接的 id。

如果它不存在，你可以这样做：

var url = canvas.toDataURL();
var link = document.createElement('a');
link.download = "DownloadName";
link.href = url;
link.innerHTML = "Download";
document.getElementById('-insert parent element here-').appendChild(link);

这将创建数据 url，然后创建一个 a 元素，设置其 download、href 和 innerHTML 属性并将其插入 DOM。只需将 '-insert parent element here-' 替换为您希望链接包含在其中的任何元素即可。