问题描述
我正在基于HTML5画布制作白板。我添加了许多功能,例如上传图像,铅笔,橡皮擦,形状等。对于上传pdf功能,我使用pdf.js将pdf文件上传到画布。我正在使用输入标签获取文件。尝试将pdf呈现到画布时,出现错误“未捕获的TypeError:无法读取FileReader.reader.onloadend处未定义的属性'GlobalWorkerOptions'”。这是我的HTML
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
,输入标签
<div class="tool" data-upload-type="pdf" title="Uplaod PDF File">
<input type="file" id="file" accept="application/pdf">
<label for="file">
<img src="images/upload_pdf_icon.png">
</label>
</div>
JavaScript
document.querySelectorAll("[data-upload-type").forEach(
upload_type => {
upload_type.addEventListener("click",e => {
let file_type = upload_type.getAttribute("data-upload-type");
let file_object = document.getElementById("file");
if(file_type == "pdf"){
file_object.addEventListener("change",function(e){
if(e.target.files){
let file = e.target.files[0];
pixieBoard.uploadPdf(file);
}});
}
});
})
和uploadPdf函数
uploadPdf(file){
var reader = new FileReader();
var self = this;
reader.readAsDataURL(file);
reader.onloadend = function(event) {
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument({url:event.target.result})
loadingTask.promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 0.75;
var viewport = page.getViewport({scale: scale});
var renderContext = {
canvasContext: self.context,viewport: viewport
};
page.render(renderContext);
self.context.clearRect(0,self.whiteboard.width,self.whiteboard.height);
self.context.beginPath();
})})}
}
有人可以帮我解决这个问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)