使用canvas将多张图片合并为一张

一、可用于生成一个类似于微信的个人名片或做一些海报

drawAndShareImage(imgSrc1, imgSrc2) { //imgSrc1 背景图片（二维码）链接//imgSrc2 小图片（头像）链接var canvas = document.createElement("canvas");canvas.width = 700;canvas.height = 700;var context = canvas.getContext("2d");context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = "#fff";context.fill();var myImage = new Image();myImage.src = imgSrc1; //背景图片  你自己本地的图片或者在线图片myImage.crossOrigin = 'Anonymous';myImage.onload = () => {context.drawImage(myImage, 0, 0, 700, 700);var myImage2 = new Image();myImage2.src = imgSrc2; //你自己本地的图片或者在线图片myImage2.crossOrigin = 'Anonymous';myImage2.onload = () => {// 设置填充的颜色context.fillStyle = "white";// 绘制填充的矩形context.fillRect(250, 250, 210, 210);context.drawImage(myImage2, 260, 260, 190, 190);var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下// 获取图片容器var myImg = document.getElementById('myImg');myImg.src = base64;}}
}

二、合成多张图片

示例：如果是这样有规律的合成图片，可以直接用示例代码中的数组循环。如果是想要自由调整位置，就需要一个一个去新建，然后调整

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><img id="myImg" width="500px" src="" alt=""></div><script>let src1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668137717&t=44c0114e3f029d9fc02045f7604d3a17"let src2 = "http://t15.baidu.com/it/u=2027854191,2160613474&fm=224&app=112&f=JPEG?w=240&h=240"let src3 = "http://t14.baidu.com/it/u=1222460544,2890239708&fm=224&app=112&f=JPEG?w=500&h=500"let src4 = "http://t14.baidu.com/it/u=2969192949,3648643824&fm=224&app=112&f=JPEG?w=478&h=500"let src5 = "http://t13.baidu.com/it/u=1763821927,1950161827&fm=224&app=112&f=JPEG?w=500&h=500"let src6 = "http://t13.baidu.com/it/u=1064126021,1678889867&fm=224&app=112&f=JPEG?w=500&h=500"let arr = [src2,src3,src4,src5,src6]function drawAndShareImage(imgSrc1, arr) { //imgSrc1 背景图片（二维码）链接//arr 合成的小图片的数组[链接1,链接2.....]var canvas = document.createElement("canvas");canvas.width = 700;canvas.height = 700;var context = canvas.getContext("2d");context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = "#fff";context.fill();var myImage = new Image();myImage.src = imgSrc1; //背景图片  你自己本地的图片或者在线图片myImage.crossOrigin = 'Anonymous';myImage.onload = () => {context.drawImage(myImage, 0, 0, 700, 700);// 示例：如果合成图片的位置有规律，就可以 循环传入的数组// 如果想要自由的合成图片，那就需要 重复的进行新建，逐个调整位置arr.forEach((item,index)=>{let myImage2 = new Image();myImage2.src = item; //你自己本地的图片或者在线图片myImage2.crossOrigin = 'Anonymous';myImage2.onload = () => {// 设置填充的颜色context.fillStyle = "white";// 区分每一个图片的位置let left = 0let top = 0if(index%2==0){left=0top=150*Math.floor(index/2)}else{left=200top=150*Math.floor(index/2)}// 绘制填充的矩形context.fillRect(150+left, 150+top, 110, 110);// 绘制图片context.drawImage(myImage2, 160+left, 160+top, 90, 90);var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下// 获取图片容器var myImg = document.getElementById('myImg');myImg.src = base64;}})}}drawAndShareImage(src1,arr)</script>
</body>
</html>

使用canvas将多张图片合并为一张相关推荐

python opencv2 将两张图片合并为一张
转自 https://www.cnblogs.com/ailexy/p/6806622.html 在用python处理图像的时候,除了图片叠加和图片拼接两种情况之外,有时候还会碰到需要上下左右连接图片 ...
Java 图片转PDF 与 4张图片合并为一张
目录效果图调用工具 PDF转换工具类图片合并工具类效果图测试类 BufferedImage image = QRCodeUtilEx.createImage("这是生成二维码的图片 ...
php 多个图片合并为一张
文字换行生成一张图片且和多张图片合并为一张 <?php $fontUrl = '/usr/share/fonts/truetype/myyuanjian/汉仪细中圆简.ttf'; $fontU ...
Mysql将多表合并为一张表查询
需求:将销售订单和采购订单相同字段合并成一张表然后进行分页查询. 列如采购数据: SELECT contract_id,group_id,total_quantity,total_amount,cre ...
将两张DVD合并为一张DVD±R DL的方法
DVD Cloner 2019优化了DVD复制功能,提高了视频质量. 通过软件中的快捷方式窗口实时向我们发送快速反馈.下本篇文章中,为您介绍的是将两张DVD合并为一张DVD±R DL的方法. DVD ...
如何把很多照片拼成一张照片_电脑如何在线将多张图片合成为一张动图？
原标题:电脑如何在线将多张图片合成为一张动图? 有些时候,需要将多张图片制作成一张图片来进行展示,想要将多张图片合成一张的那么就需要使用拼图或者合成gif动图两种方式来进行操作.拼图可以使用美图秀秀, ...
oracle 合并多个不同结构的表_视频演示| 如何将多个工作簿合并为一张工作表
* 西玛小课堂·免费视频课 * 电子表格实用技能演示 PPT课件制作技巧照片图像处理实战语音文件编辑技巧公众号文章排版实战标志.字体设计技巧平面广告设计技能快 ...
怎么把多张图片合成为一张？
将多张图片合成为一张图片是在很多场合下都非常有必要的,例如设计制作等.其中,合成图片的关键性和重要性主要包括以下几点:首先,保证合并后的图片质量.在进行多张图片合成时,需要保证图片大小和分辨率的统一, ...
Python实现将多张图片拼接为一张
文章目录一.需求二.代码一.需求将多个这样的图片进行拼接为一张拼接效果: 更多照片张数同理二.代码 import PIL.Image as Image import osIMAGES_PA ...
最详细的解释——如何实现多张图片拼接为一张图（一）
日常生活中,我们经常需要将多张图片合成为一张图片,但是却又找不到好的方法,直接将多张图片拖拽到一起不仅耗时耗力,而且效率低,效果差.OpenCV 给我们提供了很好的拼接工具,下面我们以两张图片的拼接为 ...

使用canvas将多张图片合并为一张

一、可用于生成一个类似于微信的个人名片或做一些海报

二、合成多张图片

示例：如果是这样有规律的合成图片，可以直接用示例代码中的数组循环。如果是想要自由调整位置，就需要一个一个去新建，然后调整

使用canvas将多张图片合并为一张相关推荐

最新文章

热门文章