我正在使用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 X480。toDataURL函数中的height和width属性仅裁剪出画布的顶部640 X 480像素。如何将整个舞台(958 X 598)压缩为(640 X 480)并保存。


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

我使用setScale方法解决了第三部分,并且效果很好。

最佳答案

我解决了重命名文件的第二部分,但是,我只能使用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来保存图像。

09-10 12:19
查看更多