KineticJS JavaScript 另存为文件系统选项答案

【问题标题】：KineticJS JavaScript Save As FileSystem OptionKineticJS JavaScript 另存为文件系统选项
【发布时间】：2013-03-23 17:12:27
【问题描述】：

我正在使用 KineticJS 创建一个 Web 应用程序，它是一个使用 html5、css 和 javascript 的独立应用程序。

我有以下代码可以将当前画布转换为 imageURI。

function save()
{
    stage.toDataURL({
        callback: function(imageURL) {
            window.open(imageURL);
        },
        mimeType: 'image/png',
        quality: 1,
        height: 480,
        width: 640

    });
 }

使用按钮的 onclick 属性触发 save()。

我有两个问题要解决：-

我希望能够在单击此保存按钮时打开“另存为”对话框。
重命名文件，而不是“download.png”以将日期时间显示为文件名。例如，“020420130306PM.png”（日期 02/04/2013 时间 0306）
我的舞台大小是 958 X 598，我想将文件保存为 640 X 480。toDataURL 函数中的高度和宽度属性仅裁剪画布的顶部 640 X 480 像素。如何将整个舞台 (958 X 598) 压缩成 (640 X 480) 并保存。

我目前的解决方案是 KineticJS 教程中所述的解决方案，即单击保存按钮，打开带有画布图像的新页面，右键单击图像，另存为图像，将文件从 download.png 重命名为 020420130306PM.png 并单击保存。

我使用 setScale 方法解决了第三部分，效果非常好。

【问题讨论】：

标签： javascript html canvas filesystems kineticjs

【解决方案1】：

我解决了重命名文件的第二部分，但是，我仅限于 chrome 浏览器，并且无法将其保存在默认下载文件夹以外的任何其他位置。

<a> 标签中存在download 属性。如果download = "myfilename.png"则文件将下载为myfilename.png

首先，要强制浏览器下载文件，你应该修改imageURI。

var newImageURL = imageURL.replace("data:image/png;base64","data:image/octet-stream;base64");

现在，要添加和修改属性，只需使用 jQuery attr() 函数和 click()。例如，

$('#saveAnchor').attr('download',filename);
$('#saveAnchor').attr('href',newImageURL);

现在使用$('#saveAnchor')[0].click();触发对锚链接的虚假点击

所以基本上当save()被调用时，以上所有的事情都发生在回调函数中。

但我仍然想知道是否有任何可能的方法可以在不使用 PHP 或 AJAX 的情况下使用“另存为”对话框保存图像。

【讨论】：