https://github.com/simon-he95/dot-image

一个让图片变成点阵的组件
https://github.com/simon-he95/dot-image

canvas dot-image

Last synced: 20 days ago
JSON representation

一个让图片变成点阵的组件

• Host: GitHub
• URL: https://github.com/simon-he95/dot-image
• Owner: Simon-He95
• Created: 2022-06-29T05:42:26.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-22T03:01:34.000Z (10 months ago)
• Last Synced: 2024-11-24T20:49:18.975Z (about 2 months ago)
• Topics: canvas, dot-image
• Language: TypeScript
• Homepage: https://dot-image.netlify.app/
• Size: 433 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
## Dot Image

[live demo](https://dot-image.netlify.app)

可以从本地上传图片,查看效果

## 介绍

将一个图片转换为点图

## 安装

```bash

npm i dot-image

```

## Props

- src 图片地址

- color 图片颜色 默认原始图片的像素颜色

- fontWeight 像素大小

- direction 控制绘制的方向 默认为纵向

## 使用说明

- main.ts

```js

import { DotImage } from 'dot-image'

app.component('DotImage', DotImage)

```

- vue script

```js

import img from '../public/3.png'

```

- vue template

```html

```

- JS

```js

const dotImage1 = new DotImageCanvas(kb, '', 3, 'transparent')

dotImage1.append('.dotImage')

```

- html

```html



```