Watermark using Canvas & Javascript

-

Just found out that we can actually add a watermark to any image using HTML <canvas>  & Javascript. This should be a piece of cake if you're familiar with HTML and Javascript


So how do we do it?

1st create a  <canvas> element in your HTML file

<canvas id="myCanvas">Your browser doesn't support canvas</canvas>

Then use Javascript to load image into the canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
After that you can add the watermark using this script
ctx.font = "30px Arial";
ctx.fillText("watermark", 10, 10);

Now if you check browser, you'll find the image is watermarked by a text that we put in the Javascript code


Result

References

Popular posts from this blog

Understanding Customer's Jobs, Pains, and Gains

-
Image
As a product manager, you need to become an expert of customers and you can only do this by fully understanding their jobs, pains, and gains.  Understanding the customer will help a product manager, not only in writing a better user story but also to influence or even create a buy-in from stakeholders. Creating a customer profile is pretty similar with user persona. Customer profile has 3 key components: job or things that user wants to accomplish,  pain or any obstacle that hinder user from accomplishing her job,  and gain or outcome or benefit that user want after accomplished her job and this may include emotional gain. So whenever we're writing requirements in PRD or  JIRA  ticket, do remember to also write the gains and pains , even before writing the  jobs  or acceptance criteria. This will help the product team to understand what exactly our customer goals and pain points before creating or thinking the solution. “Successful problem solving re...
Read more