JS笔记-使用drawImage以及toBlob两个API下载图片！

前情提要

当网页上有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配合在一起就可以轻鬆把东西下载下来啰！(｡•ㅅ•｡)♡