认识

2023年03月22日

柏拉文

越努力，越幸运

一、认识

---

dom-to-image

二、语法

---

const dataUrl = await domtoimage.toSvg(document.getElementById('my-node'));
console.log(dataUrl)

三、场景

---

3.1 DOM 生成 JPEG 格式的图片

function base64ToImage (base64, scale, format,quality=1){
    return new Promise((resolve)=>{
        const canvas = document.createElement('canvas');
        const ctx2D = canvas.getContext('2d');
        ctx2D.imageSmoothingEnabled = false;
        const zoom = window.devicePixelRatio * quality;
        const image = document.createElement('img');
        image.onload = function () {
            canvas.width = image.naturalWidth * scale;
            canvas.height = image.naturalHeight * scale;
            canvas.style.width = image.naturalWidth + 'px';
            canvas.style.height = image.naturalHeight + 'px';
            ctx2D.drawImage(image, 0, 0, canvas.width, canvas.height);
            ctx2D.scale(zoom, zoom);
            const dataUrl = canvas.toDataURL(format, quality);
            resolve(dataUrl);
        };
        image.src = base64;
    })
};

async function domToImage(domId){
    const dom = document.getElementById('my-node')
    const base64 = await domtoimage.toSvg(dom,{
        quality: 1,
        bgcolor: '#fff',
        style: {
            margin: 0,
        },
    });
    const url = await base64ToImage(base64,4,'image/jpeg',1);
    return url;
}

四、问题

---