How I used Cloudinary to merge 2 images?

For my final project at Flatiron school bootcamp, I decided I wanted to make a web applications that allowed users to try on glasses from the comfort of their own home. On the surface the idea seemed simple. Take a headshot of the user with their webcam, scale images of the glasses to match the user’s head size, merge the image of the glasses with headshot to create one unified image of the user in glasses, and then save it to my server. Sounds easy right?

One of the biggest problems I encountered was figuring out how to merge the 2 images together, in a format that was easily readable. There aren’t that many libraries or packages which allow people to merge images together, and then on top off that save the merged image as a png instead of leaving it as a canvas object. Luckily I found a solution for this problem using HTML2Canvas.

What is HTML2Canvas?

HTML2Canvas is a javascript package which allows you to take screenshots of your webpage. It does this by transversing the elements in your DOM, and taking a picture of every element that is saved in a selected div on your DOM. Problem solved ,right all I have to do is put both images into a div and presto a combined image ? Well unfortunately, HTML2Canvas has one big limitation, that being it only works with elements that share the same-origin.

“Same-Origin policy” is a security policy that states that resources can only interact with each other if they same server . Because I was using Cloudinary to host user headshots, and getting my glasses images from different websites across the web(i.e using CORS), when i tried to merge the two images it would result in failure.

How I got around HTML2 Canvas’s same-origin limitation?

The solution is relatively simple. Instead of using CORS to get access to my glasses images from different servers across the web, I took my glasses images and uploaded them to Cloudinary. Now because my glasses images, and my user headshots share the same server, Cloudinary, the merge could successfully happen.

Related posts:

I guess we all knew it was inevitable. He had long ago posted about his mild shock at hearing a doctor use the word “terminal.” Had kept us abreast of evolving drug regimens and their ever…

Burlington County is taking the lead in security enhancements, being the first county in the state to offer a $20 million grant program that will allow school buildings to be more secure. Rancocas…

Nothing is hotter than an unexpected blow job, and I’m the one providing it! But there’s something special about the ones I give that I wasn’t anticipating giving— when my partner is wanting and I’m…