Coder Social home page Coder Social logo

canvas-watermark's Introduction

cam-mark

npm NPM Visitors
This is an watermark generator for a bunch of image with a box of theme that you can fully customize!

This package has got inspiration from kana2011th/exifmark. If you love python, don't forget to check this repository!

Table of Content


Usage

Installation

For installation you can use 2 ways

  1. Cloning this Repository and use global installation like this
git clone https://github.com/dethMastery/canvas-watermark.git

and then

cd canvas-watermark
yarn global add .
  1. Installing through npmjs
yarn global add com-mark

How to use this tool?

Just run like this

com-mark <Folder Path> -t <Album Title>

And now see the result in

<Folder Path>/marked

Configuration

For configuration part. I used JSON file that can easily help to config this frame. Don't worry if you install this package and don't see config file try to run once or add camMark.config.json to your user root folder and add this box of code to your file.

{
  "theme": "frame",
  "colors": {
    "backgroundColor": "#2e2f2f",
    "titleColor": "whitesmoke",
    "modelColor": "whitesmoke",
    "settingColor": "whitesmoke",
    "watermarkColors": {
      "line1": "whitesmoke",
      "line2": "#fe6e6f"
    }
  },
  "fonts": {
    "titleFont": "Sarabun",
    "modelFont": "Sarabun",
    "settingsFont": "Sarabun",
    "waterMarkFonts": {
      "line1": "Sarabun",
      "line2": "Sarabun"
    }
  },
  "watermark": {
    "line1": "dethz",
    "line2": "2018"
  }
}

It's okay if you want to change anything but making sure to read theme name in next section and some of this reminder :)

  • in colors section must be in HEX, html color format or rgba
  • before changing fonts in fonts section PLEASE install font in your computer first and please making sure that font name is same to which is show in your font family

Frame Theme name

  1. frame

    frame

    Reminder:

    • This style is really up to your color style But not really flexible for someone
    • This style Really use all of config in config file and yes please fill it every form! (- w -)

  2. minimal

    minimal

    Reminder:

    • Background of This style Should be in 'rgba' and set 'alpha' below 0.6 (In example picture, Alpha value is 0.4 [ rgba(0, 0, 0, 0.4) ])

  3. detailed

    detailed

    Reminder:

    • background config doesn't work here :x
    • In Watermark Part, color that used in this part is only color in
      watermarkColors -> line1
    • Don't forgot to check your color before publish all of your pictures :)

  4. detailed-frame

    detailed-frame

    Reminder:

    • background config doesn't work here :x
    • In Watermark Part, color that used in this part is only color in
      watermarkColors -> line1
    • Background of This style Should be in 'rgba' and set 'alpha' below 0.6 (In example picture, Alpha value is 0.4 [ rgba(0, 0, 0, 0.4) ])

made with ๐Ÿค by Suphakit P.

canvas-watermark's People

Contributors

dethmastery avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.