最近项目中遇到一个问题，如何将多张图片合成一张，如上图，找了好多方案。
第一种使用原生js解决，创建一个canvas
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = "2.png";
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '" width="328" height="526"/>');
}必须确保图片、js文件、html在同一域名下，否则会报跨域错误。第二种，使用插件，merge-images.js
merge-images.js多张图片合并成一张图片插件,可设置位置透明度高宽
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
.then(b64 => document.querySelector('img').src = b64);完整的项目webide地址为http://editor.bfw.wiki/Editor/Open.html?projectid=15747515936364210028&file=mergeimg.html可以在线编辑预览效果
{{collectdata}}
网友评论0