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?

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

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

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.

hi
i have xampp installation on windows
i have downloaded watermark and when i go to examples/text.html nothing happens in my browser...
is it necesary some kind of configuration or installation?

what i want to do is not put the watermark on picture.
i need to have a watermak on the browser.

thanks very much for your help.

Consider the use case if I need to cover all the space of the source image with watermark. So use watermark as a tile: an example of what I want to achieve - tiled watermark image

For now I see the solution only in combing multiple atPos from the docs calls, depending on the size

Something like this:

// getX, getY - functions
let intermediate;
let counter = 0
const nextStep = () => {
  counter++;
  if counter < NEEDED_AMOUNT {
    applySingleWatermark(intermediate || '/img/my_source_image.png')
  }
}
const applySingleWatermark = (source) => {
 watermark([source, '/img/my_watermark.png'])
    .image(watermark.image.atPos(getX, getY, 0.6)).
    .then(data => {
      intermediate= data
      nextStep()
   )
}

Is there a better way?

If not, do you see a value in creating such functionality and submitting an MR ?

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.

In reference to #34 and #42

With the previous issues arising around retaining EXIF data, would provide added convenience in specific situations. But the implementation has some potential issues, which I'd like to address here for further discussion.

The first issue is EXIF orientation of jpg images. The current effect is when you are referencing a jpg that requires to be rotated based on EXIF data, the image is not being rotated within the library. If the EXIF data were to be merged into the new image, you would then have a problem with the text/overlays/watermarks being in the wrong orientation, now that they have been embedded into the image. Example
The solution to this would be to perform rotation of the images on initial load. But then the EXIF orientation data would be incorrect on the new image as the raw image has been rotated. This field would need to be updated if we expect to retain the EXIF data.

The next issue I can see is a situation where you include multiple images with EXIF data. What takes priority? Just the first image? Is there a way to store multiple EXIF records on one image? Or would an option to force user defined EXIF data be better?

Another consideration on a performance standpoint, would there be a way to copy the EXIF headers as one big binary chunk, and attach it to the new image. Instead of having to parse and recompile the data? And in reference to the rotation data, It might be easier to just pull the specific value from this chunk, instead of parsing the entire binary.
This stack overflow topic does provide such a script in Base64 image data where it's just copying the EXIF chunk and merging it into a new image
https://stackoverflow.com/questions/18297120/html5-resize-image-and-keep-exif-in-resized-image

//Based on MinifyJpeg
//http://elicon.blog57.fc2.com/blog-entry-206.html

var ExifRestorer = (function()
{
   
	var ExifRestorer = {};
	 
    ExifRestorer.KEY_STR = "ABCDEFGHIJKLMNOP" +
                         "QRSTUVWXYZabcdef" +
                         "ghijklmnopqrstuv" +
                         "wxyz0123456789+/" +
                         "=";

    ExifRestorer.encode64 = function(input)
    {
        var output = "",
            chr1, chr2, chr3 = "",
            enc1, enc2, enc3, enc4 = "",
            i = 0;

        do {
            chr1 = input[i++];
            chr2 = input[i++];
            chr3 = input[i++];

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
               enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
               enc4 = 64;
            }

            output = output +
               this.KEY_STR.charAt(enc1) +
               this.KEY_STR.charAt(enc2) +
               this.KEY_STR.charAt(enc3) +
               this.KEY_STR.charAt(enc4);
            chr1 = chr2 = chr3 = "";
            enc1 = enc2 = enc3 = enc4 = "";
        } while (i < input.length);

        return output;
    };
    
    ExifRestorer.restore = function(origFileBase64, resizedFileBase64)
    {    	
        if (!origFileBase64.match("data:image/jpeg;base64,"))
        {
        	return resizedFileBase64;
        }       
        
        var rawImage = this.decode64(origFileBase64.replace("data:image/jpeg;base64,", ""));
        var segments = this.slice2Segments(rawImage);
                
        var image = this.exifManipulation(resizedFileBase64, segments);
        
        return this.encode64(image);
        
    };


    ExifRestorer.exifManipulation = function(resizedFileBase64, segments)
    {
            var exifArray = this.getExifArray(segments),
                newImageArray = this.insertExif(resizedFileBase64, exifArray),
                aBuffer = new Uint8Array(newImageArray);

            return aBuffer;
    };


    ExifRestorer.getExifArray = function(segments)
    {
            var seg;
            for (var x = 0; x < segments.length; x++)
            {
                seg = segments[x];
                if (seg[0] == 255 & seg[1] == 225) //(ff e1)
                {
                    return seg;
                }
            }
            return [];
    };


    ExifRestorer.insertExif = function(resizedFileBase64, exifArray)
    {
            var imageData = resizedFileBase64.replace("data:image/jpeg;base64,", ""),
                buf = this.decode64(imageData),
                separatePoint = buf.indexOf(255,3),
                mae = buf.slice(0, separatePoint),
                ato = buf.slice(separatePoint),
                array = mae;

            array = array.concat(exifArray);
            array = array.concat(ato);
           return array;
    };


    
    ExifRestorer.slice2Segments = function(rawImageArray)
    {
        var head = 0,
            segments = [];

        while (1)
        {
            if (rawImageArray[head] == 255 & rawImageArray[head + 1] == 218){break;}
            if (rawImageArray[head] == 255 & rawImageArray[head + 1] == 216)
            {
                head += 2;
            }
            else
            {
                var length = rawImageArray[head + 2] * 256 + rawImageArray[head + 3],
                    endPoint = head + length + 2,
                    seg = rawImageArray.slice(head, endPoint);
                segments.push(seg);
                head = endPoint;
            }
            if (head > rawImageArray.length){break;}
        }

        return segments;
    };


    
    ExifRestorer.decode64 = function(input) 
    {
        var output = "",
            chr1, chr2, chr3 = "",
            enc1, enc2, enc3, enc4 = "",
            i = 0,
            buf = [];

        // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
        var base64test = /[^A-Za-z0-9\+\/\=]/g;
        if (base64test.exec(input)) {
            alert("There were invalid base64 characters in the input text.\n" +
                  "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                  "Expect errors in decoding.");
        }
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        do {
            enc1 = this.KEY_STR.indexOf(input.charAt(i++));
            enc2 = this.KEY_STR.indexOf(input.charAt(i++));
            enc3 = this.KEY_STR.indexOf(input.charAt(i++));
            enc4 = this.KEY_STR.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            buf.push(chr1);

            if (enc3 != 64) {
               buf.push(chr2);
            }
            if (enc4 != 64) {
               buf.push(chr3);
            }

            chr1 = chr2 = chr3 = "";
            enc1 = enc2 = enc3 = enc4 = "";

        } while (i < input.length);

        return buf;
    };

    
    return ExifRestorer;
})();

Hi pro,
I have bug about
Watermarker([originSrc], options) .image(watermarkImage).render().image(watermarkText).then(function (img) { console.log(image.src) // sometime = data, }
On firefox all version, Thanks

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!

I have a button to generate the image with random text, so far so good, but if I click again, it adds the new image to the side, I wanted the previous one to be replaced by the current one. How could he do that?

watermark(["img/bg.jpg"]) .image(ur(naoSei, "48px Josefin Slab", "#fff", 0, 48)) .then(function(img) { var kk = document.getElementById("upper-right").appendChild(img); var aff = document.getElementById("upper-right").src=img; var inocencia = document.getElementById("upper-right").innerHTML; kk.classList.add("img-responsive") is_img(kk); });

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?

add function that returns image url

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
});
}

Nice lib!
Is there a way to repeat the watermark printing it in many places?
Something like a grid of the same watermark...

Thank you!

The EXIF data is lost.

If you use an image generated by a mobile device, after adding a watermark, you'll get a watermarked image with a different orientation.

Are you accepting pull requests for this?

Hi,
As long as watermark printed by js, is it possible for a user to get original images by Inspector or any other tool?

Sometimes, when watermark is applied for the first time, it zooms out picture. After changing watermark position photo is back to normal. Demo:

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.

In app android system was used? In my test app which can not be used. Requesting for help. Thank you

My users will be uploading different size images. Is there a way to make sure either we resize the uploaded image OR make the watermark cover 100% width?

i want to make text watermark with long. how to wrap text ?

my config:

node 10.14.2
npm 6.4.1

To build, I tried running
npm i
npm run build

I am getting below error

ERROR in ./index.js
Module not found: Error: Cannot resolve module 'babel' in /home/ajay/watermarkjs

 @ ./index.js 2:17-39

Could you please let me know how to build it?

Hi,
I am having trouble to use your plugin on several images where I loop through with a $('element').each(function...

If I try to append the img to $(this) it doesnt work, but if I write the class hardcoded it works.
For me it looks like the this part .then(function(img){ $(this).append(img); }); doesn't work because "this" is not defined anymore...

Am I doing something wrong here?

Watermartkjs does not work in IOS mobiles when you are using .load() or .render() function

the watermark factory should be able to take files and urls:

watermark(['url1', fileObj]);

dist should contain a version that includes the es6 polyfill, and one that doesn't for people using multiple es6 libs

Integrated this plugin with angularjs as below

myApp.directive('waterMark', function($timeout) {
    return {
        restrict: 'EA',
        link: function($scope, $element) {
            //$element.on('load', function(){

                $scope.videoSnapshotPath = 'img/watermark.png';
                $scope.watermarkLogoPath = 'img/logo.jpg';

                //$timeout(function() {
                    watermark([$scope.videoSnapshotPath, $scope.watermarkLogoPath])
                        .image(watermark.image.lowerRight(0.5))
                        .then(function (img) {
                            document.getElementById('lower-left').appendChild(img);
                        })
                //}, 2);
            //})
        }
    }
});

Throws below exception

TypeError: document.getElementById(...) is null
document.getElementById('lower-left').appendChild(img);

How would I watermark an image I can only parse as a base 64 string?

Integrated this plugin with our Angular app but I need to do the following changes

Select option

<select ng-model="data.selectedPosition" ng-options="position.name for position in data.waterMarkImgPosition track by position.id" id="mySelect" name="mySelect" class="form-control ng-pristine ng-valid ng-not-empty ng-touched" style=""><option label="Lower Right" value="1" selected="selected">Lower Right</option><option label="Lower Left" value="2">Lower Left</option><option label="Upper Right" value="3">Upper Right</option><option label="Upper left" value="4">Upper left</option><option label="Center" value="5">Center</option></select>

1. How to set Image size for both Select the image to watermark & watermark image ?
2. How to apply position using select options rather than radio button ?
3. Any other angular plugin for the watermarking ?

Also it gives error in console at upload.js (line 176, col 7)

TypeError: document.getElementById(...) is null
document.getElementById(id).addEventListener('keyup', function () {

Tried changing upload.js from radio button to select option like below but not working

position = document.querySelector('input[type=radio]:checked').value;
position = document.querySelector('option:checked').value;

Please guide and help!
Thanks.

Kind of related to #34, the watermarked image is returned as a PNG image object even though the original object was a JPEG. Is there a way to return the watermarked image as a JPEG so EXIF data can be written to it?

Hello guys,

I opened this question in "lightGallery", I received an orientation almost 1 year ago ... but I was not able to implement it.

sachinchoolur/lightGallery#726

Today my clients are charged me the use of the watermark.

Looking at this question, can anyone help me?

` setTimeout(function () { //ensure font faces are loaded
// lower right positioning
var text = watermark.text;

  watermark(['img/shepherd.jpg'])
    .image(text.lowerRight('watermark.js', '48px Josefin Slab', '#fff', 0.5))
    .then(function (img) {
      var pre = document.querySelector('#lower-right');
      pre.parentNode.insertBefore(img, pre);
    });
	    }, 1000);`

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.

test different browsers, maybe get one of those fancy saucelabs badges

I have a nodejs project that i want use this module.
when i run this project i will get this problem:
ReferenceError: Image is not defined

The canvas pool will reuse available canvas elements, but if there are a lot of watermarks being generated quickly, then the canvas pool can grow quite large.

The pool implementation could probably benefit from some enhancements to make this a little more robust.

See #41

Hi.
i Have this:
.image(watermark.text.atPos(xSerial,ySerial,'1272359468', '48px Myriad Pro', 'black'))
i want that text will be center of a box in my image at that position.
What sholud i do?

` var text = watermark.text;

  watermark(['img/shepherd.jpg'])
    .image(text.lowerRight('watermark.js', '48px Josefin Slab', '#fff', 0.5))
    .then(function (img) {
      var pre = document.querySelector('#lower-right');
      pre.parentNode.insertBefore(img, pre);
    });`

ReferenceError: watermark is not defined at b.$scope.initPhoto (http://localhost:8080/html/app/employeeFile/employeeFileCtrl.js:405:32) at fn (eval at compile (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:212:283), <anonymous>:4:218) at b.$eval (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:132:452) at pre (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:256:49) at $ (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:73:89) at K (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:61:354) at h (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:54:410) at h (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:54:433) at h (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:54:433) at h (http://localhost:8080/js/frame/lib/angular-1.4.6/angular.min.js:54:433)

可以有直接生成指定水印的功能嘛 就是有个需求让在项目中所有页面加水印 但是ie pionter event不支持

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!...

Mostly the watermark should protect the images and avoid unwarranted use, but if web crawlers can down non-watermarked images, then the images are leaked to everyone...

I am using your library to watermark a series of images for a slideshow in a website. I have noticed however that the image() function hogs the CPU on my computer. To help the problem, I am initially loading the page and then setting timeouts reasonably apart to separate the writing to the canvas (which I believe is the source of the issue?). When I am writing the watermarks the page gets pretty laggy because it's eating up all the CPU.

Do you have any suggestion for how to implement your library on a list of images?