在我的网页中,我从 Firebase 获取了大量图像。从 Firebase 加载这些图像没有问题。作为下一步,我试图用这些图像制作一个 pdf 文件。这是页面中的相关 javascript 代码:
我有一个很长的 for 循环,我在其中添加图像:
var probImagelink = document.getElementById("Question");
var qDiv = document.createElement('div');
probImagelink.appendChild(qDiv);
qDiv.id = 'QuestionBank'+listkey[k];
var qimg = document.createElement('img');
qimg.style.width= "100%";
qimg.src = listq[k];
qimg.id = "QuestionImg"+listkey[k];
qDiv.appendChild(qimg);
数组 listq 包含加载的来自 Firebase 的图像的 url。
pdf创建代码如下:
var doc = new jsPDF();
html2canvas(document.getElementById('QuestionBank'+listkey[k]), {
useCORS : true,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
}
});
但是问题来了。我得到的第一个错误是:
从来源“http://localhost:5000”访问“https://firebasestorage.googleapis.com/******”中的图像已被 CORS 策略阻止:否“Access-Control-Allow” -Origin' header 存在于所请求的资源上。
我得到的第二个错误是:
Uncaught Error :提供的数据不是有效的 base64 字符串 jsPDF.convertStringToImageData
最佳答案
您需要按照项目中的 CORS 配置中的步骤在您的 firebase 项目上安装 gsutil 并禁用 CORS
https://firebase.google.com/docs/storage/web/download-files
关于javascript - 来自 firebase 的图像的 html2canvas jsPdf 访问错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64296780/
相关文章:
angular - 如何限制 NgSelect 下拉面板中显示的项目数?
c# - 无法在启动类中注入(inject)IAntiforgery
python - 我试图将 python 文件转换为 exe 文件,但它不起作用
reactjs - 在 useEffect Hook 中使用 axios 取消 token 时如何修
asp.net-core - 我可以在 AspNetCore WebAPI 中将 Cancellat
javascript - 错误 : Jmeter: Typed variable declarati
html - 使一个 div 填充具有未指定尺寸的表格单元格的整个宽度和高度
python - 在嵌套/平面字符串和整数列表中查找超过 10 的最小数字