使用 js 把当前面下载成为图片

我们在前端有时会把当前的页面显示成图片，如订单，物流信息打印出来，这时，我们要不用是使用截图工具转发，要没就是手机拍照，如果使用 js 来把当前的 html下载成为图片，怎么做到呢
这里有一个工具 html2canvas 使用起来很简单

用法也很简单，html2canvas(这是里的参数是要使用 canvas 画的 html 上的文档节点)

看下面的这段代码

    daochu(){let node = this.$refs.aaa;html2canvas(node).then(function(canvas) {let img = new Image();img = canvas.toDataURL('image/png');var d = document.createElement("a");d.download = '';d.href = img;document.body.appendChild(a);d.click();d.remove();});},

这样就可以下载图片了
上面的代码是打开了，图片，当然同时也下载了这个图片
下面的代码，就是真正的下载一个文件了

downloadIamge(imgsrc, name) {//下载图片地址和图片名let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "photo"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;
},

下载原理

我们先看看 download 的使用方法：

<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>

看看上面的代码，只要为 <a> 标签添加 download 属性，我们点击这个链接的时候就会自动下载文件了~
顺便说下，download 的属性值是可选的，它用来指定下载文件的文件名。像上面的例子中，我们下载到本地的文件名就会是 filename.zip 拉，如果不指定的话，它就会是 somefile.zip 这个名字拉！

看到这里，你可能会说，坑爹啊，这明明是用 HTML 5 的新特性来实现下载文件嘛，说好的用 JavaScript 下载文件呢？

事实上，用 JavaScript 来下载文件也是利用这一特性来实现的，我们的 JavaScript 代码不外乎就是：

用 JavaScript 创建一个隐藏的 <a> 标签
设置它的 href 属性
设置它的 download 属性
用 JavaScript 来触发这个它的 click 事件
翻译成 JavaScript 代码就是：

var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'what-you-want.txt';
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);

window.URL

window.URL 里面有两个方法：

createObjectURL 用 blob 对象来创建一个 object URL(它是一个 DOMString)，我们可以用这个 object URL 来表示某个 blob 对象，这个 object URL 可以用在 href 和 src 之类的属性上。
revokeObjectURL 释放由 createObjectURL 创建的 object URL，当该 object URL 不需要的时候，我们要主动调用这个方法来获取最佳性能和内存使用。
知道了这两个方法之后，我们再回去看看上面的例子就很容易理解了吧！只是用 blob 对象来创建一条 URL，然后让标签引用该 URL，然后触发个点击事件，就可以下载文件了！

那么问题来了，blob 对象哪里来？

Blob

Blob 全称是 Binary large object，它表示一个类文件对象，可以用它来表示一个文件。根据 MDN 上面的说法，File API 也是基于 blob 来实现的。

 //例如 var img = new Image();  这个img 就是一个二进制对象//  filereader.readAsBinaryString