Test max data uri size for HTML to img

by Ron Valstar

HTML

size in pixels <input type="number" value="1000" />
  <button>generate</button>
  <p></p>

CSS

img {
  max-width: 90vw;
}

JavaScript

'use strict';var _document=document,body=_document.body,input=document.querySelector('input');document.querySelector('button').addEventListener('click',generate);var p=document.querySelector('p'),canvas=document.createElement('canvas'),ctx=canvas.getContext('2d'),tempImg=document.createElement('img');tempImg.addEventListener('load',onTempImageLoad);var targetImg=document.createElement('img');body.appendChild(targetImg),generate();function generate(){var a=parseInt(input.value,10);canvas.width=canvas.height=a,tempImg.src='data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="'+a+'" height="'+a+'">\n<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">\n  <style>\n    div {\n      background: #f04 linear-gradient(30deg, #cbebff 0%, #ff0044 100%);\n      font-size: '+Math.max(0.06*a)+'px;\n      width: 100%;\n      height: 100%;\n    }\n    em{ color: greenyellow; }\n  </style>\n  '+(a+' <em>I</em> lick <span>cheese</span> '.repeat(60))+'</div>\n</foreignObject>\n</svg>')}function onTempImageLoad(a){ctx.drawImage(a.target,0,0),targetImg.src=canvas.toDataURL(),p.innerText=targetImg.src.length+' characters in data uri'}
/*const {body} = document

const input = document.querySelector('input')
document.querySelector('button').addEventListener('click',generate)

const p = document.querySelector('p')

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)

const targetImg = document.createElement('img')
body.appendChild(targetImg)

generate()

function generate(){
  const size = parseInt(input.value, 10)
  canvas.width = canvas.height = size
  tempImg.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">
  <style>
    div {
     ...