1.0.71 • Published 4 years ago

huyue-tools-composecanvas v1.0.71

Weekly downloads
1
License
ISC
Repository
-
Last release
4 years ago

canvas 合成图片文字 快捷方式

  1. 安装
npm i huyue-tools-composecanvas -save
  1. 更新
npm update huyue-tools-composecanvas
  1. 引入
import composecanvas from 'huyue-tools-composecanvas'
  1. 使用
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

1.0.71

4 years ago

1.0.7

4 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago