在前几天,根据需求使用wangEditor做了一个富文本编辑器,在数据库中有一个字段专门保存其HTML文本数据的.然后,这几天需求是根据这个字段的html文本导出pdf
最终我选择了,html2pdf进行导出pdf,问题如下
context是HTML文本的内容,然后我从中获取了所有的img元素,在进行遍历
因为html2pdf需要的是base64格式的图片.所以我选用canvas进行base64转换
但是不知道为什么怎么都转换不出图片,转换出来的只是HTML2pdf自带的背景看着代码也没啥错
png格式就是白色背景,jpeg就是黑色背景,所选图片并不能绘制上去
放弃了,换了后端的pdf导出
要将 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。
不太可以,我用的就是这种,代码大体一致
要给img加个onload方法,类似img.onload = ()=>{
结合上面的canvas.toDataURL("image/png");
获取到base64url后;
将base64url赋值给img的src;
}