Equipment note: actual dom-to-image PNG output

HTML for this example

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Equipment note to PNG</title><style>*{box-sizing:border-box}body{margin:24px auto;padding:0 16px;max-width:800px;font:16px/1.6 system-ui;color:#202834}h1{font-size:clamp(25px,4vw,34px);line-height:1.2}h2{font-size:20px}button,input{font:inherit;padding:8px;border:1px solid #8b99ab;border-radius:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.65}label{font-weight:600}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #d4dce6;padding:8px;text-align:left}caption{text-align:left;font-weight:600}img{max-width:100%;height:auto}#status{min-height:1.6em}</style></head><body><h1>Equipment note to PNG</h1><label for="label">Batch label </label><input id="label" value="Batch A" maxlength="50"><p>Fictional example. Edit the label, then export a fresh image.</p><section id="equipment-note" class="note"><h2>Equipment note</h2><p><strong id="batch">Batch A</strong> · fictional example</p><p>Camera 1 — Ready<br>Camera 2 — Ready<br>Tripod — Ready<br>Recorder — Held</p><p><strong>3 Ready · 1 Held</strong></p></section><p><button id="export">Create PNG preview</button></p><p id="status" role="status"></p><h2>Image result</h2><img id="image-preview" alt="Exported equipment note"><style>.note{width:320px;max-width:100%;padding:16px;line-height:1.4;border:2px solid #665a4b;background:#fff}.note h2{margin:0 0 8px}.note p{margin:8px 0}.note th,.note td{padding:5px}#image-preview{width:320px;max-width:100%}.note{font-family:ui-monospace,monospace;border-top-width:8px}</style><script>/*! dom-to-image 10-06-2017 */
!function(a){"use strict";function b(a,b){function c(a){return b.bgcolor&&(a.style.backgroundColor=b.bgcolor),b.width&&(a.style.width=b.width+"px"),b.height&&(a.style.height=b.height+"px"),b.style&&Object.keys(b.style).forEach(function(c){a.style[c]=b.style[c]}),a}return b=b||{},g(b),Promise.resolve(a).then(function(a){return i(a,b.filter,!0)}).then(j).then(k).then(c).then(function(c){return l(c,b.width||q.width(a),b.height||q.height(a))})}function c(a,b){return h(a,b||{}).then(function(b){return b.getContext("2d").getImageData(0,0,q.width(a),q.height(a)).data})}function d(a,b){return h(a,b||{}).then(function(a){return a.toDataURL()})}function e(a,b){return b=b||{},h(a,b).then(function(a){return a.toDataURL("image/jpeg",b.quality||1)})}function f(a,b){return h(a,b||{}).then(q.canvasToBlob)}function g(a){"undefined"==typeof a.imagePlaceholder?v.impl.options.imagePlaceholder=u.imagePlaceholder:v.impl.options.imagePlaceholder=a.imagePlaceholder,"undefined"==typeof a.cacheBust?v.impl.options.cacheBust=u.cacheBust:v.impl.options.cacheBust=a.cacheBust}function h(a,c){function d(a){var b=document.createElement("canvas");if(b.width=c.width||q.width(a),b.height=c.height||q.height(a),c.bgcolor){var d=b.getContext("2d");d.fillStyle=c.bgcolor,d.fillRect(0,0,b.width,b.height)}return b}return b(a,c).then(q.makeImage).then(q.delay(100)).then(function(b){var c=d(a);return c.getContext("2d").drawImage(b,0,0),c})}function i(a,b,c){function d(a){return a instanceof HTMLCanvasElement?q.makeImage(a.toDataURL()):a.cloneNode(!1)}function e(a,b,c){function d(a,b,c){var d=Promise.resolve();return b.forEach(function(b){d=d.then(function(){return i(b,c)}).then(function(b){b&&a.appendChild(b)})}),d}var e=a.childNodes;return 0===e.length?Promise.resolve(b):d(b,q.asArray(e),c).then(function(){return b})}function f(a,b){function c(){function c(a,b){function c(a,b){q.asArray(a).forEach(function(c){b.setProperty(c,a.getPropertyValue(c),a.getPropertyPriority(c))})}a.cssText?b.cssText=a.cssText:c(a,b)}c(window.getComputedStyle(a),b.style)}function d(){function c(c){function d(a,b,c){function d(a){var b=a.getPropertyValue("content");return a.cssText+" content: "+b+";"}function e(a){function b(b){return b+": "+a.getPropertyValue(b)+(a.getPropertyPriority(b)?" !important":"")}return q.asArray(a).map(b).join("; ")+";"}var f="."+a+":"+b,g=c.cssText?d(c):e(c);return document.createTextNode(f+"{"+g+"}")}var e=window.getComputedStyle(a,c),f=e.getPropertyValue("content");if(""!==f&&"none"!==f){var g=q.uid();b.className=b.className+" "+g;var h=document.createElement("style");h.appendChild(d(g,c,e)),b.appendChild(h)}}[":before",":after"].forEach(function(a){c(a)})}function e(){a instanceof HTMLTextAreaElement&&(b.innerHTML=a.value),a instanceof HTMLInputElement&&b.setAttribute("value",a.value)}function f(){b instanceof SVGElement&&(b.setAttribute("xmlns","http://www.w3.org/2000/svg"),b instanceof SVGRectElement&&["width","height"].forEach(function(a){var c=b.getAttribute(a);c&&b.style.setProperty(a,c)}))}return b instanceof Element?Promise.resolve().then(c).then(d).then(e).then(f).then(function(){return b}):b}return c||!b||b(a)?Promise.resolve(a).then(d).then(function(c){return e(a,c,b)}).then(function(b){return f(a,b)}):Promise.resolve()}function j(a){return s.resolveAll().then(function(b){var c=document.createElement("style");return a.appendChild(c),c.appendChild(document.createTextNode(b)),a})}function k(a){return t.inlineAll(a).then(function(){return a})}function l(a,b,c){return Promise.resolve(a).then(function(a){return a.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(a)}).then(q.escapeXhtml).then(function(a){return'<foreignObject x="0" y="0" width="100%" height="100%">'+a+"</foreignObject>"}).then(function(a){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+b+'" height="'+c+'">'+a+"</svg>"}).then(function(a){return"data:image/svg+xml;charset=utf-8,"+a})}function m(){function a(){var a="application/font-woff",b="image/jpeg";return{woff:a,woff2:a,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:b,jpeg:b,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}function b(a){var b=/\.([^\.\/]*?)$/g.exec(a);return b?b[1]:""}function c(c){var d=b(c).toLowerCase();return a()[d]||""}function d(a){return a.search(/^(data:)/)!==-1}function e(a){return new Promise(function(b){for(var c=window.atob(a.toDataURL().split(",")[1]),d=c.length,e=new Uint8Array(d),f=0;f<d;f++)e[f]=c.charCodeAt(f);b(new Blob([e],{type:"image/png"}))})}function f(a){return a.toBlob?new Promise(function(b){a.toBlob(b)}):e(a)}function g(a,b){var c=document.implementation.createHTMLDocument(),d=c.createElement("base");c.head.appendChild(d);var e=c.createElement("a");return c.body.appendChild(e),d.href=b,e.href=a,e.href}function h(){var a=0;return function(){function b(){return("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)}return"u"+b()+a++}}function i(a){return new Promise(function(b,c){var d=new Image;d.onload=function(){b(d)},d.onerror=c,d.src=a})}function j(a){var b=3e4;return v.impl.options.cacheBust&&(a+=(/\?/.test(a)?"&":"?")+(new Date).getTime()),new Promise(function(c){function d(){if(4===g.readyState){if(200!==g.status)return void(h?c(h):f("cannot fetch resource: "+a+", status: "+g.status));var b=new FileReader;b.onloadend=function(){var a=b.result.split(/,/)[1];c(a)},b.readAsDataURL(g.response)}}function e(){h?c(h):f("timeout of "+b+"ms occured while fetching resource: "+a)}function f(a){console.error(a),c("")}var g=new XMLHttpRequest;g.onreadystatechange=d,g.ontimeout=e,g.responseType="blob",g.timeout=b,g.open("GET",a,!0),g.send();var h;if(v.impl.options.imagePlaceholder){var i=v.impl.options.imagePlaceholder.split(/,/);i&&i[1]&&(h=i[1])}})}function k(a,b){return"data:"+b+";base64,"+a}function l(a){return a.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")}function m(a){return function(b){return new Promise(function(c){setTimeout(function(){c(b)},a)})}}function n(a){for(var b=[],c=a.length,d=0;d<c;d++)b.push(a[d]);return b}function o(a){return a.replace(/#/g,"%23").replace(/\n/g,"%0A")}function p(a){var b=r(a,"border-left-width"),c=r(a,"border-right-width");return a.scrollWidth+b+c}function q(a){var b=r(a,"border-top-width"),c=r(a,"border-bottom-width");return a.scrollHeight+b+c}function r(a,b){var c=window.getComputedStyle(a).getPropertyValue(b);return parseFloat(c.replace("px",""))}return{escape:l,parseExtension:b,mimeType:c,dataAsUrl:k,isDataUrl:d,canvasToBlob:f,resolveUrl:g,getAndEncode:j,uid:h(),delay:m,asArray:n,escapeXhtml:o,makeImage:i,width:p,height:q}}function n(){function a(a){return a.search(e)!==-1}function b(a){for(var b,c=[];null!==(b=e.exec(a));)c.push(b[1]);return c.filter(function(a){return!q.isDataUrl(a)})}function c(a,b,c,d){function e(a){return new RegExp("(url\\(['\"]?)("+q.escape(a)+")(['\"]?\\))","g")}return Promise.resolve(b).then(function(a){return c?q.resolveUrl(a,c):a}).then(d||q.getAndEncode).then(function(a){return q.dataAsUrl(a,q.mimeType(b))}).then(function(c){return a.replace(e(b),"$1"+c+"$3")})}function d(d,e,f){function g(){return!a(d)}return g()?Promise.resolve(d):Promise.resolve(d).then(b).then(function(a){var b=Promise.resolve(d);return a.forEach(function(a){b=b.then(function(b){return c(b,a,e,f)})}),b})}var e=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:d,shouldProcess:a,impl:{readUrls:b,inline:c}}}function o(){function a(){return b(document).then(function(a){return Promise.all(a.map(function(a){return a.resolve()}))}).then(function(a){return a.join("\n")})}function b(){function a(a){return a.filter(function(a){return a.type===CSSRule.FONT_FACE_RULE}).filter(function(a){return r.shouldProcess(a.style.getPropertyValue("src"))})}function b(a){var b=[];return a.forEach(function(a){try{q.asArray(a.cssRules||[]).forEach(b.push.bind(b))}catch(c){console.log("Error while reading CSS rules from "+a.href,c.toString())}}),b}function c(a){return{resolve:function(){var b=(a.parentStyleSheet||{}).href;return r.inlineAll(a.cssText,b)},src:function(){return a.style.getPropertyValue("src")}}}return Promise.resolve(q.asArray(document.styleSheets)).then(b).then(a).then(function(a){return a.map(c)})}return{resolveAll:a,impl:{readAll:b}}}function p(){function a(a){function b(b){return q.isDataUrl(a.src)?Promise.resolve():Promise.resolve(a.src).then(b||q.getAndEncode).then(function(b){return q.dataAsUrl(b,q.mimeType(a.src))}).then(function(b){return new Promise(function(c,d){a.onload=c,a.onerror=d,a.src=b})})}return{inline:b}}function b(c){function d(a){var b=a.style.getPropertyValue("background");return b?r.inlineAll(b).then(function(b){a.style.setProperty("background",b,a.style.getPropertyPriority("background"))}).then(function(){return a}):Promise.resolve(a)}return c instanceof Element?d(c).then(function(){return c instanceof HTMLImageElement?a(c).inline():Promise.all(q.asArray(c.childNodes).map(function(a){return b(a)}))}):Promise.resolve(c)}return{inlineAll:b,impl:{newImage:a}}}var q=m(),r=n(),s=o(),t=p(),u={imagePlaceholder:void 0,cacheBust:!1},v={toSvg:b,toPng:d,toJpeg:e,toBlob:f,toPixelData:c,impl:{fontFaces:s,images:t,util:q,inliner:r,options:{}}};"undefined"!=typeof module?module.exports=v:a.domtoimage=v}(this);</script><script>
const input=document.querySelector('#label'),batch=document.querySelector('#batch'),target=document.querySelector('#equipment-note'),button=document.querySelector('#export'),image=document.querySelector('#image-preview'),status=document.querySelector('#status'),embedded=window.self!==window.top;let generation=0,busy=false;window.imageReady=false;image.hidden=true;
function invalidate(){generation++;batch.textContent=input.value;image.removeAttribute('src');image.hidden=true;window.imageReady=false;status.textContent=input.value.trim()?'':'Enter a batch label before exporting';button.disabled=busy||!input.value.trim();}
input.addEventListener('input',invalidate);
window.captureNote=async()=>{if(embedded||busy||!input.value.trim())return;const version=generation;busy=true;input.disabled=true;button.disabled=true;status.textContent='Creating image…';image.removeAttribute('src');image.hidden=true;window.imageReady=false;try{const url=await domtoimage.toPng(target,{bgcolor:"#ffffff"});if(version!==generation)return;image.src=url;await image.decode();image.hidden=false;window.lastPng=url;window.imageReady=true;status.textContent='Image ready for the current batch label.';}catch(error){image.removeAttribute('src');image.hidden=true;status.textContent='Image export failed. Keep the HTML note available.';}finally{busy=false;input.disabled=false;button.disabled=!input.value.trim();}};
button.addEventListener('click',captureNote);
if(embedded){input.hidden=true;document.querySelector('label[for="label"]').hidden=true;button.hidden=true;input.nextElementSibling.textContent='Source block and its prepared Chrome PNG. Use the complete HTML download to edit and export.';const prepared="data:image/png;base64,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";if(prepared){image.src=prepared;image.decode().then(()=>{image.hidden=false;window.imageReady=true;status.textContent='Actual prepared export. New images can be created in the complete HTML file.';}).catch(()=>{image.hidden=true;status.textContent='Open the complete HTML download to create the image.';});}else status.textContent='Open the complete HTML download to create the image.';}else captureNote();
</script></body></html>