js将两张图片合成一张图片

2024年5月11日 100次阅读 来源: 夕阳的云

   现在这个需求是在微信分享的时候将要将播放按钮放在分享图片中，因此需要加上传的分享图片和播放图片合着一张图片

drawAndShareImage(bgsrc, src) {
    let canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;
    let context = canvas.getContext('2d');
    context.rect(0, 0, canvas.width, canvas.height);
    let bgImg = new Image();
    bgImg.src = bgsrc;    // 背景图的url
    bgImg.crossOrigin = 'Anonymous';
    bgImg.onload = () => {
        context.drawImage(bgImg, 0, 0, 200, 200);
        let img = new Image();
        img.src = src;    // 需要合进去的图片url
        img.crossOrigin = 'Anonymous';
        img.onload = () => {
            context.drawImage(img, 75, 75, 50, 50);
            let base64 = canvas.toDataURL('image/png');
            console.log(base64); // 这个就是合成后的图片链接，如果需要上传请查看我另外的文章
        }
    }
}

 

    原文作者：夕阳的云
    原文地址: https://blog.csdn.net/qq1246877006/article/details/107803976
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞