https://github.com/youngluo/merge-image

利用 canvas 在图片上合成文字，文字内容可根据图片宽度自适应。
https://github.com/youngluo/merge-image

canvas image merge

Last synced: 1 day ago
JSON representation

利用 canvas 在图片上合成文字，文字内容可根据图片宽度自适应。

• Host: GitHub
• URL: https://github.com/youngluo/merge-image
• Owner: youngluo
• Created: 2015-08-10T09:32:39.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T10:17:42.000Z (almost 7 years ago)
• Last Synced: 2025-01-18T07:19:05.122Z (24 days ago)
• Topics: canvas, image, merge
• Language: JavaScript
• Homepage: http://youngluo.github.io/merge-image/example
• Size: 2.35 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# merge-image

> 利用canvas在图片上合成文字，文字内容可根据图片宽度自适应。

## 示例

[点击查看](http://youngluo.github.io/merge-image/example)

## 使用

  ```

    

    

    

      new MergeImage(

        {

          text: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。',

          imgUrl: 'demo.jpg',

          width: 480,

        },

        function (dataURL) {

          document.getElementById('img').src = dataURL

        }

      )

    

  ```

## options

* imgUrl：*（必选）* 图片路径

* text：*（必选）* 文字内容

* width：*（可选）* 合成的图片宽度，默认为图片原始大小（高度自适应）

* backgroundColor：*（可选）* 背景层颜色，默认为`rgba(0, 0, 0, .7)`

* padding：*（可选）* 文字相对背景层的padding值，默认为5

* lineHeight：*（可选）* 文字的lineHeigh值，默认为20

* fontSize：*（可选）* 文字大小，默认为14px

* color：*（可选）* 文字颜色，默认为`#fff`

## callback(dataURL)

  * dataURL：合成图片的dataURL