使用Canvas合成多张图片和文字为一张图片
完整demo代码,vue<!-- 图片合成demo --><template><div class="view-wrap"><h3>我是canvas图片文字合成组件</h3><img ref="img1" src="./1.jpg" alt /><img ref="img2" sr...
·
完整demo代码,vue
<!-- 图片合成demo -->
<template>
<div class="view-wrap">
<h3>我是canvas图片文字合成组件</h3>
<img ref="img1" src="./1.jpg" alt />
<img ref="img2" src="./2.jpg" alt />
<div>
<el-input v-model="text" placeholder="请输入内容" style="width: 250px;"></el-input>
<el-button type="primary" @click="handleConposeImg">合成</el-button>
</div>
<div ref="photo" class="photo"></div>
<canvas v-show="false" ref="myCanvas" id="myCanvas"></canvas>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
text: ''
}
},
computed: {},
methods: {
onCreateCanvas() {
let img1 = this.$refs.img1
let img2 = this.$refs.img2
// console.log(img1.naturalWidth, img1.naturalHeight) 可获取图片的原始宽度和高度
let img1Height = img1.naturalHeight
let img2Height = img2.naturalHeight
let canvasWidth = 200 // 这里设置固定值
let canvasHeight = img1.naturalHeight + img2.naturalHeight // 合成的画布高度为两张图片高度之和
let canvas = this.$refs.myCanvas
let context = canvas.getContext('2d')
canvas.width = canvasWidth // canvas画布宽度
canvas.height = canvasHeight // canvas画布高度
// 将img1、img2等依次加入画布
context.drawImage(img1, 0, 0, 200, img1Height) // 加入图片1
context.drawImage(img2, 0, img1Height, 200, img2Height) // 加入图片2
context.fillStyle = 'red' // 设置文字的填充颜色
context.font = 'italic 20px Georgia' // 设置文字的填充样式
context.fillText(this.text, 10, 140) // 在画布中添加文字
let newImg = new Image()
newImg.src = canvas.toDataURL('image/png') // canvas画布导出图片
this.$refs.photo.append(newImg) // 将图片插入div中展示出来
},
// 点击合成按钮,执行合成方法
handleConposeImg() {
this.onCreateCanvas()
}
},
mounted() {
// // HACK:加上延时避免 mounted 方法比页面加载早执行
// this.$nextTick(() => {
// setTimeout(() => {
// this.onCreateCanvas()
// }, 100)
// })
}
}
</script>
<style lang="scss" scoped>
</style>
更多推荐
已为社区贡献28条内容
所有评论(0)