merge-images.js多张图片合并成一张图片插件,可设置位置透明度高宽

merge-images.js多张图片合并成一张图片插件,可设置位置透明度高宽

merge-images.js多张图片合并成一张图片插件,可设置位置透明度高宽

使用方式:

第一步引入插件

 <script src="js/merge-images.js"></script>

第二步配置参数

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);

还可设置图片的合并位置

mergeImages([
  { src: 'body.png', x: 0, y: 0 },
  { src: 'eyes.png', x: 32, y: 0 },
  { src: 'mouth.png', x: 16, y: 0 }
])
  .then(b64 => ...);

还可设置透明度

mergeImages([
  { src: 'body.png' },
  { src: 'eyes.png', opacity: 0.7 },
  { src: 'mouth.png', opacity: 0.3 }
])
  .then(b64 => ...);

高宽也可设置

mergeImages(['/body.png', '/eyes.png', '/mouth.png'], {
  width: 128,
  height: 128
})
  .then(b64 => ...);

完整的项目webide地址为http://editor.bfw.wiki/Editor/Open.html?projectid=15747515936364210028&file=mergeimg.html

可以在线编辑预览效果


立即下载merge-images.js查看所有js插件

网友评论0

程序员在线工具箱