web端螢幕截圖，生成自定義海報！

DCodes發表於2024-02-28
Web

在一些社群網站，經常會碰到問題、活動、商品的資訊分享，這種分享通常是以海報的形式傳送給好友或儲存到本地。在這種場景下，海報肯定是動態變化的，所以我們要動態的渲染內容並生成圖片，海報其實就是圖片。
官網：html2canvas
海報示例：
在這裡插入圖片描述

介紹

瞭解 html2canvas，它是如何工作的以及它的一些侷限性。
在你開始使用這個指令碼以前，這裡有些幫助你更好的瞭解指令碼的好處及其的一些侷限性。

關於

html2canvas 是一個 HTML 渲染器。該指令碼允許你直接在使用者瀏覽器擷取頁面或部分網頁的“螢幕截圖”，螢幕截圖是基於 DOM，因此生成的圖片並不一定 100% 一致，因為它沒有製作實際的螢幕截圖，而是根據頁面上可用的資訊構建螢幕截圖。

它是如何工作的

該指令碼透過讀取 DOM 以及應用於元素的不同樣式，將當前頁面呈現為 canvas 影像。
它不需要來自伺服器的任何渲染，因為整個影像是在客戶端上建立的。但是，由於它太依賴於瀏覽器，因此該庫不適合在 nodejs 中使用。它也不會神奇地規避任何瀏覽器內容策略限制，因此呈現跨域內容將需要代理來將內容提供給相同的源。

開始

準備工作

安裝依賴

npm install html2canvas

在需要的頁面引入依賴

import html2canvas from 'html2canvas'

然後就可以使用html2canvas相關API了。

定義海報結構

在使用之前我們要先定義好頁面，我們先在頁面上寫好海報的html

<view class="html2canvas">
    <view class="poster_title">
        海報標題
    </view>
    <view class="img_box">
        <img class="img_case" src="http://image.gwmph.com/weican/2024/02/27/695aa1d4c2394be48925a6858dd68e9d.jpg" alt="" />
    </view>
    <view class="poster_title" @click="getPoster()">
        確定分享
    </view>
</view>
    .html2canvas{
        padding: 20rpx;
        .poster_title{
            text-align: center;
        }
        .img_box{
                display: flex;
                justify-content: space-around;
                margin: 10rpx 0;
            .img_case{
                width: 300rpx;
                height: 300rpx;
            }
        }
    }

script部分

在這裡我們要區分兩種script型別，一種正常的，一種是renderjs
在一個頁面中script可以有多個，它也可以寫在任意位置，如果我們做正常的邏輯操作，可以在普通的script中編碼；如果我們要對頁面進行互動，請使用renderjs。

renderjs是一個執行在檢視層的js。它比WXS更加強大。它只支援app-vue和web。
renderjs的主要作用有2個：

  1. 大幅降低邏輯層和檢視層的通訊損耗，提供高效能檢視互動能力
  2. 在檢視層操作dom，執行 for web 的 js庫
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';  // 引入html2canvas
export default {
    methods: {
        async getPoster() {
            try {
                    const dom = document.querySelector('.html2canvas');
                    const canvas = await html2canvas(dom,{
                        width: dom.offsetWidth,//設定canvas尺寸與所截圖尺寸相同，防止白邊
                        height: dom.offsetHeight,//防止白邊
                        logging: true, // 是否嘗試記錄日誌
                        useCORS: true, // 是否嘗試使用CORS從伺服器載入影像，解決圖片跨域
                        scale: 4, // 縮放比例，處理模糊問題，數值越大越高畫質
                        dpi: 600, // 解析度，，處理模糊問題，數值越大越高畫質
                    });
                    const base64 = canvas.toDataURL('image/jpeg', 1);
                    console.log('生成的圖片',base64);
            } catch(error){
                console.log(error)
            }
        }
    }
}
</script>

點選確定分享，我們則會呼叫getPoter來生成圖片，canvas.toDataURL生成的圖片為base64格式，下面是生成後的內容：
在這裡插入圖片描述

然後我們透過a標籤圖片進行下載，下面是生成海報並下載的完整邏輯。

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas'; // 引入html2canvas
export default {
    methods: {
        async getPoster() {
            try {
                    const dom = document.querySelector('.html2canvas'); // 獲取dom
                    const canvas = await html2canvas(dom,{
                        width: dom.offsetWidth,//設定canvas尺寸與所截圖尺寸相同，防止白邊
                        height: dom.offsetHeight,//防止白邊
                        logging: true, // 是否嘗試記錄日誌
                        useCORS: true, // 是否嘗試使用CORS從伺服器載入影像，解決圖片跨域
                        scale: 4, // 縮放比例
                        dpi: 600, // 解析度
                    });
                    const base64 = canvas.toDataURL('image/jpeg', 1);
          let a = document.createElement('a'); // 建立a標籤
                    a.href = base64; // 新增href屬性，也就是url
                    a.download = "posterName.png" // 設定下載名稱
                    a.click(); // 模擬點選，下載圖片
            } catch(error){
                console.log(error)
            }
        }
    }
}
</script>

下面就是下載下來的圖片
在這裡插入圖片描述
在這裡插入圖片描述

注意事項

1、多個script

<script>
    export default {
        name: 'html2canvas',
        props: {
        },
        methods: {
        }
    }
</script>
  
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
    methods: {
    }
}
</script>

在uniapp中，我們如果想要提供邏輯層和檢視層的通訊效率，可能會使用renderjs，你可能會在頁面中看到多個script，這是正常的，我們可能會將生成海報的功能封裝成元件，透過元件傳參的方式在多個頁面複用，這種結構頁面就可能有兩個script，一個是正常的vue的scrpit，用於處理正常邏輯以及接收傳參和事件等，一個是用於檢視層通訊的renderjs

2、html2canvas不要用image標籤

我們在生成圖片的時候，可能會調整清晰度和解析度，讓畫面更高畫質，html2canvas應該使用img標籤，而不是image標籤，image標籤不會對html2canvas的scale、dpi生效。

3、html2canvas對於現在的css高階屬性的支援

html2canvas可能不會支援css高階屬性，例如：
● background-blend-mode
● border-image
● box-decoration-break
● box-shadow
● filter
● font-variant-ligatures
● mix-blend-mode
● object-fit
● repeating-linear-gradient()
● writing-mode
● zoom
● ......
對於漸變文字裁切之類的高階屬性可能不支援，如果海報生成的時候沒有生效，那就是不支援，需要思考替代方案。

最後

1、html2canvas是基於html的渲染器，只要定義好海報結構即可生成，可以看成html2canvas就是將頁面結構轉換成圖片。
2、不要使用image標籤，應該使用img標籤。
3、不支援部分css高階屬性。

如果你覺得本文章不錯，歡迎點贊👍、收藏💖、轉發✨哦~
閱讀其它：
hex和rgb色值轉換-色彩加深減淡
微信小程式圖片壓縮原來這麼easy!
遞迴元件組合拳，無懼頁面巢狀
微信小程式動態生成表單來啦！你再也不需要手寫表單了！
微信小程式使用者隱私API

相關文章