js使用Canvas将多张图片合并成一张的实现代码
作者:weixin_45337170 发布时间:2024-05-25 15:17:59
标签:js,canvas,图片,合并
解决方案
function mergeImgs(list) {
const imgDom = document.createElement('img')
document.body.appendChild(imgDom)
const canvas = document.createElement('canvas')
canvas.width = 500
canvas.height = 500 * 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, 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 )
代码稍微优化一下,改成公共方法
/**
* 合并多张图片,返回新的图片
* @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 = []
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]) {
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 = base64
document.body.appendChild(imgDom)
})
效果
来源:https://blog.csdn.net/weixin_45337170/article/details/115318940


猜你喜欢
- 一、反射概述反射是指程序在运行期间对程序本身进行访问和修改的能力。程序在编译过程中变量会被转换为内存地址,变量名不会被编译器写入到可执行部分
- OS 模块在讲解包模块时我们提到通过 sys 模块进行查看全局包路径查看于注册,今天我们尝试了解下OS模块,这个模块主要
- 安装anaconda 是自动集成的如果导入不存在,直接pippip install tqmd参数#参数介绍iterable=None,des
- 前言之前写过一篇关于阿里的低代码工具LowCodeEngine 的文章,发现大家还是挺感兴趣的。最近又发现了一款很有意思的低代码工具Yao,
- 一、说明前面我们说了mysql的安装配置,mysql语句使用以及备份恢复mysql数据;本次要介绍的是mysql的主从复制,读写分离;及高可
- 本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE html PU
- 鉴于最近对OpenStack的兴趣和激情,我想要确保我可以做恰当的系统性能评估。我主要开始转向sysbench,是因为它带来一系列丰富的针对
- 1.断点调试是啥?难不难?断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下
- 目录LAMP架构1.lamp介绍2.web服务工作流程web服务器的资源分为俩种:静态和动态资源web服务器如何处理客户端的请求2.1cgi
- 和获取网页上的信息不同,想要进行模拟登录还需要向服务器发送一些信息,如账号、密码等等。模拟登录一个网站大致分为这么几步:1.先将登录网站的隐
- 目录前言查询使用场景案例时间区间查询查询日期今天时间比较数据常用的周期时间查询mysql日期时间函数1 得当前日期+时间(date + ti
- PDO::preparePDO::prepare — 准备要执行的SQL语句并返回一个 PDOStatement 对象(PHP 5 >
- 这个仿msn的右下角popup提示窗口效果很久以前收集的,现在整理出来给大家分享,需要的朋友可以拿去用,特点,提示窗口内容和js代码分离容易
- 当页面中引用template.js文件之后,脚本将创建一个TrimPath对象供你使用。 parseDO
- <script language="javascript">function chang
- 目录楔子使用方法创建一个文件创建一个目录重命名将文件1.txt移动到子目录test_child, 所以此时会伴随一个创建、一个删除以及一个修
- js 读取csv内容拼接成jsonformdata对象上传了csv文件,读取文件内容拼接成json对象var form = new Form
- 1433 SQL入侵恢复xp_cmdshell方法总结 sql server 2005下开启xp_cmdshell的办法 EXEC sp_c
- 在ASP中使用FSO组件生成HTML静态页面,共有两个页面index.htm是首页.程序比较简单,主要是用了ASP里的文件操作
- '''数据集:伪造数据集(两个高斯分布混合)数据集长度:1000--------------------------