パスワードを忘れた? アカウント作成
10491290 journal
日記

bhindの日記: canvasからpngへのワンライナーjavascript 9

日記 by bhind

今話題の悪循環ジェネレーターがおもしろかった。

けど、キャンパスなんで画像にしたいなーと思ったらここを参考にjavascript1発だったのでメモ。(Windows Chromeで)
htmlにid="li"のimgタグを用意
以下をコンソールから実行
document.getElementById("i1").src = document.getElementById('poster').toDataURL();
pngで保存できるお!

# なんかまもとに役に立つことこの日記で初めて言った気がする

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
  • by Anonymous Coward on 2014年01月10日 20時28分 (#2525219)

    なんでcanvasがキャン(pa)スになるん?

  • by Anonymous Coward on 2014年01月10日 20時31分 (#2525221)

    右クリック→画像を名前を付けて保存するだけ。もちろんChromeと同じ方法でもできるけど。

    • Fxだといけますかー。
      この辺りの仕様はそれぞれ実装依存なのでしょうね。。。

      親コメント
      • こういうのは拡張機能の役目ですね。
        ブックマークレットでも作業を省略できますが。

        javascript:function f(e){var n=e.target,a=document.createElement('a');a.download=Date.now();removeEventListener('click',f,true);e.stopPropagation();e.preventDefault();console.log(e);if(n.tagName=='CANVAS'){a.href=n.toDataURL();a.click()}};addEventListener('click',f,true);null;

        このブックマークレットをクリックした後Canvasをクリックするとダウンロードされます。

        親コメント
        • bookmarkletまではつくる気がなかったですwww
          というか、最近、ハッキングゲームばっかしてたので、もうコンソールでええやん癖がついてしまいました。。。

          親コメント
          • まあどちらにせよファイルをダウンロードするならaタグのdownload属性が便利なのでオススメです。

            親コメント
            • あーこんなファイル名指定できるのがHTML5にあるんですねー。知らなかったです。
              これ使っとけば「Content-Disposition」みたいなメールなんだかなんなんだかわからないヘッダーとかはもう用なしですね。
              ただ、クライアントサイドでダウロードファイルのファイル名変更できるというのは、色々と興味深いですね。。。
              当たり前ですが、アンカーをホバーしたときのファイル名とダウンロード後のファイル名が違いますので、「どこいった。。。」「お前の後ろだ!」みたいなフェニックス的展開になりそうで。。。もちろん、ダウンロード履歴等にはダウンロード後のファイル名なので落ち着いてみていれば混乱はしないでしょう。

              親コメント
              • これとFileやBlobコンストラクタを使うと、あらゆるファイルをクライアントだけでダウンロードさせられるので、この先重要なテクニックになると思います。

                ただそうですね、一般サイトで使うときはその振る舞いでユーザーを驚かせないように、ちょっと気をつけなければならないかもしれませんね。

                親コメント
typodupeerror

人生unstable -- あるハッカー

読み込み中...