sealchop-js is designed to create Chinese seal chops for display on web pages (and blogs) or for print on paper stationery (e.g., business cards, letterheads, envelopes, notebooks, etc.).
This is the web version, designed as a JavaScript module, as opposed to the other versions designed for GitHub Actions workflows or RESTful APIs.
NOTE: Available at a later date.
Long-term support for sealchop-js is available until October 31, 2028.
We start with two files: app.js and index.html.
Here is the directory structure:
├── app.js
└── index.htmlCopy and paste the following into your empty index.html file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="motet-sealchop"></div>
<script type="module" src="/app.js"></script>
</body>
</html>Copy and paste the following into your app.js. As you can see, a single line imports the object into the module. Now, you can start making Chinese seal chops.
import { SealChopObject } from 'https://motetpaper.github.io/sealchop-js/SealChopObject.js'
const chop = new SealChopObject();
const img = chop.setName('姓名字').asImageElement();
document.querySelector('#motet-sealchop').innerHTML = img;That was easy.
Now, let us start a local web server to see this in action.
In the same directory as index.html, start a localhost web server. There are many options.
- with PHP:
php -S localhost:8888 - with Python 3.x:
python3 -m http.server - with nodejs:
Constructs a new chop object. Returns this object.
const chop = new SealChopObject();Returns a JSON string.
const json = chop.toJSON();
// output
{
"p": "#ffffff",
"b": "#33aa55",
"f": "#ffffff",
"i": "#003300",
"x": "姓名字"
}Same as .toJSON().
const str = chop.toString();
const str = '' + chop;Returns a base64 data string.
// set the name, then get the base64 url
const img = new Image();
const url = chop.setName('姓名字').toDataURL();
img.src = url;Returns an HTML Image element with a chop in it.
const chop = new SealChopObject();
const img = chop.setName('姓名字').asImageElement();
document.querySelector('#motet-sealchop').innerHTML = img;Set name with a valid Chinese characters (1, 2, 3 or 4 characters). All other characters are removed. If no characters remain, it is set to null. Also, returns this object.
Sets paper color with a valid 6-digit hex color (e.g., #ffffff). Otherwise, sets it to null. Also, returns this object.
Sets background color with a valid 6-digit hex color (e.g., #ffffff). Otherwise, sets it to null. Also, returns this object.
Sets foreground color with a valid 6-digit hex color (e.g., #ffffff). Otherwise, sets it to null. Also, returns this object.
Sets ink color with a valid 6-digit hex color (e.g., #ffffff). Otherwise, sets it to null. Also, returns this object.
NOTE: These methods will be removed soon.
Same as .setName(). This method will be removed soon.