深圳网站建设制作视频软件,企业营销型网站建设的可行性分析,必应网站收录在哪,设计网站页面教案vue 使用 html2canvas 截取图片保存 好久没有写博文了#xff0c;写够了#xff0c;没啥想写的了#xff0c;这个号算是废了#xff0c;哎#xff0c;气人啊#xff01;越来越胖#xff0c;越来越懒了。 html2canvas 简介
html2canvas是一个JavaScript库#xff0c;它…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 refelement要转换的HTML元素/div button clickconvertToCanvas转换为Canvas/button div refcanvasContainer/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/;
}这样就能截取下来了反正我是成功了。
好了就这样没啥营养的博文。祝大家工作生活一切顺利
对了最近玩 元梦之星 了吗 最近中了 元梦之星 的毒每天晚上玩到很晚我现在知道什么叫玩物丧志了…
