htmlCanvas2将html页面生成图片并下载

最新推荐文章于 2025-07-31 08:54:34 发布

一只特立独行的猫猫

最新推荐文章于 2025-07-31 08:54:34 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： html2canvas

本文链接：https://blog.youkuaiyun.com/fhjdzkp/article/details/86249092

本文介绍了如何利用html2canvas技术将html页面转换为图片并实现下载功能。关键步骤包括选取目标div，获取DOM并放大尺寸以避免模糊，创建canvas元素，设置canvas尺寸，并在使用html2canvas时启用useCORS解决跨域问题。在实际应用中，可能会遇到图片不显示（需处理跨域）和字体过小（需设置font-variant）的问题，通过相应调整可以解决这些问题。

需求是需要将html页面保存图片，使用的技术是html2Canvas

主要思路就是我们先找到自己想要获取的是页面的div，然后获取这个dom，然后将获取dom的宽和高，并将其缩放为原来的2倍，这样是为了防止下载的图片模糊。获取到dom后，我们创建一个canvas的对象，然后设置canvas的宽和高。我们在设置html2canvas的时候，要设置 useCORS为true，这个就是设置跨域。

savePic = ()=>{
        var dom = document.getElementsByClassName("print_page_freezer")[0];
        var domWrap = document.getElementsByClassName("print_wrap")[0];

        var width = dom.offsetWidth; 
        var height = domWrap.offsetHeight;
        var scaleBy = 2;

        var canvas = document.createElement('canvas');

        canvas.width = width * scaleBy;

        canvas.height = height * scaleBy;

        canvas.style.width = width * scaleBy + 'px';

        canvas.style.height = height * scaleBy + 'px';

        var context = canvas.getContext('2d');

        context.scale(scaleBy, scaleBy);

        var filename = (new Date()).getTime() + '.' + "png";

        html2canvas(dom, {
            canvas: canv