图片/文本像素化工具库 pixel-swiper

码农软件 · 软件分类 · 常用JavaScript包 · 2019-04-04 14:13:15

软件介绍

pixel-swiper 是一个用 canvas 实现的工具库,将图片(文本)像素化,附带粒子切换效果。

DEMO 1

gif preview

DEMO 2

gif preview

DEMO 3

gif preview

DEMO 4

gif preview

Browser

<script src="yourStaticPath/pixelSwiper.js"></script>

Default import

npm install pixel-swiper

import pixelSwiper from 'pixel-swiper';

Usage

const swiper   = new pixelSwiper('#c', {
      width: 250,
      height: 100,
      particleSize: 4,
      animation: true,
      randomPosition: true,
      velocity: 5,
      shape: 'square',
      swipeList: [
        {
          paddingTop: 10,
          url: 'data:image/jpeg;base64,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',
          duration: 3000,
        },
        {
          text: 'pixel',
          paddingLeft: 5,
          fontSize: 80,
          color: '#F56C6C',
          duration: 3000,
        },
        {
          text: 'swiper',
          fontSize: 80,
          randomParticleColor: true,
          duration: 3000,
        },
      ]
});

本文地址:https://codercto.com/soft/d/2844.html

互联网时代

互联网时代

《互联网时代》主创团队 / 北京联合出版公司 / 2015-2-1 / 49.80元

【编辑推荐】 1、人类正进入一个充满未知的时代,《互联网时代》不仅告诉你现在,还告诉你未来。 2、中央电视台《互联网时代》是全球第一部全面、系统、深入、客观解析互联网的纪录片,同名图书容量巨大,除纪录片内容,更包含大量尚未播出的内容。 3、中央电视台继《大国崛起》《公司的力量》《华尔街》等之后的又一重磅力作。10个摄影组,制作近3年,在全球14个国家和地区拍摄,6位“互联网之父”......一起来看看 《互联网时代》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器