html2canvas
html2canvas copied to clipboard
transfer the Google Icon to canvas Failed
when I use the html2canvas to cteate the screenshoot with the google icons(https://fonts.google.com/icons), I found it only can help create the icon when the style of the [ font-variation-settings: 'FILL' 0] but when I create the sceenshoot with the style setting [ font-variation-settings: 'FILL' 1], it failed, so can u help resolve this issuse? here are the code below:
// html
<span id="googleIcon" class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;">favorite `
// js
let node = document.getElementById('googleIcon');
let showImage = document.getElementById('Image')
createAndUpdateScrrenShootFromObjectLabel(node,showImage)
async function createAndUpdateScrrenShootFromObjectLabel(element,image) {
let PixelRatio = window.devicePixelRatio // 获取设备像素比
try {
if (element) {
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
scale: PixelRatio,
useCORS: true,
}).then((canvas) => {
canvas.willReadFrequently = true;
image.src = canvas.toDataURL("image/png");
})
}
} catch (error) {
console.log('capture', error);
}
}