如何在画布上添加图片？

Question

如果所示，想在画布上添加一张人相框的图片
我不是专业前端，不是很懂，求指导=-=

Answer 1

1.首先，你需要在你的VUE模板中创建一个隐藏的div，并在其中添加一个img标签。img标签的ref属性可以用来在Vue实例中访问该元素，而src属性可以设置你要加载的图片的路径。例如：

<template>  
  <div class="bg"></div>  
</template>

2.

然后，在Vue实例的mounted钩子函数中，你可以通过this.$refs访问到这个img标签，并获取它的src属性。你可以直接使用这个路径来设置img元素的src属性，或者使用require方法来引入本地图片。例如：

export default {  
  mounted() {  
    // 第一种方法，使用图片地址  
    this.$el.style.setProperty('--bg', `url(${this.$refs.conf0.src})`);  
    // 第二种方法，使用base64  
    // this.$el.style.setProperty('--bg', `url(${require('../assets/1.png')})`);  
  }  
}

3.最后，在你的样式中，你可以使用CSS变量来设置你的背景图片。例如：

.bg {  
  --bg: url('xxx.jpg');  
  background-image: --bg;  
}

这样就可以在画布上添加图片了。注意，如果你使用的是base64路径，可能会因为文件过大而导致代码难以维护。因此，如果可能，尽量使用图片路径而不是base64。