カメラロールの写真を文字データで埋め込むTextwellアクション dataURL

小さなサイズでお使いください。

Textwell 1.3.7
分類: 仕事効率化,ユーティリティ
価格: \360 (Sociomedia)

以前Draftpadで作ったアシストをTextwellに移植してみました。サーバーにアップロードしなくても画像を貼る方法はある。それがdataURLです。HTMLはバイナリーデータをテキストで表現できます。工夫次第でいろんな可能性が開かれる。

<meta name=viewport content=initial-scale=2>
<title>dataURL</title>
<input id=photo type=file>
<script>
// 画像サイズの上限
  Limit=55000;

// プログラム本体
  photo.onchange=function(){
    data=new FileReader();
    data.readAsDataURL(photo.files[0]);
    data.onload=function(){
      s=data.result;
      if(s.length<Limit){
        text="<img src='"+s+"' width='auto'>\n";
      }else{
        text="size: "+s.length;
      }
      T("insert",{text:text});
    }
  }
</script>

Import Textwell ActiondataURL

アクションを起動すると「ファイルを選択」のボタンが出るので、これをポチッと押す。「フォトライブラリ」でカメラロールが開きます。ここで対象の画像を選択。

Textwellにimgタグが貼りつく。320x320サイズの画像で45,269文字。

そのままでは扱いづらいのでReBlockを使ってください。画像が表示され、削除したり移動したりができます。これならブログの合間にカメラロールの写真が貼れる。

Textwellの２つのアクション、ReLineとReBlockを合体しました

55KBを超える画像については変換しない設定にしました。ソース中のLimit変数を変更すればこの制限を外すことができます。とはいえ、ブログに貼り付けた後の編集が面倒です。画像サイズと同じサイズの文字列が並ぶ。延々と呪文が続く画面で、編集箇所を探すのが困難になる。簡単なアイコンで画面を飾るくらいの用途かな。