Vue如何給圖片添加水印，你學會了嗎？
作者：前端老兵
請注意，這種方法可能會影響性能，特別是當頁面中有大量圖片時。如果需要更高效的處理，可以考慮將圖像處理放在服務器端完成。
1. vue如何給圖片添加水印
在Vue中給圖片添加水印可以通過幾種不同的方法實現。
這里提供一個基本的示例，使用JavaScript來動態生成帶有水印的圖片。
1.1. 方法1: 使用Canvas API
- 創建Vue組件
- 在mounted生命周期鉤子中處理圖像
- 使用HTML5 Canvas API繪制帶水印的圖像
下面是一個簡單的示例：
1.1.1. Vue組件代碼 (WatermarkedImage.vue)
<template>
<div>
<img :src="watermarkedImageUrl" alt="Image with watermark" />
</div>
</template>
<script>
export default {
name: 'WatermarkedImage',
props: {
imageUrl: {
type: String,
required: true
},
watermarkText: {
type: String,
default: 'Sample Watermark'
}
},
data() {
return {
watermarkedImageUrl: null
};
},
mounted() {
this.createWatermarkedImage();
},
methods: {
createWatermarkedImage() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
// 設置水印樣式
ctx.font = 'bold 20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 繪制水印
ctx.fillText(this.watermarkText, canvas.width / 2, canvas.height / 2);
// 將帶有水印的canvas轉換為Base64編碼的URL
this.watermarkedImageUrl = canvas.toDataURL('image/png');
};
img.src = this.imageUrl;
}
}
};
</script>1.2. 如何使用這個組件
在你的父組件中引入并使用 WatermarkedImage 組件：
<template>
<div>
<WatermarkedImage :imageUrl="imageSrc" :watermarkText="watermark" />
</div>
</template>
<script>
import WatermarkedImage from './WatermarkedImage.vue';
export default {
components: {
WatermarkedImage
},
data() {
return {
imageSrc: 'https://example.com/path/to/image.jpg',
watermark: 'My Watermark Text'
};
}
};
</script>這種方法的好處是它可以在客戶端實時生成帶有水印的圖像，不需要額外的服務器端處理。
但請注意，這種方法可能會影響性能，特別是當頁面中有大量圖片時。
如果需要更高效的處理，可以考慮將圖像處理放在服務器端完成。
責任編輯：武曉燕
來源：
前端愛好者
