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)
})

效果

到此这篇关于js使用Canvas将多张图片合并成一张的实现代码的文章就介绍到这了,更多相关js canvas图片合并一张内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

  • js+canvas实现两张图片合并成一张图片的方法

    本文实例讲述了js+canvas实现两张图片合并成一张图片的方法.分享给大家供大家参考,具体如下: JS和canvas的合成方式 function drawAndShareImage(){ var canvas = document.createElement("canvas"); canvas.width = 700; canvas.height = 700; var context = canvas.getContext("2d"); context.rect(

  • js 将canvas生成图片保存,或直接保存一张图片的实现方法

    将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click(); } canvas:传入canvas的dom对象 name:保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = documen

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • js实现canvas保存图片为png格式并下载到本地的方法

    整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享. 1.canvas 保存图片 2.下载到本地 function base64Img2Blob(code){ var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var

  • js使用Canvas将多张图片合并成一张的实现代码

    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'

  • 使用JS和canvas实现gif动图的停止和播放代码

    使用JS和canvas实现gif动图的停止和播放代码

    HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现图片马赛克,模糊,色值过滤等很多图片特效.我们这里不用那么复杂,只要读取我们的图片,重绘下就可以. HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn

  • JS和canvas实现俄罗斯方块

    JS和canvas实现俄罗斯方块

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p style="font-size: 20px;">键盘箭头A,D控制左右移动,S控制快速下滑.W控制变形,空格控制暂停,enter开始游戏</p> <

  • Android开发之将两张图片合并为一张图片的方法

    本文实例讲述了Android开发之将两张图片合并为一张图片的方法.分享给大家供大家参考,具体如下: 主要操作代码如下: private Bitmap mergeBitmap(Bitmap firstBitmap, Bitmap secondBitmap) { Bitmap bitmap = Bitmap.createBitmap(firstBitmap.getWidth(), firstBitmap.getHeight(),firstBitmap.getConfig()); Canvas can

  • JS和Canvas实现图片的预览压缩和上传功能

    先来一张效果图,压压惊 第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax

  • Python 多张图片合并成一个pdf的参考示例

    过程 拿到一个需求最重要的就是将大块任务拆分成一个个小模块,逐个击破. 拍照 这一步首先是将所有的书页拍好,需要注意的是要按照书的页码来拍,因为后面的排序是按照文件名进行排序的,拍照的文件名基本上是按照时间生成的,如果拍的时候乱了,到时候生成的 pdf 里面的页码也会乱掉. 用到的Python 操作库 Python 最好的地方就是有大量的第三方库能帮我们快速实现我们想要的方法,搜索到了两个库, PyFPDF 和img2pdf,我们这里选择img2pdf来完成我们的需求 pip install i

  • Js利用Canvas实现图片压缩功能

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement

  • JS+html5 canvas实现的简单绘制折线图效果示例

    JS+html5 canvas实现的简单绘制折线图效果示例

    本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px;

随机推荐