使用html2canvas插件进行页面截屏

萧寂173

已于 2023-12-04 15:13:17 修改

阅读量449

点赞数

分类专栏： js 文章标签： javascript vue.js

于 2023-11-15 19:35:02 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/134427361

版权

js 专栏收录该内容

59 篇文章 4 订阅

订阅专栏

html-to-image这个是我后来使用的,感觉比html2canvas好一点,个人比较推荐,首先页面图片不会模糊,不会多截图包括图片不会变形

使用纯html实现过程

<!DOCTYPE html>
<html>

<head>
  <title>使用html2canvas生成网页截图</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
  <h1>使用html2canvas生成网页截图</h1>
  <div id="content">
    <p>这是一个要截图的元素12345。</p>
  </div>

  <script>
    // target是代表要截图的元素范围(就是截图当前元素包括当前元素内的子元素)
    var target = document.getElementById('content')
    html2canvas(target).then(function (canvas) {
      // 参数canvas就是绘画的(截屏)的图片
      // 如果要给canvas元素添加css,本人亲测不行,只能用下面的方法给canvas元素加样式,加完样式再追加到页面中(亲测可行,本人暂时没有别的好办法,说的不对还请见谅)
      const capturedCanvas = canvas
      capturedCanvas.style.border = '2px solid red'
      // 将生成的图片追加到document.body里面
      document.body.appendChild(canvas)
    });
  </script>
</body>

</html>

使用框架(vue,react,uniapp)实现

需要先下载依赖包

npm install html2canvas

下面是一个完整的页面代码,可以直接运行

<template>
  <div ref="tu" id="tupian" style="font-family: initial;">
    <button @click="captureScreen">点击截屏</button>
	<image :src="imgurl" alt="" mode="aspectFill"/>
  </div>
</template>

<script>
import { ref } from 'vue';
import html2canvas from 'html2canvas';

export default {
  setup() {
	const tu = ref(null)
	const imgurl = ref('')
    const captureScreen = () => {
		// 截屏的元素区域
      var target = document.getElementById('tupian')
	  // 添加截屏的逻辑
          html2canvas(target).then(function (canvas) {
			  console.log(canvas);
			  // canvas就是当前截屏出来的屏幕样式,可以通过以下方法给生成的图片加样式
			  const capturedCanvas = canvas;
			  capturedCanvas.style.width = '100%';
			  capturedCanvas.style.height = '200px';
			  capturedCanvas.style.border = '2px solid red';
			  
			  // 将生成的界面添加到当前组件内(直接展示canvas,如果想替换img的话往下面看)
            // tu.value.appendChild(canvas)
			
			const dataURL = canvas.toDataURL();
			  // 这个就是base64格式的图片地址
			  console.log(dataURL);
			  // 将图片地址赋值给img
			imgurl.value = dataURL
          });
    };

    return {
      captureScreen,
	  tu,
	  imgurl
    };
  }
};
</script>
<style lang="scss">
</style>

效果图
在这里插入图片描述

跨域解决

这个就是比如在截图的区域里面存在网络图片,根据浏览器的同源策略,会抛出跨域错误,错误效果如下:
在这里插入图片描述
截取出来的图片如下,可以发现在线图片都没有被截取到

解决办法很暴力,不要信网络上别人说的或者是官网说的加个配置就可以解决跨域问题了,本人亲测,全部都是假的!!!,没有办法解决,本人找到一种非常粗暴又有效的办法(如果是后端服务器直接解决掉就可以了,但是哥们这里是用的图片服务器(也就是图床),后端不在我这里,因此直接在前端做跨域(这里以vue为例))

直接在vite.config.js进行proxy代理配置即可,代码如下(这里用的是vue3模板的uniapp)

import { defineConfig } from 'vite'
import uni from "@dcloudio/vite-plugin-uni";
 
export default defineConfig({
	plugins: [
		uni()
	],
	server: {
		proxy: {
			'/images': {
				target: 'https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/annual/2023', // 目标图片地址  
				changeOrigin: true,
				rewrite: path => path.replace(/^\/images/, ''),
			}
		}
	}
})

在组件内使用(由于不是请求,直接给图片地址加/images/…会报错找不到文件,这样加是直接找图片路径去了,应该按照如下方法添加)
给当前截图的页面的所有在线图片按照如下方式添加地址

<image class="kuangimg" :src="'/images/static/image/page12/background.png'" mode=""></image>

这样完整的地址:https://take-saas.oss-cn-hangzhou.aliyuncs.com/wechat_applets/annual/2023//static/image/page12/background.png

并且这时去截图就可以完整截图下来了,不会报错啦
在这里插入图片描述

萧寂173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用html2canvas插件进行页面截屏

使用html2canvas插件进行页面截屏
复制链接

扫一扫

专栏目录