欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目中如何實現網頁的截圖功能?(html2canvas)

 更新時間：2023年02月18日 15:57:05   作者：俺是老王  
這篇文章主要介紹了vue項目中如何實現網頁的截圖功能?(html2canvas)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue實現網頁的截圖功能 (html2canvas)

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

先安裝html2canvas

npm install html2canvas --save

或者

yarn add html2canvas

引入html2canvas

import html2canvas from 'html2canvas'

主要實現代碼

1、HTML中：

<template>
? ? <!--超級地圖-->
? ? <div id="superMap"/>
? ??
? ? <!--點擊button即可實現頁面的截圖-->
? ? <div id="test">
? ? ? <el-button @click="getImg">截圖</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.href = 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.com/documentation

vue拖動截圖功能實現

拖動鼠標進行頁面截圖(也可指定區(qū)域拖動截圖)

安裝html2canvas、vue-cropper

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

在main.js注冊vue-cropper組件

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

頁面中引入html2canvas

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

代碼分解

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

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

這里是將body整個頁面轉為圖片，得到base64格式數據，其他區(qū)域直接獲取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"
?? ? ? ? ?: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>
?</template>
<script>
?export default{
? ?data(){
? ? ? ?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:{
? ? ?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>
?? ?<!--繼續(xù)寫頁面的其他內容 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%;
?? ? ?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>

效果圖

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • vue3學習指導教程(附帶獲取屏幕可視區(qū)域寬高)

    vue3學習指導教程(附帶獲取屏幕可視區(qū)域寬高)

    Vue3是Vue的第三個版本更快,更輕,易維護,更多的原生支持,下面這篇文章主要給大家介紹了關于vue3學習指導教程(附帶獲取屏幕可視區(qū)域寬高)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • 安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決

    安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決

    這篇文章主要介紹了安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 詳解本地Vue項目請求本地Node.js服務器的配置方法

    詳解本地Vue項目請求本地Node.js服務器的配置方法

    本文只針對自己需要本地模擬接口于是搭建一個本地node服務器供自己測試使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-03-03
  • vue過濾器filter的使用方法詳解

    vue過濾器filter的使用方法詳解

    這篇文章主要給大家介紹了關于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • 使用Vant完成DatetimePicker 日期的選擇器操作

    使用Vant完成DatetimePicker 日期的選擇器操作

    這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 解決vue中使用swiper 插件出錯的問題

    解決vue中使用swiper 插件出錯的問題

    這篇文章主要介紹了vue中使用swiper 插件出錯問題及解決辦法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-08
  • vue中vant組件樣式失效問題及解決

    vue中vant組件樣式失效問題及解決

    這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • 使用Vue.js開發(fā)微信小程序開源框架mpvue解析

    使用Vue.js開發(fā)微信小程序開源框架mpvue解析

    這篇文章主要介紹了使用Vue.js開發(fā)微信小程序開源框架mpvue解析,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • Vue中的數據監(jiān)聽和數據交互案例解析

    Vue中的數據監(jiān)聽和數據交互案例解析

    這篇文章主要介紹了Vue中的數據監(jiān)聽和數據交互案例解析,在文章開頭部分先給大家介紹了vue中的數據監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文
    2017-07-07
  • 詳解如何在你的Vue項目配置vux

    詳解如何在你的Vue項目配置vux

    這篇文章主要介紹了詳解如何在你的Vue項目配置vux，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論