Question

我正在使用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方法解决了第三部分，并且它工作得很好。

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();

触发对锚链接的虚假点击

所以基本上在调用save()时，所有上述内容都发生在回调函数中。

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

KineticJS JavaScript另存为FileSystem选项

1 个答案: