geopattern-可生成漂亮的SVG背景图案的js插件

geopattern是一款可以生成漂亮的SVG背景图案的js插件。该插件可以通过一个任意字符串来生成一个SVG模式，从而生成SVG背景图案，你可以直接使用这个SVG背景，或者将图案保存为PNG图片。

安装

可以通过npm来安装该插件。

npm install geopattern                 
                

使用方法

使用该插件需要在页面中引入jquery（可选）和geopattern.min.js文件。

<script src="js/jquery.min.js"></script> <!-- 可选 -->
<script src="js/geopattern.min.js"></script>                  
                

HTML结构

如果你要要一个容器设置背景图案，例如一个div容器。

<div id="geopattern"></div>
                

初始化插件

可以使用下面的方法来生成背景图案，传入的字符串是任意的，不同的字符串会生成不同的图案。

var pattern = GeoPattern.generate('GitHub');
$('#geopattern').css('background-image', pattern.toDataUrl());               
                

或者通过jQuery来调用插件。

$('#geopattern').geopattern('GitHub');                  
                

API

• GeoPattern.generate(string, options)：返回一个新的背景图案。
  • string：使用SHA1算法来生成哈希值，生成的哈希值用于生成背景图案的种子。
  • options.color：指定精确的背景颜色。CSS十六进制颜色值。
  • options.baseColor：用于控制生成背景图案颜色的基本颜色。CSS十六进制颜色值。
  • options.generator：生成的图案。所有的基本图案可以参考这里。
• Pattern.color：获取背景图案的颜色，返回一个十六进制的字符串。

  GeoPattern.generate('GitHub').color // => "#455e8a"
  

• Pattern.toString() 和 Pattern.toSvg()：获取图案的SVG字符串。
• Pattern.toBase64()：以Base64编码的方式获取SVG图案。
• Pattern.toDataUri()：以data URI的方式获取SVG图案。例如：data:image/svg+xml;base64,PHN2ZyB...。
• Pattern.toDataUrl()：作为CSS background-image属性的值方式来获取SVG图案。

geopattern SVG图案插件的github地址为：https://github.com/btmills/geopattern