JS实现网页截图 html2canvas

第一步 下载插件 npm i html2canvas -D

第二步引入插件 import html2canvas from 'html2canvas';

第三步使用插件

<template><div ref ="imageWrapper">要截图的元素,如果要截取整个页面，把ref ="imageWrapper"给到最外层的父元素</div><el-button @click="clickGeneratePicture(imageWrapper)">点击截图</el-button>
</template>
<script lang="ts" setup>
import html2canvas from 'html2canvas';
let imageWrapper = ref(null)
let clickGeneratePicture = (imageWrapper: any) => {html2canvas(imageWrapper, {width: imageWrapper.clientWidth, //截图宽度height: imageWrapper.clientHeight, //截图高度backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数}).then((canvas) => {// 把生成的base64位图片上传到服务器,生成在线图片地址let imgUrl = canvas.toDataURL('image/png');var tempLink = document.createElement('a'); // 创建一个a标签tempLink.style.display = 'none';tempLink.href = imgUrl;tempLink.setAttribute('download', '截图'); // 给a标签添加下载属性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank');}document.body.appendChild(tempLink); // 将a标签添加到body当中tempLink.click(); // 启动下载document.body.removeChild(tempLink); // 下载完毕删除a标签window.URL.revokeObjectURL(imgUrl);});
};
</script>

效果图

JS实现网页截图 html2canvas相关推荐

用原生js和html5进行网页截图,使用JS实现网页截图并保存
需求今天接到一个新需求,需要在手机上实现对某张定位实现的自定义图片来生成一个邀请函,然后分享. 这个邀请函是必须是一张图片,由于后端图形拼接太麻烦,于是这个锅就到了前端.而且项目要求比较急,没有时间 ...
JS 实现网页截屏五种方法
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS Puppeteer(chrome headle ...
html2canvas 一个强大的使用js开发的浏览器网页截图工具
html2canvas是一个JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas通过获取页面的DOM和元素的样式信息,并 ...
html2canvas 实现网页截图 / 下载html2canvas.js插件包
html2canvas可以通过纯JS对浏览器网页进行截屏,但截图的精确度还有待提高官网: http://html2canvas.hertzen.com/ gitHub: https://github ...
html2canvas 截图div_浏览器端网页截图方案详解
简介剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 CSS 的 box-shadow 截取情况等.探索一种新的实现方式,能够避 ...
使用js将手机wap网页截图
最近在开发中接到一个需求,在用户分享的时候需要把当前网页生成截图并将图片加网页链接一起分享. 首先想到的就是html5的画布功能,现在记录一下我的劳动成果. <!DOCTYPE html> ...
图片涂鸦html插件,JS 网页截图、涂鸦
最近因为产品需要,用js写了一个能网页截图并涂鸦的js库(类似QQ 截图工具).这个库与html2canvas 等类似的库有巨大的差异:html2canvas 只能做到截取"网页" ...
html2canvas 插件实现网页截图（html保存为图片）
1.html2canvas 官网: http://html2canvas.hertzen.com/ html2canvas 是一款利用javascript进行屏幕截图的插件.可以使用两种语法格式进行截 ...
史上最硬核网页截图方案原理深度剖析
作者 | 陈亮靡不有初,鲜克有终简介剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 css 的 box-shadow 截取 ...

JS实现网页截图 html2canvas

JS实现网页截图 html2canvas相关推荐

最新文章

热门文章