使用Canvas合成多张图片和文字为一张图片

完整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.img1let img2 = this.$refs.img2// console.log(img1.naturalWidth, img1.naturalHeight) 可获取图片的原始宽度和高度let img1Height = img1.naturalHeightlet img2Height = img2.naturalHeightlet canvasWidth = 200 // 这里设置固定值let canvasHeight = img1.naturalHeight + img2.naturalHeight // 合成的画布高度为两张图片高度之和let canvas = this.$refs.myCanvaslet context = canvas.getContext('2d')canvas.width = canvasWidth // canvas画布宽度canvas.height = canvasHeight // canvas画布高度// 将img1、img2等依次加入画布context.drawImage(img1, 0, 0, 200, img1Height)  // 加入图片1context.drawImage(img2, 0, img1Height, 200, img2Height) // 加入图片2context.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>

使用Canvas合成多张图片和文字为一张图片相关推荐

移动端canvas合成图片，填充文字自动换行
今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡由于代码都是原生的没有引入其他库,所以直接将对应部分贴出来吧. html  <canvas id=& ...
Matplotlib、PIL Image如何将多张图片整合保存为一张图片
目录 1. 法一:生成多行多列图 2. 法二:生成单行/单列图在这篇文章中介绍了如何生成多张图,但是很多时候我们需要将图片综合对比展示,因此需要合并在一张图里. 以下给了2种方法:法一是通常展示 ...
H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
[JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画创建一个 canvas <canvas id="stockGraph" ...
canvas合成海报所遇问题及解决方案总结
最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图(20190214) 文章目录: 一.ffmpeg把gif动图分离成多张图片二.ffmpeg多张图片合成gif动图三.把 ...
python怎样把两个图画到一起_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...
IOS UIPageControl的设置点为一张图片
IOS UIPageControl的设置点为一张图片从ios13以后,或者更高版本,,老版本使用kvc间接设置,即可,你看的资料可能是使用kvc设置,然而并没什么用.我采用的是新版本. 源码 htt ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
android canvas 网络图,【巨坑:toDataURL】canvas合成网络图片
不知有没有小伙伴用过canvas合成图片,然后爆炸报错截图尼玛,然后各种搜索,不外乎以下几种坑爹处理方案: 后端处理,比如Access-Control-Allow-Origin "*&q ...

使用Canvas合成多张图片和文字为一张图片

使用Canvas合成多张图片和文字为一张图片相关推荐

最新文章

热门文章