Honeynebula - Forevermore A Humanist Romantic

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

this is a NEED

Sending emails is already stressful enough; why make it more difficult by writing them from scratch each time? Above I’ve posted several email templates that I’ve used throughout high school and college with a pretty high success rate. I apologize for how not-pretty they look, but I promise the lack of aesthetic appeal doesn’t detract from the overall usefulness of these templates! You can also find these templates in this doc.

The templates given here are for:

Scheduling a meeting with someone

Sending in application materials for a job

Asking for an extension on an assignment

Sending a thank you email

Applying for a research position

Asking for a letter of recommendation

A few other tips:

Depending on your level of familiarity with who you’re emailing, you can start the email with “Hello NAME,” especially for the extension email. But when in doubt, err on the side of formality.

Don’t just copy and paste these templates! Use these as outlines/first drafts, and personalize your email before sending. 

A lot of professors will list their extension policies in the syllabus, so look that over before asking for extension. If a professor gives one-week extensions, don’t screw yourself over by asking for a three-day extension. Also, try to ask for an extension at least 1-2 weeks in advance. This shows that you’ve planned ahead and didn’t just slack off until the last second, and professors are more likely to be lenient.

You should try to ask for rec letters in person rather than over email. However, if you’re busy as hell or socially anxious (or both, as I was), this email should work in a pinch. I secured 4 out of 4 recommenders using this email format.

A list of professional salutations: sincerely, best, best regards, regards, thank you, thank you for (xyz). Mix and match to avoid repeating something you’ve already said within the email.

Now go forth and email! 

⭑ ࣪٠Venus٠ ࣪⭑

#928590

my soul elevated

wondering for who it was created

reading the silent books

trying to keep my innocent look

wanting to hide in the crook

of your neck

but there's no one there

what else was to expect

to find out who will be the lucky heir

golden hour

headbands decorated with flowers

honey of our ellipse

the porcelain handle containing our tea

weaving the eclipse

Is this where I’m meant to be?

Invasion of the Body Snatchers (1956)

I've watched this film for the first time the other day and I loved it! It had romance, action, and horrors that made one think what is really to be human.

I need more 1950's movie recommendations right now. This film had me feeling so many emotions like: ❤️😸😿.

I watched the film during lab and I learned a couple of things like:

French critics were the ones to originally name these types of movies as the 'Film Noir' genre. Before that, it was simply known as a horror/thriller.

And French critics took B-level films and made them really popular since they didn't have prior access to them due to WWII occupation.

Day for Night scenes: night scenes that were filmed during the day. It was also called American Night, or what the French critics would call it 'La Nuit Américaine'.

Dutch Angle (mistranslated from German Angle): the technique where you tilt the camera angle in a scene; I believe it's 15 degrees.

Spoiler Warning:

I was so upset Becky got lost to the pod people. I wanted her to end up with Dr.Bennell so badly, I genuinely thought it was going to be a 1950's love story trope.

Even though this story had an ambiguous ending, which usually I'm not a fan of, but it was executed very well where I was satisfied that the problem is bigger than what can be captured in one film. So overall, great movie.

I need to watch more films since I'm so uncultured lol.

a great reminder :D

i rlly like this one <333

(pls don’t repost to pinterest ! )