console
const block = document.querySelector('.node-type-advanced_hero')
const focusDom = block.cloneNode(true);
document.body.appendChild(focusDom);
html2canvas(focusDom, {
useCORS: true,
removeContainer: true,
scale: 1920 / 600,
onclone(document, element) {
element.style.width = '600px';
element.removeChild(
element.querySelector('#easy-email-extensions-InteractivePrompt-FocusTooltip'),
);
document.body.appendChild(element);
},
}).then(canvas => {
const domHeigth = focusDom.offsetHeight;
focusDom.remove();
console.log(canvas.toDataURL())
}).catch(err => {
console.error(err);
});
<div data-selector="0-2-1-3-1-1-1-1-3" class="email-block node-idx-content.children.[0].children.[0] node-type-advanced_hero" role="tab" tabindex="0" style="max-width: 600px; margin: 0px auto;">
<table data-selector="0-2-1-3-1-1-1-1-3-1" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<tbody data-selector="0-2-1-3-1-1-1-1-3-1-1">
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1" style="vertical-align: top;">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-1" style="width: 0.01%;">
</td><td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2" style="vertical-align: top; padding: 100px 0px; background: url("https://image.brandai.shop/upload/aurlar/20230802/1690961191494.jpeg") center center / cover no-repeat rgb(255, 255, 255);" background="https://image.brandai.shop/upload/aurlar/20230802/1690961191494.jpeg">
<div data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3" class="mj-hero-content" style="margin: 0px auto;">
<table data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0px; width: 100%;">
<tbody data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1">
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1">
<table data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0px; width: 100%;">
<tbody data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1">
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-1">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-1-1" align="center" class="email-block node-idx-content.children.[0].children.[0].children.[0] node-type-text" style="word-break: break-word; padding: 10px 25px; font-size: 0px;">
<div data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-1-1-1" contenteditable="true" data-content_editable-type="rich_text" data-content_editable-idx="content.children.[0].children.[0].children.[0].data.value.content" style="color: rgb(255, 255, 255); text-align: center; line-height: 45px; font-weight: 400; font-size: 45px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;">We Serve Healthy & Delicious Foods</div>
</td>
</tr>
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-3">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-3-1" align="center" class="email-block node-idx-content.children.[0].children.[0].children.[1] node-type-text" style="word-break: break-word; padding: 10px 25px; font-size: 0px;">
<div data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-3-1-1" contenteditable="true" data-content_editable-type="rich_text" data-content_editable-idx="content.children.[0].children.[0].children.[1].data.value.content" style="color: rgb(255, 255, 255); text-align: center; line-height: 1.5; font-weight: normal; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.<br></div>
</td>
</tr>
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1" align="center" class="email-block node-idx-content.children.[0].children.[0].children.[2] node-type-button" role="tab" tabindex="0" style="word-break: break-word; padding: 10px 25px; font-size: 0px;">
<table data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1-1" border="0" cellpadding="0" cellspacing="0" role="presentation" style="line-height: 100%; border-collapse: separate;">
<tbody data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1-1-1">
<tr data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1-1-1-1">
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1-1-1-1-1" align="center" bgcolor="#f3a333" role="presentation" valign="middle" style="background: rgb(243, 163, 51); text-align: center; cursor: auto; border-radius: 30px; border: none;">
<a data-selector="0-2-1-3-1-1-1-1-3-1-1-1-2-3-1-1-1-1-1-1-5-1-1-1-1-1-1" href="#" target="_blank" tabindex="-1" contenteditable="true" data-content_editable-type="text" data-content_editable-idx="content.children.[0].children.[0].children.[2].data.value.content" style="border-radius: 30px; padding: 10px 25px; text-transform: none; text-decoration: none; margin: 0px; line-height: 120%; font-weight: normal; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: rgb(255, 255, 255); background: rgb(243, 163, 51); display: inline-block;">
Get Your Order Here!
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td data-selector="0-2-1-3-1-1-1-1-3-1-1-1-4" style="width: 0.01%;">
</td></tr>
</tbody>
</table>
<div id="easy-email-extensions-InteractivePrompt-FocusTooltip" style="position: absolute; width: 100%; height: 100%; pointer-events: none; left: 0px; top: 0px; z-index: 1;"><style>
.email-block {
position: relative;
}
</style><div style="position: absolute; z-index: 9999; right: 0px; top: 50%;"><div data-type="advanced_hero" draggable="true" style="cursor: grab;"><div style="position: absolute; background-color: var(--selected-color); color: rgb(255, 255, 255); height: 28px; width: 28px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border-radius: 50%; cursor: grab; pointer-events: auto; -webkit-user-drag: element;"><div class="iconfont icon-move" style="cursor: grab; pointer-events: auto; color: rgb(255, 255, 255);"></div></div></div></div><div style="position: absolute; font-size: 14px; z-index: 2; left: 0px; top: 0px; width: 100%; height: 100%; outline-offset: -2px; outline: 2px solid var(--selected-color);"></div><div style="position: absolute; font-size: 14px; z-index: 3; left: 0px; top: 0px; width: 0%; height: 100%;"><div id="easy-email-extensions-InteractivePrompt-Toolbar" style="height: 0px; z-index: 100;"><div style="font-size: 14px; line-height: 22px; pointer-events: auto; color: rgb(255, 255, 255); transform: translateY(-100%); display: inline-flex;"><div style="color: rgb(255, 255, 255); background-color: var(--selected-color); height: 22px; display: inline-flex; padding: 1px 5px; box-sizing: border-box; white-space: nowrap; max-width: 300px; overflow: hidden;">Hero</div><div style="display: flex; align-items: center; justify-content: center; pointer-events: auto;"><div class="iconfont icon-back-parent" style="color: rgb(255, 255, 255); background-color: var(--selected-color); height: 22px; font-size: 12px; line-height: 22px; width: 22px; display: flex; pointer-events: auto; cursor: pointer; justify-content: center;"></div><div class="iconfont icon-copy" style="color: rgb(255, 255, 255); background-color: var(--selected-color); height: 22px; font-size: 14px; line-height: 22px; width: 22px; display: flex; pointer-events: auto; cursor: pointer; justify-content: center;"></div><div class="iconfont icon-delete" style="color: rgb(255, 255, 255); background-color: var(--selected-color); height: 22px; font-size: 14px; line-height: 22px; width: 22px; display: flex; pointer-events: auto; cursor: pointer; justify-content: center;"></div></div></div></div></div></div></div>