Draw Base64 PNG
by Trevor Dixon
HTML
<img></img>
<hr>
<textarea>
iVBORw0KGgoAAAANSUhEUgAAAlgAAAFkCAYAAAD8NkWXAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAPsAAAEOsBp0v8bwAAIABJREFUeJzt3Xl0VWWe7//Ps08GQkggiARQBsM8hICKIiIoo0xhqku1y1tlWZa3tepaettqaPvXq1ev9fvDWljaWq2l616tKutqu9oqAZmUKcwzMgVkDIMiBAEZAiEkOfu5f2zhSJVKAufkOcP79U/D3idnf2xOJZ/s/d3PlgAAAAAAAAAAAAAAAAAAAAAAiBMmlm/+H//xH5ueeuqpOy//fdGiRf+2bt26Jxo1anRekoqKiv5zxIgR/xrLDAAAAA0tLRZvunPnzgkbN2786d69e/t8c/uJEye6Pvzww1MKCgpWxOK4AAAA8cCLxZvm5uYe69ev3+9DoVD1N7efOHGi29KlS/+/3/zmN7vffvvtmefOnbs5FscHAABIWv/6r/96/pt//8Mf/jDn6NGjd1hrzcKFC///d95558+usgEAAMRKnWew9u/ff7C+b15aWtqusLDws2/b5/u+2blzZ9vv2g8AkhSqqTGZa9ZkNl65MksZGfbUP/7jGWtiOj4KAN+pU6dOt9XldXWawSorKzudlpbWzPPqf0UxMzOzgyTV1tbq/PnzatasmSTJ9315nndlP5KbtVaSZPjBiDryKiqUuWaNMtevl7l4MfgM1dQoZ+vWZpf693cdDwmI70O4Ub7va9++fYc6d+7c4VqvrfOQuzFG+fn59QqyZcsWjRkzRpJUXV2td955R48++qhatmyptWvX6uLFi/V+TySmiooKGWPUpEkT11EQ744dk7dkiczGjVJtrSTJ9uihqiZNlLZ5sxqvXavwyJFSo0aOgyLR8H0IN6q8vLzOr43JXYTfJiMjQ8XFxXr33XdlrVV+fr4mT57cUIcHEM+sldm/X2bxYpkdO4JtxsgWFckOGyZbUKBL587JO3VKOnpU3uLF8seOdZsZAL5Hnc6TlpWVnU5PT2/WqlWrWOdBkuI3R3wr35fZsiUoVp99PY6Zlibbv7/8IUOkb5zhrqioUOjQIeW88YaUnq7wv/2b9PXIAVAXfB/CjSovL9elS5cOR/USIQBEzaVLMmvWyFu6VDp1KtiWnS07eLD8QYOknJxv/TL/tttki4pktm2TN3eu/P/+3xswNADUHQULQMM5d07e8uUyK1ZIlZXBtptvlj9kiGz//lJGxjXfwh8/XqHSUpl162SGDJFt0ybGoQGg/ihYAGKvvDwYXN+wITK43qGD7PDhsr17S/W5Qzk/X3bgQJkVK2RmzZL9+c9jFBoArh8FC0BsWCtTVhbMV5WWRjYXFgbFqqBAus7b5f3RoxVav15m506ZPXtku3aNVmoAiAoKFoDo8n2ZrVuDYnX4cLDtOwbXr1tOjvzhw+XNnSszY4bsP/3TdZc1AIgFChaA6Lh0SWbdOnklJdLJk8G27GzZQYOCwfXc3Kgezg4dKq1aJXPkiMzGjbJ33RXV9weAG0HBAnBjzp2Tt2JFMLh+4UKwrUWLyOB6ZmZsjpuRIX/sWHnvvCNvzhyF+/aV0tNjcywAqCcKFoDrc/x4MLi+fn1kcL19+2Bh0D596je4fp3s3XfLLlkic+yYzLJlssOHx/yYAFAXFCwAdWetzIEDMosW/e3g+rBhsh07NuwslOfJTpwo87vfyVuwQOEBA6Ts7IY7PgB8BwoWgGvzfZnt24NidehQsC0tTfbuu4PBdYdPebA9esh26SKzd6+8jz+WzyO4AMQBChaA71ZdHRlcP3Ei2Na4cTC4Pnhw1AfXr4sxspMmyfz61zLLl0uDB0stWrhOBSDFUbAA/K2KimBwffnyyOD6TTcFg+v33BO7wfXrZNu2lb3rLpkNG+TNni3/pz91HQlAiqNgAYg4flxeSUkwuF5TI0my7doFC4M20OD69fLHjVNo82aZTz6RGTpUt...
CSS
img {
margin: 20px;
border: 1px solid #efefef;
}
textarea {
width: 600px;
height: 300px;
}
JavaScript
$('textarea').keyup(function(){
$('img').attr('src', 'data:image/png;base64,' + $(this).val());
}).keyup();