# vue 使用 html2canvas 截取图片保存

vue 使用 html2canvas 截取图片保存

好久没有写博文了,写够了,没啥想写的了,这个号算是废了,哎,气人啊!越来越胖,越来越懒了。

html2canvas 简介

html2canvas是一个JavaScript库,它可以将HTML元素转换为Canvas元素。具体来说,它可以将整个页面或特定的HTML元素转换为一幅图像,这对于创建屏幕截图、生成PDF文件或在上创建可编辑的图像非常有用。

html2canvas 安装

安装 html2canvas 很简单,只需要一个简单的命令即可。

bash 复制代码
npm install html2canvas --save

等待命令执行完成就可以了。

html2canvas 使用

使用的时候也非常的方便。首先在需要使用的地方进行引入。

javascript 复制代码
import html2canvas from 'html2canvas'

在 Vue 组件中使用 html2canvas 将 HTML 元素转换为 canvas:

javascript 复制代码
methods: {  
  convertToCanvas() {  
    const element = this.$refs.element // 获取要转换的HTML元素  
    html2canvas(element).then(canvas => {  
      // 在这里可以对canvas进行操作,例如将其添加到页面中或保存为图片等  
      // 例如:this.$refs.canvasContainer.appendChild(canvas)  
    })  
  }  
}

在模板中添加要转换的HTML元素和调用方法的引用:

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进行操作,例如将其添加到页面中或保存为图片等。

案例:保存缩略图

之前在项目里面写过一个功能,就是把页面保存成缩略图展示。需要获取这个页面的截图,然后把截图数据发送给后端,后端保存起来,然后查询列表的时候后端返回保存的缩略图进行展示。就是引用上面的步骤:

javascript 复制代码
    // 获取截图
    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了。

这样就可以把页面的截图获取下来,然后保存缩略图到后端。但是在实际使用上发现一个大问题,就是我引用的网络图片获取截取不下来。于是找了一下原因:是因为跨域的问题导致觉得不安全,就没有截取。

解决这个问题也很简单,配置一下允许跨域,上面代码改一下:

javascript 复制代码
    // 获取截图
    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 的代理配置就可以了。

bash 复制代码
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/;
}

这样就能截取下来了,反正我是成功了。

好了就这样,没啥营养的博文。祝大家工作生活一切顺利!

对了,最近玩 元梦之星 了吗?

最近中了 元梦之星 的毒,每天晚上玩到很晚,我现在知道什么叫玩物丧志了....

相关推荐
cs_dn_Jie1 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic36 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v3 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家4 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙4 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds4 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果5 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot