好用的合成海报插件 huyue-tools-composecanvas

这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战

工作中当遇到需要前端合成海报分享的时候，我们一般会使用canvas进行合成

什么是canvas

<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。

合成这种海报不算难，就是比较麻烦，尤其元素较多的时候，这里推荐一个插件包huyue-tools-composecanvas 其中使用简单的配置即可生成我们想要的结果；例如

这个例子是三个图片，加一个段文字生成的

推荐一个好用的合成海报的npm包

www.npmjs.com/package/huy…

它使用数组配置文件，简单快捷，并自动对高分屏做大小适配。

安装

npm i huyue-tools-composecanvas -save

更新

npm update huyue-tools-composecanvas

引入

import composecanvas from 'huyue-tools-composecanvas'

例子说了这么多，大家其实看下例子，大概就能理解啦：如下

import composecanvas from 'huyue-tools-composecanvas'
window.onload = function() {
      composecanvas.compose(
        [400, 800], //背景画布大小
        [ //画布上内容
          {
            src: './05.jpeg',
            type: "image",
            pos: [0, 0, 1000, 800]
          },
          {
            src: './xx.png',
            type: "image",
            mode: "waiting",
            pos: [100, 310, 329, 494]
          },
          {
            src: './er.png',
            type: "image",
            pos: [10, 10, 100, 100]
          },
          {
            text: "这是合成的文字",
            type: "text",
            pos: [60, 120],
            style: {
              color: "#ff0",
              font: "12px serif",
              textAlign:'center', // 左右居中
              textBaseline:'middle' // 上下居中
            }
          }
        ],
        function(img) { //回调函数
          console.log(img);
          var imgDom = document.createElement("img");
    　　　　//设置 img 图片地址
          imgDom.src = img;
          document.getElementById("hello").appendChild(imgDom);
        }
      );
    };

参数说明

参数顺序	说明
背景画布大小	Array
画布上内容	Array
回调函数	function

背景画布参数

参数顺序	说明
宽度	Number
高度	Number

画布上内容--图片

参数	说明
type	image 表示是图片类型
src	图片地址（如果有跨域问题，想要服务器设置跨域）
pos	为止信息依次为（x轴，y轴，图片宽，图片高）4个参数

画布上内容--文字

参数	说明
type	text 表示是文字
text	文字内容
pos	文字信息依次为（x轴，y轴）2个参数
style.font	文字的相关信息（大小，字体）
style.textAlign	文字居中方式（这里的参考物是y轴的坐标）比如设置textAlign:'center'，那么中心点是y坐标位置
style.textBaseline	行基线（上下居中）

回调函数参数

参数	说明
img	base64为图片内容

注意事项

由于canvas 不是矢量的，所以单位只能是px
高清适配，如果window.devicePixelRatio 大于1 会放大图片，大家只需要在显示的图片上使用样式控制一下即可，例如

   #hello img {
      width: 100%;
      height: 100%
     }

关于层级别的控制，是谁在后面谁的层级比较高。我们只需要关注画布内容的那个数组的顺序即可