vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁(yè)的截圖功能?(html2canvas)

更新時(shí)間：2023年02月18日 15:57:05 作者：俺是老王

這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁(yè)的截圖功能?(html2canvas)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue實(shí)現(xiàn)網(wǎng)頁(yè)的截圖功能 (html2canvas)

最近做地圖的項(xiàng)目，有個(gè)需求就是前端需要將網(wǎng)頁(yè)的內(nèi)容生成一張圖片，這個(gè)功能如果讓后端做的話，前端需要把大量的代碼傳給后端，然后后端去解析生成圖片，再返回給前端，幸運(yùn)的是，html2canvas.js讓這件事情變得簡(jiǎn)單起來(lái)，下面是我在vue項(xiàng)目中實(shí)現(xiàn)截圖功能的代碼：

先安裝html2canvas

npm install html2canvas --save

或者

yarn add html2canvas

引入html2canvas

import html2canvas from 'html2canvas'

主要實(shí)現(xiàn)代碼

1、HTML中：

<template>
? ? <!--超級(jí)地圖-->
? ? <div id="superMap"/>
? ??
? ? <!--點(diǎn)擊button即可實(shí)現(xiàn)頁(yè)面的截圖-->
? ? <div id="test">
? ? ? <el-button @click="getImg">截圖</el-button>
? ? </div>
</template>

2、JavaScript中：

methods:{

//截圖方法
?getImg(){
? ?html2canvas(
? ? ?document.getElementById('superMap'),
? ? ?{
? ? ? ?backgroundColor:null,//畫出來(lái)的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）
? ? ? ?useCORS: true,//支持圖片跨域
? ? ? ?scale:1,//設(shè)置放大的倍數(shù)
? ? ?}
? ?).then(canvas => {
? ? ?//截圖用img元素承裝，顯示在頁(yè)面的上
? ? ?let img = new Image();
? ? ?img.src = canvas.toDataURL('image/jpeg');// toDataURL :圖片格式轉(zhuǎn)成 base64
? ? ?document.getElementById('test').appendChild(img);
?
? ? ?//如果你需要下載截圖，可以使用a標(biāo)簽進(jìn)行下載
? ? ?let a = document.createElement('a');
? ? ?a.href = canvas.toDataURL('image/jpeg');
? ? ?a.download = 'test';
? ? ?a.click();
? ?})
?}
?
}

在使用html2canvas時(shí)

估計(jì)大家可能會(huì)遇到下面的問題

1、圖片跨域：如果需要截圖的地方包含其他域名的圖片，那么會(huì)出現(xiàn)跨域問題

解決：

1）設(shè)置useCORS:true,
2）把后端的圖片轉(zhuǎn)成base64
3）將圖片都放在同一個(gè)域名下

2、畫出來(lái)的圖片有白色的邊框

解決：

1）設(shè)置 backgroundColor: null

當(dāng)然本文只是關(guān)于html2canvas一小部分的配置的使用，具體可見官網(wǎng)：http://html2canvas.hertzen.com/documentation

vue拖動(dòng)截圖功能實(shí)現(xiàn)

拖動(dòng)鼠標(biāo)進(jìn)行頁(yè)面截圖(也可指定區(qū)域拖動(dòng)截圖)

安裝html2canvas、vue-cropper

npm i html2canvas --save ? ? ? ? ?//用于將指定區(qū)域轉(zhuǎn)為圖片
npm i vue-cropper -S ? ? ? ? ? ? //將圖片進(jìn)行裁剪

在main.js注冊(cè)vue-cropper組件

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

頁(yè)面中引入html2canvas

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

代碼分解

1、將指定區(qū)域轉(zhuǎn)為圖片

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

這里是將body整個(gè)頁(yè)面轉(zhuǎn)為圖片，得到base64格式數(shù)據(jù)，其他區(qū)域直接獲取class或者id

2、將生成的圖片進(jìn)行拖動(dòng)截圖

<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"
?? ? ? ? ?: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">確認(rèn)截圖</div>
?? ? ? ?? ? ? ?<div @click="close">取消</div>
?? ? ? ?</div>
?? ? </div>
?</template>
<script>
?export default{
? ?data(){
? ? ? ?option: {
? ? ? ? ? info: true, // 裁剪框的大小信息
? ? ? ? ? outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
? ? ? ? ? outputType: "jpeg", // 裁剪生成圖片的格式
? ? ? ? ? canScale: false, // 圖片是否允許滾輪縮放
? ? ? ? ? autoCrop: false, // 是否默認(rèn)生成截圖框
? ? ? ? ? fixedBox: false, // 固定截圖框大小 不允許改變
? ? ? ? ? fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
? ? ? ? ? fixedNumber: [7, 5], // 截圖框的寬高比例
? ? ? ? ? full: true, // 是否輸出原圖比例的截圖
? ? ? ? ? canMove: false, //時(shí)候可以移動(dòng)原圖
? ? ? ? ? canMoveBox: true, // 截圖框能否拖動(dòng)
? ? ? ? ? original: false, // 上傳圖片按照原始比例渲染
? ? ? ? ? centerBox: false, // 截圖框是否被限制在圖片里面
? ? ? ? ? infoTrue: true // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?
? ? ? ? },
? ? ? ? uploadImg:"",
? ? ? ? show: false
? ?},
? ?methods:{
? ? ?enter() {
? ? ? ?if (this.uploadImg == "") {
? ? ? ? ?return;
? ? ? ?}
? ? ? ?this.$refs.cropper.startCrop(); //開始裁剪
? ? ?},
? ? ?leave() {
? ? ? ?this.$refs.cropper.stopCrop();//停止裁剪
? ? ?},
? ? ?save() { ? ? ? ?//確認(rèn)截圖
? ? ? ? this.$refs.cropper.getCropData((data) => { ? ? ?//獲取截圖的base64格式數(shù)據(jù)
? ? ? ? ? console.log(data)
? ? ? ? ? this.show = false
? ? ? ? })
? ? ? ? // this.$refs.cropper.getCropBlob(data => { //獲取截圖的Blob格式數(shù)據(jù)
? ? ? ? // ? this.cutImg = data;
? ? ? ? // });
? ? ? },
? ? ? close(){ ? ? ? ?//取消
? ? ? ? this.show = false
? ? ? }
? ?}
?}
?</script>

全部代碼

<template>
? ?<div>
? ? ?<div @click="tailoring">裁剪</div>
?? ?<!--繼續(xù)寫頁(yè)面的其他內(nèi)容 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">確認(rèn)截圖</div>
?? ? ? ?? ? ? ?<div @click="close">取消</div>
?? ? ? ?</div>
?? ? </div>
? ?</div>
</template>
<script>
import html2canvas from "html2canvas"
?export default{
? data(){
? ?return{
? ? ?option: {
? ? ? ? ? info: true, // 裁剪框的大小信息
? ? ? ? ? outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
? ? ? ? ? outputType: "jpeg", // 裁剪生成圖片的格式
? ? ? ? ? canScale: false, // 圖片是否允許滾輪縮放
? ? ? ? ? autoCrop: false, // 是否默認(rèn)生成截圖框
? ? ? ? ? fixedBox: false, // 固定截圖框大小 不允許改變
? ? ? ? ? fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
? ? ? ? ? fixedNumber: [7, 5], // 截圖框的寬高比例
? ? ? ? ? full: true, // 是否輸出原圖比例的截圖
? ? ? ? ? canMove: false, //時(shí)候可以移動(dòng)原圖
? ? ? ? ? canMoveBox: true, // 截圖框能否拖動(dòng)
? ? ? ? ? original: false, // 上傳圖片按照原始比例渲染
? ? ? ? ? centerBox: false, // 截圖框是否被限制在圖片里面
? ? ? ? ? infoTrue: true // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?
? ? ? ? },
? ? ? ? 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() { ? ? ? ?//確認(rèn)截圖
? ? ? ? this.$refs.cropper.getCropData((data) => { ? ? ?//獲取截圖的base64格式數(shù)據(jù)
? ? ? ? ? console.log(data)
? ? ? ? ? this.show = false
? ? ? ? })
? ? ? ? // this.$refs.cropper.getCropBlob(data => { //獲取截圖的Blob格式數(shù)據(jù)
? ? ? ? // ? this.cutImg = data;
? ? ? ? // });
? ? ? },
? ? ? close(){ ? ? ? ?//取消
? ? ? ? this.show = false
? ? ? }
? ?}
?}
</script>
<style>
?? ?.pop_alert{
? ? ? width: 100%;
?? ? ?height: 100%;
?? ? ?position: 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;
?? ? ? ?display: flex;
? ? ? ? align-items: center;
?? ? ? ?z-index: 6666;
? ? }
</style>

效果圖