canvas 合成图片文字 快捷方式

0. 安装

npm i huyue-tools-composecanvas -save

0. 更新

npm update huyue-tools-composecanvas

1. 引入

import composecanvas from 'huyue-tools-composecanvas'

2. 使用

window.onload = function() {
      // var compose = document.querySelectorAll(".compose");
      // var src_arr = [];
      // compose.forEach(node => {
      //   src_arr.push(node.src);
      // });
      composecanvas.compose(
        [400, 800],
        [
          {
            src: './05.jpeg',
            type: "image",
            mode: "waiting",
            pos: [0, 0, 1000, 800]
          },
          {
            src: './xx.png',
            type: "image",
            mode: "waiting",
            pos: [100, 310, 329, 494]
          },
          {
            src: './er.png',
            type: "image",
            mode: "waiting",
            pos: [10, 10, 100, 100]
          },
          {
            text: "这是合成的文字",
            type: "text",
            mode: "waiting",
            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);
        }
      );
    };

由于canvas 不是矢量的，所以单位只能是px