Bramanto

Behind the Pixels: Making Backgrounds Transparent with html2canvas for Images

The html2canvas is a JavaScript library that allows you to capture screenshots or convert HTML elements into a canvas. It essentially takes a snapshot of the DOM (Document Object Model) and renders it onto an HTML5 canvas. This can be particularly useful for various purposes, such as generating screenshots of web pages, creating previews of HTML content, or capturing portions of a webpage for further manipulation.

Background

Some time ago, I utilized the JavaScript library html2canvas for a digital signature project. I implemented html2canvas to generate an image from an HTML format and then embedded that image into a PDF canvas. After testing it with various scenarios, it seems I encountered a slight issue with the generated results from html2canvas when embedded into the PDF canvas. Despite using a document with a background other than white, the obtained results did not meet expectations. The signature background appeared incongruent with the document background. My expectation is that the html2canvas-generated result should have a transparent background to avoid a noticeable color contrast with the document background.

So, what can I do to resolve this issue?

I tried to find a solution to the issues I encountered. Fortunately, I came across a similar case on the Stack Overflow forum. After that, I attempted to integrate some snippets of that code into my digital signature project. I tested various scenarios again, and ultimately, everything met my expectations.

Here’s a basic example of how you might use html2canvas:

// Include the html2canvas library in your HTML file
// <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

// Capture a specific element
let element = document.getElementById("myElement");

html2canvas(element).then(function (canvas) {
    // `canvas` now contains the rendered content of the specified element
    document.body.appendChild(canvas);
});

If you want to set it with a transparent background:

html2canvas(element, {backgroundColor:null}).then(function (canvas) {
    // `canvas` now contains the rendered content of the specified element
    document.body.appendChild(canvas);
});

Conclusion

With html2canvas, you can capture the content of a specific HTML element or the entire page, including styles and images. It works by traversing the DOM, rendering each element onto the canvas, and handling CSS styles and positioning to create an accurate representation of the webpage.

The html2canvas has various combination options that can be utilized to manipulate objects and, of course, can be customized according to the needs of our project. You can find them on this page.

I would love to hear your thoughts on this blog post. Please feel free to share your feedback and comments in the comment section below. Thank you!

Solving WYSIWYG Issue: Handling Character Truncation in TinyMCE Editor

The use of WYSIWYG (What-You-See-Is-What-You-Get) as a text editor in blogging platforms, Content Management Systems (CMS), and management information systems are quite common. This feature is very helpful in creating paragraphs with diverse visual content, including colored text, tables, images, videos, emoticons, and more.

Background

A few days ago, I encountered an issue related to the use of WYSIWYG in the internal management information system at my workplace. This system has been in use for quite some time, approximately 12 years ago, before I joined the company. It presented a challenge for me to find the best solution. I noticed that the version of WYSIWYG being used was TinyMCE, but I couldn’t find the exact version, which made it difficult to search for specific solutions online.

Based on the information I gathered from internal users, they experienced a problem when editing data in the TinyMCE Textarea. When adding data, the characters appeared correctly, for example: “Disclosure of Environmental, Social, and Governance (ESG) on Film Performance Pre and Post Introduction of Integrated Reporting (<IR>): Evidence from ASEAN Countries.” However, when attempting to modify the data, the displayed characters became: “Disclosure of Environmental, Social, and Governance (ESG) on Film Performance Pre and Post Introduction of Integrated Reporting (): Evidence from ASEAN Countries.“

So, what can I do to resolve this issue?

I started by examining the previously written code, starting from the client-side code (HTML and JQuery) to the server-side code (PHP). After further analysis, the server-side code seemed to be functioning correctly, while the issue was on the client side, where the characters were being truncated by the TinyMCE plugins.

To solve the problem, I created some HTML and JQuery code to anticipate this issue. I added the following code snippet to the HTML:

<textarea name="titleOfThesis" id="titleOfThesis" cols="50" rows="10" class="tinymce">{TITLE_OF_THESIS}</textarea>
<!-- ADDED -->
<div id="titleOfThesisTemp" style="display:none;">{TITLE_OF_THESIS}</div>

Next, I added the following code snippet to the JQuery code:

/* ADDED */
setTimeout(function(){
    let titleOfThesisTemp = $('#titleOfThesisTemp').html();
    tinymce.get('titleOfThesisTemp').setContent(titleOfThesisTemp);   
}, 500);

In addition to the above JQuery code, an alternative approach could be using the following code:

/* ADDED */
setTimeout(function(){
	let titleOfThesisTemp = $('#titleOfThesisTemp').html();
	$(tinymce.get('titleOfThesisTemp').getBody()).html(titleOfThesisTemp);
}, 500);

Alternatively, you can also use the following code:

/* ADDED */
setTimeout(function(){
	let titleOfThesisTemp = $('#titleOfThesisTemp').html();
	tinyMCE.activeEditor.setContent(titleOfThesisTemp);        
}, 500);

Conclusion

In conclusion, the TinyMCE textarea interprets as an HTML tag because it is enclosed by “<” and “>”. Therefore, we need to create an alternative method to indirectly transfer content from the database to HTML (by using an intermediary step). Here, I attempted to store it in an HTML div, which is then set to the TinyMCE textarea (after the DOM-to-textarea TinyMCE process is complete) with a slight delay of a few seconds.

I would love to hear your thoughts on this blog post. Feel free to share your feedback and comments in the comments section below. Thank you!