javascript - KineticJS JavaScript 另存为文件系统选项

Question

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

我有以下代码将当前 Canvas 转换为 imageURI。

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

    });
 }

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

我有两个问题需要解决:-

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

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

我使用 setScale 方法解决了第三部分，它工作得很好。

Answer 1

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

存在 download <a> 中的属性标签。如果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(); 触发对 anchor 链接的虚假点击

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

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