前情提要

當網頁上有img的時候要怎麼下載呢？其實大家應該都有感覺，會使用到a元素的download屬性。

這邊我們要使用兩個好用的API，來完成今天的任務喔。
執行的動作是「先把img轉成canvas、再來下載canvas」

觀念筆記

第一支API是drawImage：

drawImage的使用

  var canvas = document.getElementById("myImg");  //這邊假設要抓的img，它id是myImg
  var ctx = canvas.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);

第二支API是toBlob：

toBlob的使用

var canvas = $('canvas:last');
canvas[0].toBlob(function(blob) {
  var $link = $('<a>').attr('href', URL.createObjectURL(blob)).attr('download', 'myCanvas.png').appendTo('body');
  $link[0].click();
  $link.remove();
}, 'image/png');

心得

使用這兩個API配合在一起就可以輕鬆把東西下載下來囉！(｡•ㅅ•｡)♡