js 将多张图片合并成一张图片

废话不多说，直接上代码

<!DOCTYPE html>
<html lang="zh-CN"><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><script>function mergeImgs(list, cwith = 500, cheight = 1000) {return new Promise((resolve, reject) => {const baseList = [];// 创建 canvas 节点并初始化const canvas = document.createElement('canvas');canvas.width = cwith;canvas.height = cheight * list.length;const context = canvas.getContext('2d');list.map((item, index) => {const img = new Image();img.src = item;// 跨域img.crossOrigin = 'Anonymous';img.onload = () => {context.drawImage(img, 0, cheight * index, cwith, cheight);const base64 = canvas.toDataURL('image/png');baseList.push(base64);if (baseList[list.length - 1]) {// 返回新的图片resolve(baseList[list.length - 1]);}};});});}const urlList = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];mergeImgs(urlList).then((base64) => {const imgDom = document.createElement('img');imgDom.src = base64;document.body.appendChild(imgDom);});</script></body>
</html>

js 将多张图片合并成一张图片相关推荐

Windows10 把两张图片合并成一张图片
Windows10把两张图片合并成一张图片文章目录 Windows10把两张图片合并成一张图片 1. 背景 2. "画图"实现多图拼接 1. 背景相比截图功能,在 Google ...
OpenCV将两图片进行混合，达到两张图片合并成一张图片的效果
1.概述案例:将两张图片混合成一张图片,并且原图的元素要保留到同一张图片中. 2.示例图片 2.1.混合后的图片 2.2.原始的两张图片 3.示例代码 //将两张图片进行混合 #include &l ...
练习 | 01 | 把多张图片合并成一张图片
1 实现方式 1.1 第一种方案 import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.F ...
uniapp怎么使用canvas把两张图片合并成一张图片
首先,在你的 vue 组件中引入 uni-canvas: <template><view class="canvas-container"><uni- ...
cocos2dx-js RenderTexture 将多张图片合并成一张图片
var sprite = new cc.Sprite("about_btn.png");var sprite2 = new cc.Sprite("add5.png&quo ...
Java实现多张图片合并成一份PDF文件
Java实现多张图片合并成一份PDF文件,一行两列展示引入依赖包 <dependency><groupId>com.lowagie</groupId><ar ...
无需下载软件怎么将多张图片组合成一张图片
如今有很多的图片制作及编辑工具,比如美图秀秀和PS软件就是常见的可以编辑图片的软件,但是都需要安装下载,今天小编带来了一个免费图片编辑的网站,无须下载就可以将多张图片组合成一张图片,那怎么操作呢,一起 ...
java 将图片分割成9张_将多张图片合并成一张，代码（可垂直和水平方向合并）...
importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.IOException;importjavax.imageio. ...
ImageMagick将多张图片拼接成一张图片_只有一张图片，也能做出一整套PPT！
暑期特惠最后一天超值福利限时领取做 PPT 经常遇到这样的问题: 老板在玩命催促,眼看着就到 deadline 了,手头上的素材却少得可怜,怎么才能快速完成一套 PPT 啊! 不慌,今天我们就来挑战 ...
Python 把几张图片拼接成一张图片，并且写上文字
把几张图片从上到下拼接成一张图片,并且写上文字 # 要拼接的图片名称是1,2,3...这样有顺序的 # 把当前目录下的所有图片从上到下拼接成一张图片 # 该图片的宽度是图片中最宽图片的宽度 # 不改变 ...

js 将多张图片合并成一张图片

js 将多张图片合并成一张图片相关推荐

最新文章

热门文章