Today, we discovered that some QR codes previously used in our website photos and videos had stopped working. After checking, we found that the QR code service required payment after one month, with surprisingly high fees.
This meant that much of our previous work needed to be updated. We had to create new QR codes and replace them in our images and videos.
This time, we decided to investigate more carefully. After reviewing relevant information and consulting AI, we chose to generate QR codes directly through the browser instead of relying on a QR code service that requires a subscription.
In Google Chrome, you can right-click on a webpage and select the option to generate a QR code. However, we found that the generated QR codes use a dot-style design. When the QR code is placed inside an image, especially with a transparent background or low opacity, scanning can become difficult.
So, we continued looking for a better solution.
By using Chrome Developer Tools, pressing F12, opening the Console, and entering the appropriate code, we were able to generate a traditional solid black-and-white QR code.
Code is below:
(function(){
var u = encodeURIComponent(window.location.href);
var div = document.createElement('div');
div.id = 'my-qr-pop-fixed';
div.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999999;background:#ffffff !important;padding:25px;border:3px solid #000;text-align:center;box-shadow:0 0 30px rgba(0,0,0,0.5);filter:none !important;';
div.innerHTML = '<h3 style="margin:0 0 10px;color:#000000 !important;">QRCODE CREATED</h3><img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + u + '" style="display:block;margin:0 auto;background:#ffffff !important;filter:none !important;mix-blend-mode:normal !important;" /><p style="margin:10px 0 0;font-size:12px;color:#333333 !important;">right click and save</p><button onclick="document.getElementById(\'my-qr-pop-fixed\').remove()" style="margin-top:10px;padding:5px 15px;cursor:pointer;">CLOSE WINDOW</button>';
document.body.appendChild(div);
})();
If Chrome displays a warning about pasting code into the Console, you may need to type allow pasting manually first, then enter the QR code generation code.
We saved the newly generated QR code for use in future photos and videos.
An important lesson: A static QR code does not depend on a monthly QR code subscription, but its long-term usability still depends on the destination URL remaining accessible. Before using any QR code in marketing materials, test the scan, verify the URL, and make sure the design remains readable.
Small technical details can make a big difference in long-term content management. Below is the QR code we created, and it links to the Beacon Industries contact page.
0 comments