1

KineticJS を使用して、html5、css、および javascript を使用するスタンドアロン アプリケーションである Web アプリケーションを作成しています。

現在のキャンバスを imageURI に変換する次のコードがあります。

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

    });
 }

save() は、ボタンの onclick プロパティを使用してトリガーされます。

解決すべき2つの問題があります:-

  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 メソッドを使用して 3 番目の部分を解決したところ、問題なく動作しました。

4

1 に答える 1

1

ファイルの名前を変更する2番目の部分を解決しましたが、クロムブラウザに制限されており、デフォルトのダウンロードフォルダー以外の場所に保存することはできません.

タグには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 に答える