vue2 el-image实现预览时添加自定义文字

很高兴回答你的问题。对于实现预览时添加自定义文字的需求，可以使用 Vue.js 的 el-image 组件结合 canvas 实现。具体做法是在图片加载完成后，将图片绘制到 canvas 上，然后在 canvas 上添加自定义的文字，最后将 canvas 的内容转化为图片并显示出来即可。以下是一个简单的代码示例：

<template>
<div>
<el-image
ref="image"
style="max-width: 500px"
:src="imageUrl"
:fit="fit"
@load="onImageLoad"
></el-image>
<canvas ref="canvas" style="display: none"></canvas>
</div>
</template>

<script>
export default {
data() {
return {
imageUrl: 'https://picsum.photos/id/237/400/200',
fit: 'contain',
}
},
methods: {
onImageLoad() {
const canvas = this.$refs.canvas
const image = this.$refs.image.$el.querySelector('img')

canvas.width = image.width
canvas.height = image.height

const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)

ctx.font = '32px Arial'
ctx.fillStyle = 'white'
ctx.fillText('Custom Text', 50, 50)

const imageDataURL = canvas.toDataURL()
this.imageUrl = imageDataURL
},
},
}
</script>

在代码中，首先定义了一个 el-image 组件，用来展示图片。当图片加载完成后，通过 onImageLoad 方法中的代码将图片绘制到 canvas 上，并添加自定义的文字。最后将 canvas 中的内容转换为图片，并更新 el-image 组件的 src 属性，实现图片预览并添加自定义文字的效果。