<div id="app">
  <textarea v-model="text">
  </textarea>
  <button @click="generate">画像を生成</button>
  <div id="preview">
    <div id="preview_inner">
      <div id="bln">{{ text }}</div>
    </div>
  </div>
      
  <div id="result">
  </div>
  
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>

#preview
  overflow: auto
  width: 100%
  &_inner
    background: url(https://takasaki.work/wp-content/uploads/2019/08/homeless_furousya.png) no-repeat left bottom
    background-size: 200px auto
    position: relative
    padding-bottom: 250px
    width: 600px

#bln
  position: relative
  display: inline-block
  padding: 1em 1.5em
  min-width: 200px
  border-radius: 30px
  color: #333
  background: whitesmoke
  white-space: pre-wrap
  &::before
    content: ""
    position: absolute
    top: 100%
    left: 100px
    margin-left: -15px
    border: 15px solid transparent
    border-top: 15px solid whitesmoke
View Compiled
let app = new Vue({
	el: '#app',
	data: {
		text: ''
	},
	methods: {
		generate(){
			html2canvas(document.querySelector("#preview_inner")).then(function(canvas){
				let result = document.querySelector("#result");
				result.innerHTML = '';
				result.appendChild(canvas)
			});
		}
	}
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.