Canvasで画像をリサイズする。画像をリサイズしてダウンロード。

canvasを使えば、画像をリサイズすることが出来る。

        e = ev.target
        var w = e.dataset.width;
        var h = e.dataset.height;
        cv = document.createElement("canvas")
        cv.width = w
        cv.height = h
        cv.setAttribute("style","display:none");
        document.body.appendChild(cv);
        context = cv.getContext("2d");
        context.drawImage( img, 0, 0, w, h );

画像をリサイズすること context.drawImage( img, 0, 0, w, h ); ここで、リサイズすることが出来る。

Canvasを使って、Base64に画像を変換することが出来る

     resize_img_base64_str = cv.toDataURL( "image/png" );

Base64 にCanvasを変更して、文字列化する。文字列化して変数に突っ込んで使いまわせる

ダウンロードURLを作ってリサイズ画像をダウンロードする

<a href="data:image/png:xxxxx" download="image.png" >ダウンロード</a>

a 要素にdownload 属性を作れば、クリックするだけで、Canvasから撮ったBase64をダウンロードすることが出来る。

以上をまとめると

・画像をロードして ・画像をCanvasに放り込んで ・画像をリサイズ ・画像をリンク文字列に ・画像をダウンロード

という手順を経ることで、Canvasをつかって画像をリサイズするHTMLだけで書けるアプリが作れました。楽しいですね。

ソースコード

  <script>
  var make_call_back = function(img){
      return function(ev){
        e = ev.target
        var w = e.dataset.width;
        var h = e.dataset.height;
        cv = document.createElement("canvas")
        cv.width = w
        cv.height = h
        cv.setAttribute("style","display:none");
        document.body.appendChild(cv);
        context = cv.getContext("2d");
        context.drawImage( img, 0, 0, w, h );
        resize_img_base64_str = cv.toDataURL( "image/png" );
        e.download = "download_" +w + "px_" + h+"px.png"
        e.href = resize_img_base64_str
        cv.remove()
      }
  }
  var m = new Promise(function(resolver){
    document.addEventListener("DOMContentLoaded",function(){
      [  [200,150] ,   [400, 300],     [800, 600]     ].forEach(function(v){
        var a = document.createElement("a")
        var props = {
          "href" : "#",
          "className" : "download",
          "innerText" : v[0]+"x"+v[1] + "でダウンロード"
        }
        Object.keys(props).forEach(function(k){ a[k]=props[k]  })

        a.dataset.width = v[0];
        a.dataset.height= v[1];
        window.download_links.appendChild(a)
        a.insertAdjacentHTML("afterend","<br>")
      });
      resolver(this)
    });
  })
  var i = new Promise(function(resolver,rejector){
      var img  = new Image();
      img.src  = "data:image/png:略"
      img.addEventListener("load", function(){ resolver(this) })
      img.addEventListener("error",function(){ rejector(this) })
  })
  //
  Promise.all([m,i]).then(function(values){
    img = values[1]
    var handler = make_call_back(img)
    var list = Array.apply(null,document.querySelectorAll("a.download"))
    list.forEach(function(e){
      e.addEventListener("click",handler)
    })
  })

  
</script>
<div id="download_links">
<div>

実際作ってみた。

ここで、画像をリサイズしてダウンロード。

画像はBASE64エンコードしたものを利用。same origin policy があるので、同一生成元じゃないとダウンロード出来ない。なので今回はページ内にBase６４を埋めてある。