快捷導(dǎo)航

vue項目中如何將當(dāng)前頁面生成圖片

更新時間：2023年10月30日 08:50:08 作者：末日與曙光

這篇文章主要介紹了vue項目中如何將當(dāng)前頁面生成圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

安裝所需依賴

npm install --save html2canvas // 頁面轉(zhuǎn)圖片

詳細(xì)代碼

累了，毀滅吧，直接上代碼，代碼里的注釋已經(jīng)解釋完了;

對了，這是移動端樣式；

<template>
  <div class="ReservedSucceed">
    <div id="ReservedSucceed" @click="imgBox=false">
        <div class="content" v-for="item in strList" :key="item.label">
          <p class="hide">{{item.str}}</p>
        </div>
    </div>
    <el-button type="primary" @click="imgBox=true" >網(wǎng)頁生成圖片</el-button>
    <div class="imgBox" v-show="imgBox">
      <div class="img">
        <img :src="fileId" alt="">
      </div>
      <div class="box">
        <a class="down" href download="圖片名字">請長按保存圖片</a>
      </div>
    </div>
    
  </div>
</template>


<script>
import html2canvas from 'html2canvas'

export default {
  data() {
    return {
      fileId:"",
      imgurl: null,
      imgBox: false,
      strList:[
        {str:"要永遠(yuǎn)堅信這一點：一切都會變的，無論受多大創(chuàng)傷心情多么沉重，一貧如洗也好，都要堅持住。太陽落了還會升起，不幸的日子總會有盡頭，過去是這樣，將來也是這樣。早安!",label:"1"},
        {str:"這是他的似水流年，不是我的。歲月如流，就如月在當(dāng)空，照著我們每一個人，但是每個人的生活都不一樣。",label:"2"},
        {str:"流水是白云的影子，月亮是太陽的影子，黑夜是白天的影子，痛苦是愛的影子。不求你做我的影子，甘愿我做你的影子。",label:"3"},
        {str:"花開一季，人活一世，只有時光安然無恙。那些轉(zhuǎn)正確的彎，那些流下的淚水，那些滴下的汗水，不論好壞，終究成全了現(xiàn)在的自己。",label:"4"},
        {str:"人生沒有假設(shè)，當(dāng)下即是全部。人生的幸與不幸，關(guān)鍵看你面向哪里。幸福如陽光，不幸是陰影，有陽光就必然有陰影。人生一邊是永無止境的追求，一邊是平淡如水的流年。不是每一次追求都能成功，不是每一次付出都有收獲。",label:"5"},
        {str:"在滄海桑田，我們就是那起舞的蝴蝶，無論今天怎樣，明天我還會在這里，路過我曾經(jīng)去過的地方，探索我未實現(xiàn)的未來，哪怕是蝴蝶飛不過滄海。",label:"6"},
        {str:"從容來去，坦然今生。無論生命給了我們什么，是雨露的滋潤，還是陽光的照射，是狂風(fēng)的吹拂，還是暴雨的敲打，我們都從容地接受，欣然地釋放著生命的繁麗。如果遇到的是傷痛，我們就要學(xué)會堅忍，并因此練就釋懷生命起落的本能。如果遇到的是快樂，我們就幸福地綻開笑容，并把快樂傳播。如果遇到的是黑夜，我們就和星星、月亮一起迎接每一個黎明的到來；如果遇到的是白晝，我們就盡情地去欣賞鮮花的綻放、鳥兒的歌唱、蝶兒的輕舞，去擁抱這個美麗而充滿生機的世界。",label:"7"},

      ]
    };
  },
  created() {
  },
  mounted() {
    //將網(wǎng)頁生成圖片
    this.htmlTocanvas();
  },
  methods: {
     //獲取截圖
     getBase64(fileId) {
      this.fileId = fileId
    },
    //頁面生成圖片(基礎(chǔ)版)
    htmlTocanvas() {
      const that = this;
      html2canvas(document.getElementById("ReservedSucceed")).then(
        async function(canvas) {
        // 第一種方法,生成base64
        // let str = canvas.toDataURL("image/png").split(",")[1];
        
        that.getBase64(canvas.toDataURL("image/png"));
        // 第二種方法,直接下載
        // canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過上傳服務(wù)器再下載
        // document
        //   .querySelector(".down")
        //   .setAttribute("href", canvas.toDataURL());
        // 第三種方法,生成的圖片的url
        // var imgurl = canvas
        //   .toDataURL("image/png")
        //   .replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url
        // window.location.href = imgurl; // 下載圖片
        }
        
      )
    },
    //頁面生成圖片(進階版)
    htmlTocanvas1() {
      //解決生成的網(wǎng)頁圖片不清晰------預(yù)防,暫未出現(xiàn)
      const that = this;
      //創(chuàng)建一個新的canvas

      var canvas2 = document.createElement("canvas");
      // let _canvas = document.querySelector('div');
      let _canvas = document.getElementById("ReservedSucceed");

      var w = parseInt(window.getComputedStyle(_canvas).width);
      var h = parseInt(window.getComputedStyle(_canvas).height);
      //將canvas畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了
      canvas2.width = w * 3;
      canvas2.height = h * 3;
      canvas2.style.width = w + "px";
      canvas2.style.height = h + "px";
      //可以按照自己的需求，對context的參數(shù)修改,translate指的是偏移量
      //  var context = canvas.getContext("2d");
      //  context.translate(0,0);
      var context = canvas2.getContext("2d");

      html2canvas(document.getElementById("ReservedSucceed"), {
        canvas: canvas2
      }).then(async function(canvas) {
        // 第一種方法,生成base64
        // let str = canvas.toDataURL("image/png").split(",")[1];
        
        that.getBase64(canvas.toDataURL("image/png"));
        // 第二種方法,直接下載
        // canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過上傳服務(wù)器再下載
        // document
        //   .querySelector(".down")
        //   .setAttribute("href", canvas.toDataURL());
        // 第三種方法,生成的圖片的url
        // var imgurl = canvas
        //   .toDataURL("image/png")
        //   .replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url
        // window.location.href = imgurl; // 下載圖片
      });
    },
  }
}
</script>


<style lang="scss" scoped>
.ReservedSucceed {
  background-color: white;
  .hide {
    text-indent: 1em;
  }
  .imgBox {
    position: fixed;
    top: 15%;
    left: 25%;
    width: 50%;
    background-color: rgb(232, 236, 232);
    z-index: 2;
    border-radius: 20px;
    padding: 5px;
    .img {
      padding: 10px;
      img {
        width: 100%;
      }
    }
    .box {
      text-align: center;
      margin: 10px 0;
    }
  }
}
</style>

結(jié)果圖