canvas合并两张图片
解析: 原理是一样的
画多张图需要一张一张画
也就是等图片onload成功后处理
这里代码写的比较随意
实际用的时候可以小粉转一下 也非常简单。我懒~~
么么、、
newImage(text) {
// 生成图片
var imageBox = document.getElementById("newimage")
var canvas = document.getElementById("canvas")
var cxt = canvas.getContext("2d")
var img = new Image()
img.src = require(`assets/img/activity/newyear/${1}.jpg`)
// 图片加载完成,才可处理
img.onload = () => {
// 画图(这里画布与图片等宽高)
cxt.drawImage(img, 0, 0)
// 设置字体大小
cxt.font = "28px Microsoft YaHei"
// 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
cxt.textBaseline = 'middle'
cxt.textAlign = 'center'
// 距离左边的位置
var left = canvas.width / 2
// 距离上边的位置 (图片高-文字距离图片底部的距离)
var top = canvas.height - 328
// 文字颜色
cxt.fillStyle = "#000"
// 文字在画布的位置
cxt.fillText(text, left, top)
// 画第二张图
draw()
} function draw() {
var img2 = new Image()
img2.src = 'require(`assets/img/activity/qm/button.png`)'
img2.onload = () => {
cxt.drawImage(img2, 180, 80)
imageBox.src = canvas.toDataURL("image/jpg")
}
} },
canvas合并两张图片的更多相关文章
- 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
- ps 合并两张图片
1.ps 打开第一张图片,2.打开另一张图片为图层.3.选中图层,创建蒙版: 4.点击蒙版+按Alt键,打开蒙版:5.打开蒙版后选中渐变工具,途中黑色为不显示区域,(注意渐变模式要改为正常):6.调整 ...
- PHP合并两张图片(水印)
$dst_im = "http://img6.cache.netease.com/photo/0001/2016-04-15/BKMTUO8900AP0001.jpg"; $src ...
- C# 合并两张图片
private BitmapSource CombineImage(BitmapSource img1,BitmapSource img2) { var composeImg = new Render ...
- OpenCV两张图片的合并
转载请注明出处..! http://blog.csdn.net/zhonghuan1992 OpenCV两张图片的合并 原理: 两张图片合并,想想图片是用一个个像素点来存储.每一个像素点有他的值. 那 ...
- HTML5利用canvas,把多张图合并成一张图片
需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...
- java实现把两张图片合并(Graphics2D)
package com.yin.text; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.i ...
- iOS把两张图片合成一张图片
0x00 步骤 先读取两张图片把创建出CGImageRef 创建上下文画布 把图片依次画在画布指定位置上 从上下文中获得合并后的图片 关闭上下文 释放内存 0x01 代码实现 - (void)comp ...
- 如何在Node.js中合并两个复杂对象
通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...
随机推荐
- 码云 git 命令提交
E:\project\eddy-boot-focus>git init E:\project\eddy-boot-focus>git remote add origin https://g ...
- 【Bean】标签常用属性
[Bean]标签常用属性 Id 说明:起名称,id属性值名称任意,不能包含特殊符号,根据id得到配置对象. Class 说明:创建对象所在类的全路径. Name 说明:功能和id是一样的,id属性值不 ...
- python数据分析入门(一)----安装pandas
打算入坑, python数据分析 , 所以下载了 <利用python数据分析>的电子书, 影印版 , 14年出版的 , 现在有很多工具对不上号, 但是整体思想还是不变的 , 所以准备工作要 ...
- win10安装mysql时报错[MY-012576] [InnoDB] Unable to create temporary file; errno: 2
报错信息 解决: 在my.ini文件里面的 [mysqld]区段内加入: #自己指定的临时文件目录 tmpdir="临时目录" 添加好后初始化成功 接下来启动mysql服务的时候报 ...
- Js AJAX Event
;(function () { if ( typeof window.CustomEvent === "function" ) return false; function Cus ...
- [19/05/28-星期二] JavaScript_ 对象和引用数据类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- springboot swagger教程😀
传送门开启:https://www.ibm.com/developerworks/cn/java/j-using-swagger-in-a-spring-boot-project/index.html
- java8-----lambda语法
// -----lambda语法1------ https://www.baidu.com/link?url=6iszXQlsmyaoWVZMaPs3g8vLRQXzdzTnKzQYTF8lg-5QQ ...
- kafka生产者java客户端
producer 包含一个用于保存待发送消息的缓冲池,缓冲池中消息是还没来得及传输到kafka集群的消息. 位于底层的kafka I/O线程负责将缓冲池中的消息转换成请求发送到集群.如果在结束prod ...
- uva-796.critical links(连通图的桥)
本题大意:求出一个无向图的桥的个数并且按照顺序输出所有桥. 本题思路:注意判重就行了,就是一个桥的裸题. 判重思路目前知道的有两种,第一种是哈希判重,第二种和邻接矩阵的优化一样,就是只存图的上半角或者 ...