我正在使用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来保存图像。