首页 新闻 会员 周边 捐助

react+antd使用html2pdf出现的图片导出问题

0
悬赏园豆:50 [已解决问题] 解决于 2023-09-18 10:11

在前几天,根据需求使用wangEditor做了一个富文本编辑器,在数据库中有一个字段专门保存其HTML文本数据的.然后,这几天需求是根据这个字段的html文本导出pdf
最终我选择了,html2pdf进行导出pdf,问题如下

context是HTML文本的内容,然后我从中获取了所有的img元素,在进行遍历
因为html2pdf需要的是base64格式的图片.所以我选用canvas进行base64转换
但是不知道为什么怎么都转换不出图片,转换出来的只是HTML2pdf自带的背景看着代码也没啥错

问题补充:

png格式就是白色背景,jpeg就是黑色背景,所选图片并不能绘制上去

辣子鸡好吃的主页 辣子鸡好吃 | 初学一级 | 园豆:98
提问于:2023-04-12 13:53
< >
分享
最佳答案
0

放弃了,换了后端的pdf导出

辣子鸡好吃 | 初学一级 |园豆:98 | 2023-04-17 10:10
其他回答(2)
0

要将 Canvas 转换为 Base64,可以使用 JavaScript 的 canvas.toDataURL() 方法。该方法将 Canvas 转换为 Base64 字符串,并返回一个 URL。

以下是一个示例代码,演示如何将 Canvas 转换为 Base64:

javascript
function getBase64Image(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var base64Data = canvas.toDataURL('image/jpeg', 1);
return base64Data;
}
在上面的代码中,我们首先创建一个 Canvas 对象,并设置其宽度和高度。然后,我们使用 getContext('2d') 方法获取 Canvas 上下文,并使用 drawImage() 方法将图像绘制到 Canvas 上。最后,我们使用 toDataURL() 方法将 Canvas 转换为 Base64 字符串,并将其返回。

请注意,toDataURL() 方法的第一个参数是压缩语句,用于指定 Base64 字符串的编码方式。在上面的代码中,我们使用 image/jpeg 作为压缩语句,表示将 Canvas 转换为 JPEG 格式的 Base64。

收获园豆:25
国产小品牌 | 园豆:199 (初学一级) | 2023-04-12 16:21

不太可以,我用的就是这种,代码大体一致

支持(0) 反对(0) 辣子鸡好吃 | 园豆:98 (初学一级) | 2023-04-12 16:33
0

要给img加个onload方法,类似img.onload = ()=>{
结合上面的canvas.toDataURL("image/png");
获取到base64url后;
将base64url赋值给img的src;
}

收获园豆:25
你风致 | 园豆:2215 (老鸟四级) | 2023-05-09 17:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册