前端使用canvas拼接多张图片

应业务要求，要把使用canvas截取的app每一屏的图片拼接在一起。图片的地址存放在一个log文件中。

先了解一下drawImage() 方法：

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

log文件：

var jsonData = [{"data": [{"url": "./db/cache/a.jpg"}, {"url": "./db/cache/b.jpg"}, {"url": "./db/cache/c.jpg"}]
}]

接下来就是根据log.js中的图片地址，把这些图片拼接在一起

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>拼长图</title>
</head>
<body><div id="image-container"></div><img src="" alt="" id="avatar"><script language="javascript" type="text/javascript" src="../../assets/js/jquery-2.0.3.min.js"></script><script language="javascript" type="text/javascript" src="./db/log/log.js"></script><script>// 拿到图片地址var dataList = []jsonData.forEach(item => {item.data.forEach(ele => {dataList.push(ele)})})//  绘制图片function draw(dataList, x, y) {var canvas = document.createElement("canvas");canvas.width = xvar context = canvas.getContext("2d");const encoderOptions = 1let length = dataList.lengthdataList.forEach((ele, i) => {canvas.height = y * (i + 1);var myImage = new Image();myImage.crossOrigin = '';myImage.src = ele.url; //你自己本地的图片或者在线图片myImage.onload = () => {context.drawImage(myImage, 0, y * i,480,640);var base64 = canvas.toDataURL("image/png", encoderOptions); //"image/png" 这里注意一下var img = document.getElementById('avatar');const imageDiv = document.getElementById('image-container')imageDiv.innerHTML =`<div><a download href=${base64} style="list-style: none;text-decoration: none;color:#000">点击下载长图</a><br><br><img src=${base64}></div>`}})}this.draw(dataList, 480, 640)</script>
</body></html>

最后的效果：

这个是通过读取log文件中存放的图片地址进行拼接的，如果有的小伙伴想要自己在input框中上传图片，并把图片拼接起来可以试试下面这段代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>拼长图</title>
</head><body><input id="upload-input" type="file" accept="image/*" multiple="multiple" style="display: none;"><label for="upload-input">点击选择图片</label><div id="image-container"></div><script>// 拼出来的图片的宽度const width = 300// 拼出来的图片的质量，0-1之间，越大质量越好const encoderOptions =1const uploadInput = document.getElementById('upload-input')const imageDiv = document.getElementById('image-container')uploadInput.addEventListener('change', event => {const files = Array.from(event.target.files)filesToInstances(files, instances => {drawImages(instances, finalImageUrl => {imageDiv.innerHTML = `<div><a download href=${finalImageUrl}>点击下载</a><br><img src=${finalImageUrl}></div>`})})})// 根据图片文件拿到图片实例const filesToInstances = (files, callback) => {const length = files.lengthlet instances = []let finished = 0files.forEach((file, index) => {const reader = new FileReader()// 把文件读为 dataUrlreader.readAsDataURL(file)reader.onload = e => {const image = new Image()image.src = e.target.resultimage.onload = () => {// 图片实例化成功后存起来instances[index] = imagefinished ++if (finished === length) {callback(instances)}}}})}// 拼图const drawImages = (images, callback) => {const heights = images.map(item => width / item.width * item.height)const canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heights.reduce((total, current) => total + current)const context = canvas.getContext('2d')let y = 0images.forEach((item, index) => {const height = heights[index]context.drawImage(item, 0, y, width, height)y += height})callback(canvas.toDataURL('image/jpeg', encoderOptions))}</script>
</body></html>

效果和上面图片拼接出来的一样，大家各取所需。input框上传图片并拼接参考：https://segmentfault.com/a/1190000011684333

有不对的地方欢迎指出，一起进步呀~

前端使用canvas拼接多张图片相关推荐

使用canvas将多张图片截取拼接成一张图片
使用canvas将多张图片截取拼接成一张图片业务场景最近在做一个截取视频图片并拼接的小工具,其中就有个功能需要将多张图片截取拼接成一张图片的需求上面就是将几张图片截取拼接成一张图片的效果图实现 ...
canvas拼接图片
参考地址 canvas拼接图片效果横向拼接纵向拼接代码 html <!DOCTYPE html> <html lang="en"> <head ...
python怎样把两个图画到一起_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...
java 图片拼接_Java拼接多张图片，可以连接在一起 | 学步园
/** * Java拼接多张图片 * * @param pics * @param type * @param dst_pic * @return */ public static boolean m ...
python两张图片无缝合成一张,Python实现拼接多张图片的方法
本文实例讲述了Python实现拼接多张图片的方法.分享给大家供大家参考.具体分析如下: 这里所述计划实现如下操作: ① 用Latex写原始博文,生成PDF文档; ② 将PDF转成高清的PNG格式的图片 ...
python图像拼接_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...
Python 把几张图片拼接成一张图片，并且写上文字
把几张图片从上到下拼接成一张图片,并且写上文字 # 要拼接的图片名称是1,2,3...这样有顺序的 # 把当前目录下的所有图片从上到下拼接成一张图片 # 该图片的宽度是图片中最宽图片的宽度 # 不改变 ...
Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换
前端图片canvas,file,blob,DataURL等格式转换最近用到一些图片相关的操作,记录一下笔记. 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预 ...
python图片拼接成特定图案_Python 把几张图片拼接成一张图片，并且写上文字
# 要拼接的图片名称是1,2,3...这样有顺序的 # 把当前目录下的所有图片从上到下拼接成一张图片 # 该图片的宽度是图片中最宽图片的宽度 # 不改变原来图片的大小,所以拼接后有的地方存在未填充的地 ...
python将两张图片拼接成一张图_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...

前端使用canvas拼接多张图片

JavaScript 语法 1

JavaScript 语法 2

JavaScript 语法 3

参数值

前端使用canvas拼接多张图片相关推荐

最新文章

热门文章