How to display Base64 images in HTML

因為有些網站把驗證碼放在 shadow root 裡, 在取出資料後, 希望在 dom 裡產生出相同內容的圖片,

base 64 字串放產生成圖片:

How to display Base64 images in HTML

var img = document.createElement(“img”);
img.classList.add(‘image_class’);
img.style = “vertical-align: middle; border-style: none; width: 170px; height: 50px;”;
img.src = “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAZCAYAAACxZDnAAAAAAXNSR0IArs4c6QAAA6dJREFUaEPlmc9rE0EUx7/zD/gTwYu44KFiI1bqySKYUxMR8SBWmouYpXootIfk0kLFQgVJDhY8SNlAPaRYqeBB3ApCAtqTVFrYiAXBXXOxJ8WD19XdzObH/pzdnaZt3FsyO2/e+8x333uzS3Rd19HDFyEEeyFEEhf0Un8/Rmu1Ht4qPqFFBj3/cx4ThyccXhAC7PYzshd8sIOJDNowZMA2LjfgfjpQFMUcTiQSfOTC0crC4DrG1gc5WmyYigS6+ooguen0JXdLR6HP3UcLrh1wh/rqZbwZnsMv888RXPo8gxMxQq7mgWSxZSBXAQqXIxjUSkgLIlZdp6YgqTKyJ/3tRgeNCvTrLa8NdU8emWwWnnawLOr9Xc7g9cMNCAs1XBwC7L8dj+KDf0XuvncdtyBXdMD0sgqQJBAZthtHcwNWcGMnQT86pkIe6txGL9UGaUirl1EbngOm3+JKpqXh+uwZvN+axp8vpyGGeZw1IC0AkAA521q9lAbEBKAXgjxiG6/mCZKKBFXOIkDQUVKHhtJTAStnG6Dd4LLmbo3G4+Wkqeq5Ps8UErbocQVN00miojOlI+bU0QpKw+xjAd8O3sbi90WKKgVpXEb2aKcSvDqTIMANK3XUMsPYxDSuljM4wCYy77to6pBUBOZTlqW0UhqCmEBFLzRSU8DFBLoz337Es5d3UDzXlqO38iDPi/ArhpYfBuTAx8yohR9msTS2jENTqx3pxC0e30MJBWzM88vPN8cH8OLJRhAvOl5FniShSCrkoCpIZ3iCDptvzU7EViDbvWZTMZ2x1oCMgSk+aqZm8wQo5jjk6GoeJKkwdRsWAwfoqD2uCfqHBPWeszC4qZh4dA1Wt8Ebshkwl/ShoZQWIG6fgv7pK+MTEKWPNtOEYsvJjQIpHu9s+UKp2MjKRpexTLgruUkjRovXfNVgqrmIHGMR9FR08BY5oWpraQjv0IQfFrCxZlPJIwsYnRkKdsPvDg+gWgkQRCBOQQzT0rW7yFQMnTFR2NvWSKvrYCl2DnvWifA8pw4DgNnKAVBlWnxpb70aJ0fTls7YKdYiGEPR8cTmNrupZrfBGEdx+xE8ZTvAhI3EVHMxx9zScVB0WBdj3B/2VOLe/+36K8WIqSMGuP90KnfQPATYi3vBHXS3IO3Ul52dsrtvQXdrQ8Ou43WU35eg98oH1zCbsC9BhwnQ7V7jc9Xdaxd8PxzEXcM+PxJor/cUvJ3rpj2Wb4Vx4o4EupsAemWtv0PJ5MUsKZx0AAAAAElFTkSuQmCC”;
document.body.appendChild(img);

微調上面的程式, 避免重覆 append element 到 dom, 使用到的 javascript, 包住 javascript 的是 python script:

js = """
var img = document.querySelector("img.image_class");
var do_append = false; 
if (!img) {{img = document.createElement("img");do_append = true;}}
img = document.createElement("img");
img.classList.add('image_class');
img.style = "vertical-align: middle; border-style: none; width: 170px; height: 50px;";
img.src = '{}';
if (do_append) document.body.appendChild(img);""".format(img_data)

img 取出為 image data:

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0);
let img_data = canvas.toDataURL();
if(img_data) {image_data = img_data.split(",")[1];}
return img_data;

除了把 img 放回 dom 的解法, 也可以直接把 image data 進行 ocr, pythone sample code:

ocr_answer = ""
img_base64 = None
if len(img_data) > 0:
    img_base64 = base64.b64decode(img_data.split(',')[1])
if img_base64:
    ocr_answer = ocr.classification(img_base64)
if len(ocr_answer) == 4:
    # 輸入答案到輸入框.
    pass
else:
    # 點擊畫面上重新產生驗證碼.
    pass

自動化之後的預覽:
https://www.youtube.com/shorts/vUGt2ComgRY

---

資料來源

How to display base64 encoded image in html
https://stackoverflow.com/questions/41053901/how-to-display-base64-encoded-image-in-html

How to display Base64 images in HTML
https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html