将base64转换为图像并仅在浏览器上显示[重复]答案

【问题标题】：Convert base64 to image and display on browser only [duplicate]将base64转换为图像并仅在浏览器上显示[重复]
【发布时间】：2018-06-15 01:12:58
【问题描述】：

我知道已经有人问过这个问题，但我的情况没有单一的解决方案。我正在使用三个字母的 JavaScript 生成验证码，并且能够将它们转换为 base64 字符串，以便能够将其进一步转换为图像文件并显示在浏览器上。我无法将 base64 格式转换为图像格式。我可以使用 Google reCaptcha，但我这样做是为了学习。所以任何帮助都会很棒！这是我的 JavaScript 代码：

var code2 = ''
$('#captCha').ready(function Captcha() {
    var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z')

    for (var i = 0; i < 6; i++) {
        var a = alpha[Math.floor(Math.random() * alpha.length)]
        var b = alpha[Math.floor(Math.random() * alpha.length)]
        var c = alpha[Math.floor(Math.random() * alpha.length)]
    }
    var code = a + ' ' + b + ' ' + ' ' + c

    code2 = removeSpaces(code)
    var b64 = btoa(unescape(encodeURIComponent(code2)))
    console.log(b64)
    document.getElementById('captCha').innerHTML = b64
});

function removeSpaces (string) {
    return string.split(' ').join('')
}

【问题讨论】：

那么，您想将 string 转换为 image 吗？跨度>
你想在标签上显示你的图片吗？
我希望您意识到 base64 编码的字符串与 base64 编码的图像完全不同...编码只是表示二进制数据的一种方式。对两个不同的事物使用相同的编码不会突然使两者互换。
@Cerbrus...我在某处读到 base64 可以转换为图像。
@MeghaVerma：假设它是 image 的 base64 表示。 Base64 就像摩尔斯电码：它是一种编码数据的方式。如果将文本编码为摩尔斯电码，则只能将其解码为文本。

标签： javascript captcha simplecaptcha

【解决方案1】：

您可以在 canvas 元素上绘制文本，然后从画布中获取 base64 编码的图像：

const alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
               'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 
               'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
               'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

const a = alpha[Math.floor(Math.random() * alpha.length)];
const b = alpha[Math.floor(Math.random() * alpha.length)];
const c = alpha[Math.floor(Math.random() * alpha.length)];
const code = a + ' ' + b + ' ' + c;

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '24px sans-serif';
context.fillText(code, 10, 50);

const img = document.createElement('img');
img.setAttribute('src', canvas.toDataURL());

document.body.appendChild(img);

【讨论】：

哇！！它对我来说很神奇。非常感谢！！