canva怎么拼接图片_HTML5教程 如何利用canvas把多张图合并成一张图片

本篇教程探讨了HTML5教程 如何利用canvas把多张图合并成一张图片，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

需求分析，根据当前网页中的几张图片，在手机上长按，保存图片到相册或者发送给好友。

drawCanvas(){

var self = this;

var imgsrcArray = [

require('@/page/agent/agentexpand/img/bg.jpg'),

'data:image/jpeg;base64,'+this.codeUrl

];

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

canvas.width = 750;

canvas.height = 1333;

var imglen = imgsrcArray.length;

var drawimg = (function f(n){

if(n 

var img = new Image();

img.crossOrigin = 'Anonymous'; //解决跨域问题

img.onload = function(){

//ctx.save();

if(n == 0){

ctx.drawImage(img,0,0,750,1333);

}else{

ctx.drawImage(img,466,574,210,210);

}

f(n+1);

}

img.src = imgsrcArray[n];

}else{

self.downloadUrl = canvas.toDataURL("image/jpeg");

self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");

}

})(0);

}

调用方式：

注：上面的调用是使用的vue语法。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！