如何将base64字符串转换为图像并使用javascript存储在变量中

Question

我正在获取base64字符串，但是我需要将其存储为变量后将其转换为普通的png / jpeg图像并在控制台中查看，我想使用它用于通过pptxgenjs插件将svg导出到ppt中的png。下面的代码 https://plnkr.co/edit/s9bhKu5rTOBrKziUb6lg?p=preview

html

<div>How to convert base64 into normal png</div>

javascript

var base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUYAAAGQCAYAAABiabpAAAAgAElEQVR4Xu3dC2xc930v+L9EUqLeFB3HZpuHZSXbVs5mG9nF9ubVeuO2Qa+UYlEY2AKRg+5C9k1uImebFEKANNgm6c16twViJU1ha7GA4+y9aF0EN7bQpnms2yZpU8RS+nCdbhNZrZNGbhNTL0ukRFLa8z8zhxxSc2aGnBnynDOfAxCkyJkz//P5ndHjq9///193LTmCgwABAgQIECBAgAABAgQIECBAgAABAgMksE4wOkDVdqkECBAgQIAAAQIECBAgQIAAAQIECKQCglE3AgECBAgQIECAAAECBAgQIECAAAECAycgGB24krtgAgQIECBAgAABAgQIECBAgAABAgQEo+4BAgQIECBAgAABAgQIECBAgAABAgQGTkAwOnAld8EECBAgQIAAAQIECBAgQIAAAQIECAhG3QMECBAgQIAAAQIECBAgQIAAAQIECAycgGB04EruggkQIECAAAECBAgQIECAAAECBAgQEIy6BwgQIECAAAECBAgQIECAAAECBAgQGDgBwejAldwFEyBAgAABAgQIECBAgAABAgQIECAgGHUPECBAgAABAgQIrFjgxIkT4d577w3veMc7wnve854Vn8cTCRAgQIAAAQIECKy2gGB0tcW9HgECBAgQIECgBAJnz54N733ve8PTTz+9aLRLA9CiBaPT09Phox/9aPj85z+fjvs1r3lN+PjHPx7GxsZKoG6IBAgQIECAAAECqykgGF1Nba9FgAABAgQIECiBwCc+8YnwyCOPNO0Cffzxx8NnP/vZ+bBxLYLROL4vfOEL4ciRI2HXrl1NRbNgN/5QMFqCm84QCRAgQIAAAQJrICAYXQN0L0mAAAECBAgQKKpADD4//OEPhw996EPhbW97W9thCkbbEnkAAQIECBAgQIBAQQUEowUtjGERIECAAAECBFZbIOuyfNnLXhY++MEPhtHR0bZDaAxGDx48uGgae7Nw9dSpU+HQoUPh9OnT6bknJiau6/xsPOe+ffvSx99www3hgQceCLFbNJsmnw2u2evoGG1bOg8gQIAAAQIECAy8gGB04G8BAAQIECBAgACBmkAWSHbaLdr4nLe+9a3hwoUL6bqkcXp7Nh3/4YcfDnv37p0/f5yGn4WueeFlNo54zptuuinEwLUxpDWV3h1LgAABAgQIECDQCwHBaC8UnYMAAQIECBAgUAGBbBp9Y5jZ7rKyEHNp52enIWuzkDN7bt7GSYLRdlXxcwIECBAgQIAAgU4EBKOdKHkMAQIECBAgQGAABLoJRvN2q2/XfdoqGF16zqwEgtEBuBldIgECBAgQIEBgFQQEo6uA7CUIECBAgAABAmUQWI1gdOkao9Elr9tUMFqGu8YYCRAgQIAAAQLlFRCMlrd2Rk6AAAECBAgQ6KlAp9PfG180b1f6ZufKgte4dmi2zqiO0Z6W0MkIECBAgAABAgSWISAYXQaWhxIgQIAAAQIEqizQ7a7073nPe+Z5lgajeRstCUarfEe5NgIECBAgQIBAsQUEo8Wuj9ERIECAAAECBFZVIOvqbLc2aDaoTjtG80JXweiqlteLESBAgAABAgQINAgIRt0OBAgQIECAAAECiwRiWPnII4+Exinv2QPiGqEf//jHw2/+5m+GsbGx0GkwOj09HT760Y+Gv/mbvwlHjhwJu3btmn9uPPfDDz8c9u7dm75M3jnbhbGNF5HXoarUBAgQIECAAAECBDIBwah7gQABAgQIECBA4DqBZpskxQctDUs7DUbjc7Ow8umnn05fL26udODAgfDe9743xO9lXartgtH43Cy8jV83624VjLqpCRAgQIAAAQIE2gkIRtsJ+TkBAgQIECBAgAABAgQIECBAgAABApUTEIxWrqQuiAABAgQIECBAgAABAgQIECBAgACBdgKC0XZCfk6AAAECBAgQIECAAAECBAgQIECAQOUEBKOVK6kLIkCAAAECBAgQIECAAAECBAgQIECgnYBgtJ2QnxMgQIAAAQIECBAgQIAAAQIECBAgUDkBwWjlSuqCCBAgQIAAAQIECBAgQIAAAQIECBBoJyAYbSfk5wQIECBAgAABAgQIECBAgAABAgQIVE5AMFq5krogAgQIECBAgAABAgQIECBAgAABAgTaCQhG2wn5OQECBAgQIECAAAECBAgQIECAAAEClRMQjFaupC6IAAECBAgQIECAAAECBAgQIECAAIF2AoLRdkJ+ToAAAQIECBAgQIAAAQIECBAgQIBA5QQEo5UrqQsiQIAAAQIECBAgQIAAAQIECBAgQKCdgGC0nZCfEyBAgAABAgQIECBAgAABAgQIECBQOQHBaOVK6oIIECBAgAABAgQIECBAgAABAgQIEGgnIBhtJ+TnBAgQIECAAAECBAgQIECAAAECBAhUTkAwWrmSuiACBAgQIECAAAECBAgQIECAAAECBNoJCEbbCfk5AQIECBAgQIAAAQIECBAgQIAAAQKVExCMVq6kLogAAQIECBAgQIAAAQIECBAgQIAAgXYCgtF2Qn5OgAABAgQIECBAgAABAgQIECBAgEDlBASjlSupCyJAgAABAgQIECBAgAABAgQIECBAoJ2AYLSdkJ8TIECAAAECBAgQIECAAAECBAgQIFA5AcFo5UrqgggQIECAAAECBAgQIECAAAECBAgQaCcgGG0n5OcECBAgQIAAAQIECBAgQIAAAQIECFROQDBauZK6IAIECBAgQIAAAQIECBAgQIAAAQIE2gkIRtsJ+TkBAgQIECBAgAABAgQIECBAgAABApUTKHQwevTo0fDUU0+l6Pv37w/79u1rWoBjx46FJ554Yv5nrR5buQq6IAIECBAgQIAAAQIECBAgQIAAAQIEli1Q2GD0xIkT6cXs3bs3nDp1Knz6058O999/fxgbG7vuImMwGo+84HTZKp5AgAABAgQIECBAgAABAgQIECBAgEClBQobjDaqx5D0+PHj4eDBg02LIRit9D3q4ggQIECAAAECBAgQIECAAAECBAj0XKDQwWg2lX737t3h0KFDYXR0NDcYzabS92oa/enTp3uO7YQECBAgQIAAAQIECBAgQIAAAQIECPRXYGJioqMXKHQwml1B7Bh97LHHwuHDh5tOpc8eNz09HY4cORL27NljWn1H5fcgAgQIECBAgAABAgQIECBAgAABAoMpUIpgNAaesXs0riG6a9eulpWK0+pjt2fetPvBLLOrJkCAAAECBAgQIECAAAECBAgQIECgUaCwwei3vvWtdOp8DEJjx2i2+VKrYFTHqJubAAECBAgQIECAAAECBAgQIECAAIFOBAobjGYh58mTJ9PruO+++9Id6uMRu0KfeeaZ+XVHs7VI48/uuOMO3aKdVN5jCBAgQIAAAQIECBAgQIAAAQIECAywQGGD0QGuiUsnQIAAAQIECBAgQIAAAQIECBAgQKDPAoLRPgM7PQECBAgQIECAAAECBAgQIECAAAECxRMQjBavJkZEgAABAgQIECBAgAABAgQIECBAgECfBQSjfQZ2egIECBAgQIAAAQIECBAgQIAAAQIEiicgGC1eTYyIAAECBAgQIECAAAECBAgQIECAAIE+CwhG+wzs9AQIECBAgAABAgQIECBAgAABAgQIFE9AMFq8mhgRAQIECBAgQIAAAQIECBAgQIAAAQJ9FhCM9hnY6QkQIECAAAECBAgQIECAAAECBAgQKJ6AYLR4NTEiAgQIECBAgAABAgQIECBAgAABAgT6LCAY7TOw0xMgQIAAAQIECBAgQIAAAQIECBAgUDwBwWjxamJEBAgQIECAAAECBAgQIECAAAECBAj0WUAw2mdgpydAgAABAgQIECBAgAABAgQIECBAoHgCgtHi1cSICBAgQIAAAQIECBAgQIAAAQIECBDos4BgtM/ATk+AAAECBAgQIECAAAECBAgQIECAQPEEBKPFq4kRESBAgAABAgQIECBAgAABAgQIECDQZwHBaJ+BnZ4AAQIECBAgQIAAAQIECBAgQIAAgeIJCEaLVxMjIkCAAAECBAgQIECAAAECBAgQIECgzwKC0T4...';
console.log(base64String);
var textImage = 'textImage.png'
console.log(textImage);

Answer 1

HTML

<img id="img_ele"></img>

JavaScript

string baseStr64="data:image/png;base64,iVBORw0K......";
const img_ele = document.getElementById('img_ele');
img_ele.setAttribute('src', baseStr64);