js使用Canvas将多张图片合并成一张

需求

有一个由图片地址组成的数组，要将这个数组中的所有图片拼接成一张图片，并返回图片地址或者展示出来

解决方案

思路：创建一个函数，将图片数组做为参数。函数内部循环图片数组，将图片依次使用 canvas 拼接到一起。

// list 为图片数组
function mergeImgs(list) {// 创建一个 img 节点，用于显示拼接完成后的图片const imgDom = document.createElement('img')document.body.appendChild(imgDom)// 创建 canvas 节点并初始化const canvas = document.createElement('canvas')canvas.width = 500canvas.height = 500 * list.lengthconst context = canvas.getContext('2d')// 循环图片数组list.map((item, index) => {const img = new Image()img.src = item// 跨域img.crossOrigin = 'Anonymous'// 图片加载完成后再拼接img.onload = () => {context.drawImage(img, 0, 500 * index, 500, 500)const base64 = canvas.toDataURL('image/png')imgDom.setAttribute('src', base64)// console.log(baseList)}})
}const urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList )

上面代码有些缺陷，图片加载慢时，会闪屏。如果后续逻辑需要使用拼接完成的图片，无法保证后续拿到的图片是否是最终版，因为 img.onload 是异步的。
下面使用 Promise 稍微优化一下，降低代码耦合性，改成公共方法。

/*** 合并多张图片，返回新的图片* @param {Array} list 图片url数组* @param {Number} cwith 画布宽度 默认500* @param {Number} cheight 画布高度 默认500*/
function mergeImgs(list, cwith = 500, cheight = 500) {return new Promise((resolve, reject) => {const baseList = []// 创建 canvas 节点并初始化const canvas = document.createElement('canvas')canvas.width = cwithcanvas.height = cheight * list.lengthconst 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]) {console.log(baseList)// 返回新的图片resolve(baseList[list.length - 1])}}})})
}const urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList ).then(base64 => {const imgDom = document.createElement('img')imgDom.src = base64document.body.appendChild(imgDom)
})

这样就可以保证在 then 中拿到的是正确图片了

效果

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

uniapp怎么使用canvas把两张图片合并成一张图片
首先,在你的 vue 组件中引入 uni-canvas: <template><view class="canvas-container"><uni- ...
java 将图片分割成9张_将多张图片合并成一张，代码（可垂直和水平方向合并）...
importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.IOException;importjavax.imageio. ...
Windows10 把两张图片合并成一张图片
Windows10把两张图片合并成一张图片文章目录 Windows10把两张图片合并成一张图片 1. 背景 2. "画图"实现多图拼接 1. 背景相比截图功能,在 Google ...
Java实现多张图片合并成一份PDF文件
Java实现多张图片合并成一份PDF文件,一行两列展示引入依赖包 <dependency><groupId>com.lowagie</groupId><ar ...
PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...
什么相片可以两张弄成一张_ps怎么把两张图片合成一张
ps怎么把两张图片合成一张图片应用在我们的生活中十分广泛,Photoshop似乎已经离不开我们的生活.点点滴滴回忆刻印成一张张图片.不过有不少网友却不知道ps怎么把两张图片合成一张,下文将一一为大家 ...
如何将两张图片合成一张pdf
在职场工作中,学会处理PDF文件是必不可少的技能.由于PDF文档的特殊性,许多新手在编辑PDF文件时往往不知道从何入手.比如一些非pdf格式的文件,像图片,在使用的时候被指定必须使用pdf格式的,这个 ...
android 两张电信_两张图片合成一张app-2张图片合成一张app下载1.2.9 官方安卓版-西西软件下载...
两张图片合成一张app是一款可以把手机上的2张图片合成一张并且看不出是合成的图片的工具,玩转2张图片叠加,可以让你和偶像合照不是梦很逼真的!带你打造与众不同的作品!可以制作双重曝光效果的APP,带你打 ...
如何将几张图片拼成一张长图，多方法详解
如何将几张图片拼成一张长图?遇到这个问题,我们首先想到是用手机上的工具来进行,比如秀秀就可以实现,但是要注意的是手机软件进行操作的时候很有可能会压缩图片,而且图片上传也是有限制的.限制拼接图片的大小. ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...

js使用Canvas将多张图片合并成一张

需求

解决方案

效果

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

最新文章

热门文章