JQuery html生成图片 | 浮生无事Blog

通过点击页面按钮，将html生成图片下载，用于分享

<!DOCTYPE html>
<html lang="en">
    <div id="hidden-part"></div>
</body>
</html>

$('#shareBtn').click(function () {
            var $posterContent = $('<div class="poster-container" id="poster-container">\n' +
                '  <h1><a href="/">Qiansou123.com</a></h1>\n' +
                '  <p>提供<strong> 影视 | 动漫 | 小说 | 资源 </strong>搜索</p>\n' +
                '  <p>无需登录，‌无需会员，‌<strong>免费在线观看</strong></p>\n' +
                '  <p>提供<strong>免费资源下载</strong></p>\n' +
                '  <p>#剧荒人 #追剧人</p>\n' +
                '</div>');
            $('#hidden-part').html($posterContent);
            html2canvas(document.getElementById('poster-container'), {
                imageTimeout: 15000, //newline
                useCORS: true
            }).then(function(canvas) {
                // 将Canvas转换为Blob对象
                canvas.toBlob(function(blob) {
                    var url = URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = 'qiansou123.png'; // 指定下载文件的名称和格式
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url); // 释放URL对象
                });
            });
            $('#hidden-part').html('');
        });

相关文章