前端使用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中的图片地址，把这些图片拼接在一起

 最后的效果：

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

    
    



    
    点击选择图片
    


    

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

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