A Better Alternative To Html2Canvas in Vue 3
There is a danger associated with predominant and the most popular solutions especially when new changes emerge. On my adventure to improve my portfolio as a Vue.js Software Developer, I was inspired to create a project for turning HTML elements into images. I was quite satisfied with my findings for the npm packages and API to use. My confidence was also strongly backed by the positive reviews my desired JavaScript package had.
The major challenge that took me a week to resolve was using the Html2Canvas package in Vue.js 2 & 3 and I want to tell you how I resolved this with a package that’s not too sorted out.
The Problem
After an enthusiastic development process of crafting a sweet UI, connecting the Pixabay API for image selection, utilizing the Vuex state management mechanism, and componentizing them all together, I was ready for converting HTML elements into pictures using the Idea of converting written quotes into images. When I installed the Vue-Html2Canvas npm package and integrated it into my Vue 3 app, I was dumbfounded with a blank screen.
# npm install vue-html2canvasimport { createApp } from ‘vue’
import store from “./store”
import App from ‘./App.vue’
import VueHtml2Canvas from ‘vue-html2canvas’const app = createApp(App)
app.use(store)
app.use(VueHtml2Canvas)
app.mount(‘#app’)
It absolutely crushed my app with no reasonable warnings on the console, but whenever I commented out that line of code in the main.js file, it started working again. This went on for a week even after my extensive Google searching for a solution on the web.
The Solution
Eventually, with quite some prayers, I found a different npm package that was even older than Html2Canvas called Dom-To-Image-More. I reluctantly installed this package in the project and to my surprise, it worked exactly as I wanted it. Below is a picture that validates my claims.
Conclusion
To conclude, undertaking this new and honorable adventure of upgrading my portfolio has taught me an important lesson in my software development life. And that lesson is, “never always trust the most popular way of doing things”. I hope this would become a solution to some other person’s problem in using Html2Canvas in Vue.js 3 and also advise you to seek out multiple ways to do one thing before getting started. If you are intending on using Html2Canvas in your Vue.js project, I will recommend that you chose Dom-To-Image-More npm package instead.
Project Links
More content at plainenglish.io
