How to Build a Meme Website in 2018 with HTML5 canvas

PostImage HowtoBuildaMemeWebsitein2018withHTML5canvas WomanCodinginDesktop - How to Build a Meme Website in 2018 with HTML5 canvas

Do you love memes? We don’t know anyone who does not enjoy a good meme. Do you like creating your own? There sure is a huge market for it right now. There are literally tons of websites out there right now that allows users to create their own memes, at no cost.

But how would you go about getting a website launched that allows users to create memes? In this post, we give you some basic steps on how to do just that using an HTML5 canvas.

Needless to say, we’re assuming you know the basics of code or web platforms such as WordPress and that you have an existing site to publish your meme generator on. So we are just going to skip right ahead to the part where you create the meme generator and add it to your site.

Things you need for the meme generator to function

Downloading functionality
Image uploading functionality
Image transformations functionality

Now, you will need to set your canvas up using this code:

<canvas id=”memecanvas”>
Sorry, canvas not supported
</canvas>

Next, you will need this JavaScript for extension to fit with the screen size:

var canvas = document.getElementById(‘memecanvas’);
ctx = canvas.getContext(‘2d’);

var deviceWidth = window.innerWidth;;
canvasWidth = Math.min(600, deviceWidth-20);
canvasHeight = Math.min(480, deviceWidth-20);

canvas.width = canvasWidth;
canvas.height = canvasHeight;

Then, to test it add an image to canvas using this code:

1  <img style=”display: none;” src=”/files/lenna.png” alt=”” />

And center it, of course, like this:

//  Grab the image
var img = document.getElementById(‘start-image’);

// When the image has loaded…
img.onload = function() {
// Work out where to center it
x = canvas.width/2 – img.width/2;
y = canvas.height/2 – img.height/2;

// Draw it
ctx.drawImage(img, x, y);
}

Now that you’ve got your image loader setup, let’s jump into the added extras like transformations.

Firstoff, you need to add code for scale and rotation:

Scale: <input id=”scale” max=”4″ min=”0.1″ step=”0.01″ type=”range” value=”1″ />
Rotate: <input id=”rotate” max=”180″ min=”-180″ step=”1″ type=”range” value=”0″ />

PostImage HowtoBuildaMemeWebsitein2018withHTML5canvas Laptopcodinghand - How to Build a Meme Website in 2018 with HTML5 canvas

Of course these will be editable, so you need to add a listener when this transformation is requested:

scale = document.getElementById(‘scale’);
scale.addEventListener(‘change’, doTransform, false);

rotate = document.getElementById(‘rotate’);
rotate.addEventListener(‘change’, doTransform, false);

doTransform() is going to take the values into consideration and be responsible for transformations to be implemented, like so:

function doTransform() {
ctx.save();

// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Translate to center so transformations will apply around this point
ctx.translate(canvas.width/2, canvas.height/2);

// Perform scale
var val = document.getElementById(‘scale’).value;
ctx.scale(val, val);

// Perform rotation
val = document.getElementById(‘rotate’).value;
ctx.rotate(val*Math.PI/180);

// Reverse the earlier translation
ctx.translate(-canvas.width/2, -canvas.height/2);

// Finally, draw the image
ctx.drawImage(img, x, y);

ctx.restore();
}

Now that it is up and running, you probably should allow whoever to upload whichever they want to use. You are going to do this using this code:

<input id=”fileInput” type=”file” />

loadImage() Should be used to trigger the functionality and upload the image:

// Trigger the imageLoader function when a file has been selected
var fileInput = document.getElementById(‘fileInput’);
fileInput.addEventListener(‘change’, imageLoader(), false);

This function will use HTML5 FileAPI to load the information successfully:

function imageLoader() {
var reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = reader.result;
}
reader.readAsDataURL(fileInput.files[0]);
}

Now, we get to the final part, namely downloading the file from the website! Do this by adding a download link in the HTML file:

<a id=”img-download” download=”mobiforge-canvas.png”></a>Download image

Once the link is clicked it should allow a user to download the image that was generated. To add this functionality, prepareDownload() is used:

var download = document.getElementById(‘img-download’);
download.addEventListener(‘click’, prepareDownload, false);

function prepareDownload() {
var data = canvas.toDataURL();
download.href = data;
}

And that is a wrap! For more information on HTML5, follow this link. If you like content like this, you are probably going to love this article. Good luck and happy coding!

Related posts

Leave a Comment