1

我正在使用 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

    });
 }

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

我有两个问题要解决：-

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

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

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

4

1 回答 1

1

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

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

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

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

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

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

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

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

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

于 2013-04-03T08:34:05.613 回答