A functional library for watermarking images in the browser

Overview

watermark.js Build Status

A functional library for watermarking images in the browser. Written with ES6, and made available to current browsers via Babel. Supports urls, file inputs, blobs, and on-page images.

Note: For anyone that is interested: I ported this to a ClojureScript library called Dandy Roll.

Tested Browsers

Any browser supporting File and FileReader should work. The following browsers have been tested and work:

  • IE10 (Windows 7)
  • Chrome 42 (OS X 10.10.3)
  • Firefox 38 (OS X 10.10.3)
  • Safari 8.0.6 (OS X 10.10.3)
  • Opera 29.0 (OS X 10.10.3)

Please feel free to update this list or submit a fix for a particular browser via a pull request.

Installing

watermark.js is available via npm and bower:

# install via npm
$ npm install watermarkjs

# install via bower
$ bower install watermarkjs

Usage

// watermark by local path
watermark(['img/photo.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// load a url and file object
const upload = document.querySelector('input[type=file]').files[0];
watermark([upload, 'img/logo.png'])
  .image(watermark.image.lowerLeft(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// watermark from remote source
const options = {
  init(img) {
    img.crossOrigin = 'anonymous'
  }
};
watermark(['http://host.com/photo.jpg', 'http://host.com/logo.png'], options)
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

Building

Before building or testing, install all the deps:

npm i

There is an npm script you can run to build:

npm run build

Or to kick off the file watcher and build as you make changes, run the start task:

$ npm start

Testing

There is an npm script for that too!:

$ npm test

This library uses the Jest testing framework. Due to some current issues with Jest, Node 0.10.x is required to run the tests.

Examples

You can view examples and documentation by running the sync task via npm:

$ npm run sync

The examples demonstrate using watermark images and text, as well as a demonstration of uploading a watermarked image to Amazon S3. It is the same content hosted at http://brianium.github.io/watermarkjs/.

Development

Running npm run dev will start a browser and start watching source files for changes.

Motivation

  • Not every server has image libraries (shared hosting anyone?)
  • Not every server has reliable concurrency libs for efficient uploading (shared hosting anyone?)
  • JavaScript is fun and cool - more so with ES6

Clearly watermarking on the client has some limitations when watermarking urls and on-page elements. The curious can find urls for non-watermarked images, but it is likely that most average users won't go down this path - keeping this soft barrier useful. However!...

watermark.js has the ability to accept file inputs as a source for watermarking. This makes it easy to preview, watermark, and upload without the non-watermarked image ever becoming public. Check out the uploading demo to see this in action.

This tool certainly shines in admin or CMS environments where you want to generate watermarks and upload them asynchronously where it would not be possible or preferable on the server. One less thing the server has to do can be a good thing :)

Suggestions? Improvements?

Please open issues or pull requests if you have bugs/improvements.

Comments
  • Upload image in portrait format

    Upload image in portrait format

    Hello,

    I'm having an issue with the upload part. When I'm trying to upload an image in portrait format, I get it back in landscape format.

    It seems to be the case too in the upload demo (http://brianium.github.io/watermarkjs/uploading.html)

    Any idea?

    Thanks

    opened by jeremie-huy 8
  • Convert this to a backend plugin

    Convert this to a backend plugin

    Convert this into a backend plugin so that with nodejs we can watermark the image before download time.

    Ideally this would become a part of a grunt or gulp task automation tool.

    opened by AdamHess 6
  • Multiple Image Issue

    Multiple Image Issue

    I have multiple product images in a "c:forEach" statement on the site and each product has its own row and product image div but the code appears to be taking the image out of the product image div and merging all the images in one div causing all the images to flow right below each other and not in their respective div's. Just wondering if you have ever seen this or if i may be forgetting something. Thank You! capture

    opened by JeffWeb9999 5
  • canvas caching/pooling

    canvas caching/pooling

    We use watermarkjs in an application have found that canvases to not get garbage collected in IE. For other places in the system that are using canvases, we implemented a pooling system to reuse canvases.

    Would like to know how to get watermarkjs to either do its own canvas pooling or how to add what we are doing and have one shared canvas pool.

    opened by jakrzysztow 5
  • cross origin not working

    cross origin not working

    I already use the init function for cross origin, but still have error like this: Image from origin 'https://xxx' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

    opened by hdriqi 4
  • How to rotate the watermark text?

    How to rotate the watermark text?

    Its not an issue actually but just want to know if i can rotate the text like slanting or about like this ' / '. Hoping for your response. Thank you for the help.

    opened by DatzMe101 4
  • Allow developer to select type and encoderOptions, based on HTMLCanvasElement.toDataURL() paramters

    Allow developer to select type and encoderOptions, based on HTMLCanvasElement.toDataURL() paramters

    This is somewhat relating to issues #34 and #42

    Even though this does not solve the users issues with retaining EXIF data. This will give the users the ability to have the resulting image be in a jpeg format. Which then they can use additional libraries to extract EXIF data from the original image, and add to the resulting image. I feel the addition of an EXIF feature would require a lot more work, or a lot more additional third party libraries, resulting in bloat that would affect users not needing such functionality. I personally feel it should be the responsibility of the user to build these features outside of the already lean and clean watermarkjs library.

    These additions also improves the capabilities of watermarkjs by selecting the image type, and compression/quality allowing for smaller image sizes on more details photographs. The original experience I was facing, was using a jpg image of 134kb, adding a watermark, having a result being 5-6mb png. This feature has reduced the image back down to around 140kb which helps a lot in my scenario, uploading from a client browser to an s3 bucket, after watermark generation.

    I was having issues building the current code base as babel has updated into newer versions, which only support webpack 2.x. I have modified the webpack.config.js to use a specific version of babel-loader which has solved said issues. The compiled/minified code has changed just slightly, but is essentially the same as before, aside from my additions.

    /lib/canvas/index.js has been updated to accept the parameters standard to the html canvas function

    /lib/index.js has been updated with additional options parameters, and API documentation

    /examples/docs.html has been updated to include usage of said parameters

    package.json now includes [email protected] in devDependencies

    I have tested this on a windows 10 system, and an OSX system from fresh installs, and I have not had any issues.

    PS: In reference to the EXIF issue, there is a stack overflow topic related to the exact issue with example solutions https://stackoverflow.com/questions/18297120/html5-resize-image-and-keep-exif-in-resized-image

    opened by skliffmueller 3
  • When use other web's image get error

    When use other web's image get error

    Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    I am using with facebook profile picture but i got error

    opened by munkh-altai 3
  • Browserify - can't find module

    Browserify - can't find module

    I'm having an issue where when adding watermarkjs via Browserify that it can't find the ./lib/images, ./lib/functions etc modules in node_modules/watermarkjs/dist.

    I'm just using watermark = require('watermarkjs')

    Any thoughts?

    opened by rogchap 3
  • Each loop

    Each loop

    Hi! I have same issue with foreach loop. I'm trying to replace several images but it doesn't work. var images = document.getElementsByClassName('watermark'); for(var i=0; i<images.length; i++){ watermark([images[i].src, logo]) .image(watermark.image.lowerRight(1)) .then(function(img){ images[i].src = img.src; // Undefined images[i] here }); }

    opened by xzdshr 2
  • Upload image with hard coded watermark?

    Upload image with hard coded watermark?

    I would like to use the same watermark for all uploaded images. Using the code from the upload example, how can I go about removing the select watermark field and upon uploading an image, populate the preview container with the uploaded image and hard coded watermark?

    opened by brettmcdade 2
  • Bump handlebars from 4.5.1 to 4.7.6

    Bump handlebars from 4.5.1 to 4.7.6

    Bumps handlebars from 4.5.1 to 4.7.6.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    Commits
    Maintainer changes

    This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Re-init watermark with selected dropdown values

    Re-init watermark with selected dropdown values

    Everything works fine when page is getting render. I am trying to updated watermark image dynamically from dropdownlist. I have set of list values in select dropdown and I have saved each watermark image as data attribute of each option. When dropdown value changes I am passing selected value image as parameter to call watermark function but its not working once it gets render first time..

    opened by surajcreator 0
  • Bump elliptic from 6.5.1 to 6.5.3

    Bump elliptic from 6.5.1 to 6.5.3

    Bumps elliptic from 6.5.1 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Multiple line text watermark.

    Multiple line text watermark.

    Is there a way to have multiple line text as a watermark? When the length of the text is long, it gets truncated and it would be nice to have multiple lines of text as a watermark.

    opened by paulonevrything 0
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

John Christensen 399 Jan 3, 2023
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
Functional reactive UI library

reflex Reflex is a functional reactive UI library that is heavily inspired by (pretty much is a port of) elm and it's amazingly simple yet powerful ar

Mozilla 364 Oct 31, 2022
Typescript library for functional programming.

Sa Lambda Typescript library for functional programming. Document TODO Either Maybe Iterator Pipe & Flow Task (Promise-Like) some math utils Installat

SoraLib 9 Dec 6, 2022
A functional, immutable, type safe and simple dependency injection library inspired by angular.

func-di English | 简体中文 A functional, immutable, type safe and simple dependency injection library inspired by Angular. Why func-di Installation Usage

null 24 Dec 11, 2022
validation-first schema library with a functional api

zap ⚡ zap is a validation-first schema library with a functional Api. Some major features are Flexible refinement and validation API Transformation, C

Spaceteams GmbH 19 Dec 5, 2022
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!

⚠️ Attention! This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To impr

Zongbin 191 Dec 30, 2022
Jargon from the functional programming world in simple terms!

Functional Programming Jargon Functional programming (FP) provides many advantages, and its popularity has been increasing as a result. However, each

hemanth.hm 18.1k Jan 4, 2023
a full functional discord bot to send moomoo.io bots

MooMooBot a discord bot which does moomoo.io stuff commands !send <server> <name> ex: !send 8:0:0 Nuro !token (generates a token to test if there's n

Nuro 4 Jun 1, 2022
Firebase Angular Skeleton - Quickly create an application with a fully functional authentication, authorization and user management system.

FAngS - Firebase Angular Skeleton FAngS lets you quickly create an application with a fully functional authentication, authorization and user manageme

Ryan Lefebvre 7 Sep 21, 2022
A fun and functional way to write regular expressions (RegExp)

funexp A fun and functional way to write regular expressions (RegExp). FunExp is a useful tool for larger projects that depends on RegExp to do heavy

Matheus Giovani 2 Feb 7, 2022
Fun λ functional programming in JS

fp-js JavaScript Functional Programming Motivation This purposed for learning functional programming (just that). Features Auto-Curry Option Tooling s

RiN 6 Feb 4, 2022
A featherweight, functional frontend JS framework

flub.js With inspiration from React and Flutter, flub is a minimal JS framework (core sits little over 1 kB) for quickly prototyping basic JS frontend

Loren Kuich 7 Dec 9, 2022
A repository demonstrating functional techniques with C# 10 and the similarities between JavaScript, TypeScript, and C#.

Building up from JavaScript to TypeScript to C# 10 and .NET 6 This repository is meant to highlight some of the various functional techniques availabl

Charles Chen 67 Dec 30, 2022