以下是一個使用 Vue 和 html-to-image 搭配的簡單範例：
假設你已經在 Vue 專案中安裝了 html-to-image 庫，你可以在一個 Vue 組件中創建一個用戶介面（UI），然後在點擊按鈕時將該介面轉換為圖像，最後顯示圖像。
首先，你需要在 Vue 組件中導入 html-to-image：
import * as htmlToImage from "html-to-image";
接下來，你可以創建一個用戶介面（UI），並在該介面中放置一個按鈕，以便用戶觸發圖像轉換：
<template>
<div>
<div ref="myDiv">
<!-- 這裡放置你的用戶介面 -->
</div>
<button @click="convertToImage">轉換為圖像</button>
</div>
</template>
注意這個 <div> 元素中的 ref 屬性，它可以讓我們在後面的 JavaScript 代碼中引用它。
接下來，你可以在 Vue 組件中定義一個名為 convertToImage 的方法，用於將介面轉換為圖像：
methods: {
convertToImage() {
htmlToImage.toPng(this.$refs.myDiv)
.then(function (dataUrl) {
// 成功將介面轉換為圖像，現在你可以顯示圖像了
})
.catch(function (error) {
// 轉換失敗，請處理錯誤
});
}
}
在這個方法中，我們使用 htmlToImage.toPng() 方法將 myDiv 元素轉換為 PNG 圖像。轉換成功後，我們可以在 then 方法中獲取圖像的 dataUrl，並將其顯示在介面上，或者進行其他操作。如果轉換失敗，我們可以在 catch 方法中處理錯誤。
最後，你可以在 Vue 組件中使用 img 元素顯示圖像，如下所示：
<img :src="imageUrl" v-if="imageUrl" alt="圖像">
這裡的 imageUrl 是在 convertToImage 方法中獲取的 dataUrl，你可以將它綁定到 Vue 組件的數據屬性中。
總的來說，這是一個簡單的範例，用於展示 Vue 和 html-to-image 搭配使用的基本流程。根據你的具體需求，你可能需要進一步調整。