Skip to content

Instantly share code, notes, and snippets.

@cmizony

cmizony/domToImg.js

Created July 27, 2024 18:12
Show Gist options
  • Save cmizony/ec6fabf3569edfad5276a6b674005421 to your computer and use it in GitHub Desktop.
Save cmizony/ec6fabf3569edfad5276a6b674005421 to your computer and use it in GitHub Desktop.
Download ZIP
Convert DOM object to ImageB
Raw
domToImg.js
// ____ ___ __ __ _ ___ __ __ ____
// | _ \ / _ \| \/ | | |_ ___ |_ _| \/ |/ ___|
// | | | | | | | |\/| | | __/ _ \ | || |\/| | | _
// | |_| | |_| | | | | | || (_) | | || | | | |_| |
// |____/ \___/|_| |_| \__\___/ |___|_| |_|\____|
function domToImg (dom, size) {
const canvas = document.createElement('canvas')
canvas.height= size ?? 100
canvas.width= size ??100
const xml = new XMLSerializer().serializeToString(dom)
const svg64 = btoa(xml)
const image64 = 'data:image/svg+xml;base64,' + svg64
const img = new Image()
img.onload = function() {
canvas.getContext("2d").drawImage(img, 0,0)
const dataURL = canvas.toDataURL();
const newWindow = window.open();
newWindow.document.body.innerHTML = `<img src="${dataURL}" alt="Canvas Image">`;
}
img.src = image64
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment