vue项目中如何实现网页的截图功能 (html2canvas)

目录 vue实现网页的截图功能 (html2canvas) 先安装html2canvas 引入html2canvas 主要实现代码 在使用html2canvas时 vue拖动截图功能实现 安装html2canvas、vue-cropper 在main.js注册vue-cropper组件 页面中引入html2canvas 代码分解 总结

vue实现网页的截图功能 (ht ML 2canvas)

最近做地图的项目，有个需求就是前端需要将网页的内容生成一张图片，这个功能如果让 后端 做的话，前端需要把大量的代码传给后端，然后后端去解析生成图片，再返回给前端，幸运的是，html2canvas.js让这件事情变得 简单 起来，下面是我在vue项目中实现截图功能的代码：

先安装html2canvas

npm install html2canvas - -s ave

或者

yarn add html2canvas

引入html2canvas

import html2canvas  From  'html2canvas'

主要实现代码

1、HTML中：

<template>
? ? <!--超级地图-->
? ? <div id="su PE rMap"/>
? ??
? ? <!--点击button即可实现页面的截图-->
? ? <div id=" test ">
? ? ? <el-button @click="get img ">截图</el-button>
? ? </div>
</template>

2、JavaScript中：

methods:{

//截图方法
?getImg(){
? ?html2canvas(
? ? ?document.getElementById('superMap'),
? ? ?{
? ? ? ?backgroundColor:null,//画出来的图片有 白色 的边框,不要可设置背景为透明色（null）
? ? ? ?useCORS: true,//支持图片跨域
? ? ? ?scale:1,//设置放大的倍数
? ? ?}
? ?).then(canvas => {
? ? ?//截图用img元素承装，显示在页面的上
? ? ?let img = new Image();
? ? ?img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
? ? ?document.getElementById('test').appendChild(img);
?
? ? ?//如果你需要下载截图，可以使用a标签进行下载
? ? ?let a = document.createElement('a');
? ? ?a. hr ef = canvas.toDataURL('image/jpeg');
? ? ?a.download = 'test';
? ? ?a.click();
? ?})
?}
?
}

在使用html2canvas时

估计大家可能会遇到下面的问题

1、图片跨域：如果需要截图的地方包含其他域名的图片，那么会出现跨域问题

解决：

1）设置useCORS:true, 2）把后端的图片转成base64 3）将图片都放在同一个域名下

2、画出来的图片有白色的边框

解决：

1）设置 backgroundColor: null

当然本文只是关于html2canvas一小部分的配置的使用，具体可见官网： http://html2canvas.hertzen测试数据/documentation

vue拖动截图功能实现

拖动鼠标进行页面截图(也可指定区域拖动截图)

安装html2canvas、vue-cropper

npm i html2canvas --save ? ? ? ? ?//用于将指定区域转为图片
npm i vue-cropper -S ? ? ? ? ? ? //将图片进行裁剪

在m ai n.js注册vue-cropper组件

import VueCropper f rom  'vue-cropper'
 Vue.use (VueCropper)

页面中引入html2canvas

? import html2canvas from "html2canvas"
?  export  default{
? }

代码分解

1、将指定区域转为图片

this.$nextTick(()=>{
? ?html2canvas(document.body,{}).then(canvas => { ? ?
? ? ?let dataURL = canvas.toDataURL("image/png");
? ? ?this.uploadImg = dataURL
? ? ?this.loading = true
? ?});
?})

这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id

2、将生成的图片进行拖动截图

<template>
?? ?<div class="pop_alert"  v-if ="show">
?? ? ? <vueCropper
?? ? ? ? ?@mouseenter.native="enter"
?? ? ? ? ?@mouseleave.native="leave"
?? ? ? ? ?ref="cropper"
?? ? ? ? ?:img="uploadImg"
?? ? ? ? ?:outputSize="option.size"
?? ? ? ? ?:outputType="option.outputType"
?? ? ? ? ?:info="true"
?? ? ? ? ?:full="option.full"
?? ? ? ? ?:canMove="option.canMove"
?? ? ? ? ?:canMoveBox="option.canMoveBox"
?? ? ? ? ?:ori gin al="option.original"
?? ? ? ? ?:autoCrop="option.autoCrop"
?? ? ? ? ?:fixed="option.fixed"
?? ? ? ? ?:fixedNumber="option.fixedNumber"
?? ? ? ? ?: center Box="option.centerBox"
?? ? ? ? ?:infoTrue="option.infoTrue"
?? ? ? ? ?:fixedBox="option.fixedBox"
?? ? ? ? ?style="background -i mage:none"
?? ? ? ?></vueCropper>
?? ? ? ?<div class=" BT n_box">
?? ? ? ??? ?<div @click="save">确认截图</div>
?? ? ? ?? ? ? ?<div @click="close">取消</div>
?? ? ? ?</div>
?? ? </div>
?</template>
<script>
?e xp ort default{
? ?data(){
? ? ? ?option: {
? ? ? ? ? info: true, // 裁剪框的大小信息
? ? ? ? ? output Size:  0.8, // 裁剪生成图片的 质量 
? ? ? ? ? outputType: "jpeg", // 裁剪生成图片的格式
? ? ? ? ? canScale: false, // 图片 是否 允许滚轮缩放
? ? ? ? ? autoCrop: false, // 是否默认生成截图框
? ? ? ? ? fixedBox: false, // 固定截图框大小 不允许 改变 
? ? ? ? ? fixed: false, // 是否开启截图框 宽 高固定比例
? ? ? ? ? fixedNumber: [7, 5], // 截图框的宽高比例
? ? ? ? ? full: true, // 是否输出原图比例的截图
? ? ? ? ? canMove: false, //时候可以移动原图
? ? ? ? ? canMoveBox: true, // 截图框能否拖动
? ? ? ? ? original: false, // 上传图片按照原始比例渲染
? ? ? ? ? centerBox: false, // 截图框是否被限制在图片里面
? ? ? ? ? infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
? ? ? ? },
? ? ? ? uploadImg:"",
? ? ? ? show: false
? ?},
? ?methods:{
? ? ?enter() {
? ? ? ?if (this.uploadImg  ==  "") {
? ? ? ? ?return;
? ? ? ?}
? ? ? ?this.$refs.cropper.startCrop(); // 开始 裁剪
? ? ?},
? ? ?leave() {
? ? ? ?this.$refs.cropper.stopCrop();//停止裁剪
? ? ?},
? ? ?save() { ? ? ? ?//确认截图
? ? ? ? this.$refs.cropper.getCropData((data) => { ? ? ?//获取截图的base64格式数据
? ? ? ? ? console. LOG (data)
? ? ? ? ? this.show = false
? ? ? ? })
? ? ? ? // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
? ? ? ? // ? this.cutImg = data;
? ? ? ? // });
? ? ? },
? ? ? close(){ ? ? ? ?//取消
? ? ? ? this.show = false
? ? ? }
? ?}
?}
?</script>

全部代码

<template>
? ?<div>
? ? ?<div @click="tailoring">裁剪</div>
?? ?<!--继续写页面的其他内容 pop_alert可封装成组件使用-->
?? ?
? ? ?<div class="pop_alert" v-if="show">
?? ? ? <vueCropper
?? ? ? ? ?@mouseenter.native="enter"
?? ? ? ? ?@mouseleave.native="leave"
?? ? ? ? ?ref="cropper"
?? ? ? ? ?:img="uploadImg"
?? ? ? ? ?:outputSize="option.size"
?? ? ? ? ?:outputType="option.outputType"
?? ? ? ? ?:info="true"
?? ? ? ? ?:full="option.full"
?? ? ? ? ?:canMove="option.canMove"
?? ? ? ? ?:canMoveBox="option.canMoveBox"
?? ? ? ? ?:original="option.original"
?? ? ? ? ?:autoCrop="option.autoCrop"
?? ? ? ? ?:fixed="option.fixed"
?? ? ? ? ?:fixedNumber="option.fixedNumber"
?? ? ? ? ?:centerBox="option.centerBox"
?? ? ? ? ?:infoTrue="option.infoTrue"
?? ? ? ? ?:fixedBox="option.fixedBox"
?? ? ? ? ?style="background-image:none"
?? ? ? ?></vueCropper>
?? ? ? ?<div class="btn_box">
?? ? ? ??? ?<div @click="save">确认截图</div>
?? ? ? ?? ? ? ?<div @click="close">取消</div>
?? ? ? ?</div>
?? ? </div>
? ?</div>
</template>
<script>
import html2canvas from "html2canvas"
?export default{
? data(){
? ?return{
? ? ?option: {
? ? ? ? ? info: true, // 裁剪框的大小信息
? ? ? ? ? outputSize: 0.8, // 裁剪生成图片的质量
? ? ? ? ? outputType: "jpeg", // 裁剪生成图片的格式
? ? ? ? ? canScale: false, // 图片是否允许滚轮缩放
? ? ? ? ? autoCrop: false, // 是否默认生成截图框
? ? ? ? ? fixedBox: false, // 固定截图框大小 不允许改变
? ? ? ? ? fixed: false, // 是否开启截图框宽高固定比例
? ? ? ? ? fixedNumber: [7, 5], // 截图框的宽高比例
? ? ? ? ? full: true, // 是否输出原图比例的截图
? ? ? ? ? canMove: false, //时候可以移动原图
? ? ? ? ? canMoveBox: true, // 截图框能否拖动
? ? ? ? ? original: false, // 上传图片按照原始比例渲染
? ? ? ? ? centerBox: false, // 截图框是否被限制在图片里面
? ? ? ? ? infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
? ? ? ? },
? ? ? ? uploadImg:"",
? ? ? ? show: false
? ?}
? },
? methods:{
? ? tailoring(){ ? ? ? ? ? ?//裁剪
? ? ? this.$nextTick(()=>{
? ? ? ? ? ?html2canvas(document.body,{}).then(canvas => {
? ? ? ? ? ? ?let dataURL = canvas.toDataURL("image/png");
? ? ? ? ? ? ?this.uploadImg = dataURL
? ? ? ? ? ? ?this.show = true
? ? ? ? ? ?});
? ? ? ?})
? ? },
? ? enter() {
? ? ? ?if (this.uploadImg == "") {
? ? ? ? ?return;
? ? ? ?}
? ? ? ?this.$refs.cropper.startCrop(); //开始裁剪
? ? ?},
? ? ?leave() {
? ? ? ?this.$refs.cropper.stopCrop();//停止裁剪
? ? ?},
? ? ?save() { ? ? ? ?//确认截图
? ? ? ? this.$refs.cropper.getCropData((data) => { ? ? ?//获取截图的base64格式数据
? ? ? ? ? console.log(data)
? ? ? ? ? this.show = false
? ? ? ? })
? ? ? ? // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
? ? ? ? // ? this.cutImg = data;
? ? ? ? // });
? ? ? },
? ? ? close(){ ? ? ? ?//取消
? ? ? ? this.show = false
? ? ? }
? ?}
?}
</script>
<style>
?? ?.pop_alert{
? ? ? width: 100%;
?? ? ?h ei ght: 100%;
?? ? ?pos IT ion: absolute;
?? ? ?top: 0;
?? ? ?left: 0;
?? ? ?border: 1px dashed  red ;
?? ? ?background-color:  # 000000;
? ? }
? ? .btn_box{
? ? ? ? position: absolute;
?? ? ? ?top: 0;
?? ? ? ?color: red;
?? ? ? ?right: 0;
?? ? ? ?font-size: 30px;
?? ? ? ?dis play : flex;
? ? ? ? align-items: center;
?? ? ? ?z-index: 6666;
? ? }
</style>

效果图

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的 文章 : 如何用vue实现网页截图你知道吗 vue 实现网页截图功能详解 vue 使用html2canvas将DOM转化为图片的方法

总结

以上是 为你收集整理的 vue项目中如何实现网页的截图功能?(html2canvas) 全部内容，希望文章能够帮你解决 vue项目中如何实现网页的截图功能?(html2canvas) 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue项目中如何实现网页的截图功能 (html2canvas)的详细内容...