html2canvas页面转为图片遇到的坑：文字叠加到一起

最新推荐文章于 2023-07-27 11:05:57 发布

原创最新推荐文章于 2023-07-27 11:05:57 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #html5 #css #前端

在PC项目中实现点击按钮将页面转换为海报功能时，使用html2canvas遇到问题：文字在生成图片后出现叠加。原因是由于最外层div使用了transform: scale(0.8)导致的不兼容。解决方案是移除该属性，以确保图片正确生成。

项目场景：

PC项目中，点击按钮，由页面转成海报功能，利用html2canvas将dom元素转成图片，然后可以进行右键图片另存为，还可以进行手动点击下载海报

问题描述

页面正常展示，当html2canvas转为图片后，文字全部叠加到了一起

html2canvas(document.getElementById("posterThumbnail"), {
            allowTaint: true,//允许跨域图片，这边要与后端协商，允许图片跨域访问？？
            useCORS: true,//允许访问服务器图片，支持跨域
        }).then(function(canvas) {
            const url = canvas.toDataURL('image/png');// base64数据
            var image = new Image();
            image.src = url;
            image.style.width = '375px';
            image.style.height = '800px';
            let posterMain = document.getElementById("publicCoursePoster");
            posterThumbnail.style.display = 'none';//页面隐藏，图片显示
            posterMain.appendChild(image);
        })