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!

Streamlining the STNK Extension Process: A Sample Letter of Attorney and Personal Experiences

When it comes to administrative documents, particularly those pertaining to the state, it’s essential to be aware of their validity periods. This holds true for motorized vehicle owners as well. These documents contain specified validity periods, and it is the responsibility of the document owner to ensure timely renewal and extension of the document’s active period.

Background

In February 2023, I had the opportunity to personally handle the complete documentation for my motorized vehicle, specifically the STNK (Vehicle Number Certificate) extension. The vehicle I use is a motorcycle, and unlike previous years where my parents handled the paperwork, I took it upon myself to manage the process this time. In the past, I would simply accompany my parents to the SAMSAT building, but now I wanted to handle it from start to finish, avoiding shortcuts or relying on scalpers.

However, I encountered a slight difference in the process when handling it on my own. I needed a power of attorney, which is mandatory. The power of attorney serves as a formal authorization, indicating that the administrative documents being processed have been authorized by the vehicle owner. In this case, my parent acted as the authorizer, granting me, as the recipient of the authorization, the power to handle the paperwork. The power of attorney document must be submitted if the vehicle owner is not personally taking care of the administrative tasks.

So, what can I do to meet administrative requirements?

In order to extend the Annual STNK (Vehicle Number Certificate), I prepared a power of attorney document that included personal information from both the authorizer and the recipient of the authorization, as well as detailed vehicle information. While there are numerous examples of the power of attorney templates available on the internet, it’s crucial to carefully review and ensure that the document contains all the required information. I spent some time comparing various samples I found online and noticed both similarities and differences among them, which left me slightly confused. As of now, I haven’t come across the most recent and official example of a power of attorney issued by SAMSAT. This led me to believe that an official format might not exist.

Hence, I decided to create a power of attorney template based on relevant and valid information gathered from my comparison of internet sources. I have attached the template here for anyone in need of a power of attorney format to extend their Annual STNK. Don’t forget to affix a stamp duty of Rp. 10,000 to the authorizer’s signature.

In the process of renewing the annual vehicle registration for privately owned vehicles, the following documents must be brought:

  1. Photocopy of BPKP – 1 sheet
  2. Copy of STNK – 1 sheet
  3. Original Letter of Attorney – 1 sheet
  4. Original E-KTP of Vehicle Owner (Authorizer) – 1 sheet
  5. Photocopy of Original E-KTP of Vehicle Owner (Authorizer) – 1 sheet
  6. Original E-KTP of Recipient of Authorization – 1 sheet
  7. Photocopy of Original E-KTP of Recipient of Authorization – 1 sheet

Conclusion

The process of extending the STNK can be relatively quick if all the necessary documents meet the required criteria. Based on my personal experience, it took me approximately 15 minutes from the moment I entered the SAMSAT building until I completed the process and left.

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!

Quickly Code to Show All PHP Errors

Finally, I tried to work up the courage to write on the WordPress platform that I set up on my domain. I hope that I can continue to be consistent in writing anything that at least later or in the future can be useful for myself or my friends in the virtual. Hopefully, I am always eager to fill in the content here!

Background

When I am doing the coding and testing process, of course, it does not always run smoothly. Because I realized, I am still a human who can not be separated from sin. This is what causes me to have to trace what mistakes I have made in the coding process. I tried to trace it by doing debugging to find out what problem is being encountered. In this case, I use the PHP programming language. Actually, by default PHP already provides information according to what we are running, including errors in coding. However, in some cases, I cannot get error information on the system because error information is disabled for reasons of ignoring errors or for purposes in a production environment. Therefore, we can open or enable the error so that we can solve the problem.

So, what can I do with the Code?

Usually, I use the simple three lines of code below to see the error I get when debugging. I put it at the head or top of the process. Or usually, I put it in the main file (eg: index.php).

<?php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

Conclusion

So that is my simple way of debugging the code I am running. But you need to remember, do not ever try it in a production environment! Note that!
So what do you think about this post? Leave this message in the comments section, thank you!

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!