vue 使用 html2canvas 截取图片保存
好久没有写博文了，写够了，没啥想写的了，这个号算是废了，哎，气人啊！越来越胖，越来越懒了。
html2canvas 简介
html2canvas是一个JavaScript库，它可以将HTML元素转换为Canvas元素。具体来说，它可以将整个页面或特定的HTML元素转换为一幅图像，这对于创建屏幕截图、生成PDF文件或在上创建可编辑的图像非常有用。
html2canvas 安装
安装 html2canvas 很简单，只需要一个简单的命令即可。
npm install html2canvas --save
等待命令执行完成就可以了。
html2canvas 使用
使用的时候也非常的方便。首先在需要使用的地方进行引入。
import html2canvas from 'html2canvas'
在 Vue 组件中使用 html2canvas 将 HTML 元素转换为 canvas：
methods: {
convertToCanvas() {
const element = this.$refs.element // 获取要转换的HTML元素
html2canvas(element).then(canvas => {
// 在这里可以对canvas进行操作，例如将其添加到页面中或保存为图片等
// 例如：this.$refs.canvasContainer.appendChild(canvas)
})
}
}
在模板中添加要转换的HTML元素和调用方法的引用：
<template>
<div>
<div ref="element">要转换的HTML元素</div>
<button @click="convertToCanvas">转换为Canvas</button>
<div ref="canvasContainer"></div>
</div>
</template>
当用户点击按钮时，convertToCanvas方法将被调用，它将获取要转换的HTML元素并使用html2canvas将其转换为canvas。转换完成后，可以在then回调函数中对canvas进行操作，例如将其添加到页面中或保存为图片等。
案例：保存缩略图
之前在项目里面写过一个功能，就是把页面保存成缩略图展示。需要获取这个页面的截图，然后把截图数据发送给后端，后端保存起来，然后查询列表的时候后端返回保存的缩略图进行展示。就是引用上面的步骤：
// 获取截图
getPicture() {
html2canvas(this.$refs.panelPage).then(canvas => {
// 获取生成的图片的url,并设置为png格式
const imgUrl = canvas.toDataURL("images/png");
let base64Data = imgUrl.split(",")[1];
let binaryData = atob(base64Data);
let uint8Array = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
uint8Array[i] = binaryData.charCodeAt(i);
}
// 获取blob文件流
let blob = new Blob([uint8Array], {
type: "image/png" });
// 文件流转文件
let file = new File([blob], "filename.png", {
type: "image/png",
});
let fd = new FormData()
fd.append('file', file)
// 请求后端数据接口
coverUpload(fd)
})
},
上面获取了截图之后调用请求接口的方法就OK了。
这样就可以把页面的截图获取下来，然后保存缩略图到后端。但是在实际使用上发现一个大问题，就是我引用的网络图片获取截取不下来。于是找了一下原因：是因为跨域的问题导致觉得不安全，就没有截取。
解决这个问题也很简单，配置一下允许跨域，上面代码改一下：
// 获取截图
getPicture(id) {
html2canvas(this.$refs.panelPage, {
useCORS: true, // 开启跨域
}).then(canvas => {
// 获取生成的图片的url,并设置为png格式
const imgUrl = canvas.toDataURL("images/png");
let base64Data = imgUrl.split(",")[1];
let binaryData = atob(base64Data);
let uint8Array = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
uint8Array[i] = binaryData.charCodeAt(i);
}
// 获取blob文件流
let blob = new Blob([uint8Array], {
type: "image/png" });
// 文件流转文件
let file = new File([blob], "filename.png", {
type: "image/png",
});
let fd = new FormData()
fd.append('file', file)
// 请求后端数据接口
coverUpload(id, fd)
})
},
主要就是这一句代码：useCORS: true。
但是发现有些还不行，为啥呢，因为他需要服务端开启跨域 response.setHeader("Access-Control-Allow-Origin","*") ;。如果是自己的服务器的话，那改一下 nginx 的代理配置就可以了。
location /imgSource/ {
# 加上这三行就可以了
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
autoindex on;
alias C:/Users/11466/Desktop/serve/classe/image/;
}
这样就能截取下来了，反正我是成功了。
好了就这样，没啥营养的博文。祝大家工作生活一切顺利！
对了，最近玩 元梦之星 了吗？
最近中了 元梦之星 的毒，每天晚上玩到很晚，我现在知道什么叫玩物丧志了…
