Javascript 如何将从PDFJS.getDocument中的canvas.toBlob()创建的url保存到数组?
我在画布上呈现pdf页面。然后,我想将从canvas blob创建的url保存到数组中,以便在该方法之外进行访问。我可以把它保存到数组中。但是当我使用console.log数组时,它会显示Javascript 如何将从PDFJS.getDocument中的canvas.toBlob()创建的url保存到数组?,javascript,arrays,pdf.js,pdfjs,Javascript,Arrays,Pdf.js,Pdfjs,我在画布上呈现pdf页面。然后,我想将从canvas blob创建的url保存到数组中,以便在该方法之外进行访问。我可以把它保存到数组中。但是当我使用console.log数组时,它会显示{key:array(0)},而不是{key:array(2)}。在我的例子中,0应该是2,因为我添加了两个值。我可以在控制台上看到数组的值。但是,无法在此方法之外通过索引访问值 在方法之外: 在方法内部(我显示循环的第二个输出,所以它显示所有 内部值): 在第二个输出中,它显示了数组(2),这些数组是内部
{key:array(0)}
,而不是{key:array(2)}
。在我的例子中,0应该是2,因为我添加了两个值。我可以在控制台上看到数组的值。但是,无法在此方法之外通过索引访问值
在方法之外:
在方法内部(我显示循环的第二个输出,所以它显示所有
内部值):
在第二个输出中,它显示了数组(2)
,这些数组是内部的数值
我无法使用索引访问该值(a['key'][0]
)。它显示未定义。当我在函数内部尝试时,它会显示所需的输出
<?php
ob_start();
require_once('../../../library/tcpdf/tcpdf.php');
$pdf = new TCPDF();
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
$pdf->AddPage();
$html_p1 = 'Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or other type of compatible computer. Text messages may be sent over a cellular network, or may also be sent via an Internet connection';
//echo $html;
$pdf->writeHTML($html_p1, true, 0, true, 0);
$pdf->AddPage();
$html_p2 = 'A telephone call is a connection over a telephone network between the called party and the calling party.';
$pdf->writeHTML($html_p2, true, 0, true, 0);
$base64PdfString = $pdf->Output('', 'E');
$base64PdfArray = explode("\r\n", $base64PdfString);
$base64 = '';
for($i = 5; $i < count($base64PdfArray); $i++)
{
$base64 .= $base64PdfArray[$i];
}
?>
<html>
<head>
<script type="text/javascript" src="../../../library/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../plugin/pdf-flipbook-master/pdfjs/build/pdf.js"></script>
<script>
//function
const b64toBlob = (b64Data, contentType='', sliceSize=512) =>
{
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
{
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++)
{
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
function getCanvasBlob(canvas)
{
return new Promise(function(resolve, reject)
{
canvas.toBlob(function(blob)
{
resolve(blob)
})
})
}
</script>
<script>
$(document).ready(() =>
{
const contentType ='application/pdf';
const b64Data ='<?php echo $base64;?>';
const blob =b64toBlob(b64Data, contentType);
const blobUrl =URL.createObjectURL(blob);
var a={key:[]};
PDFJS.getDocument({ url: blobUrl }).then(function(pdf_doc)
{
__PDF_DOC = pdf_doc;
__TOTAL_PAGES = __PDF_DOC.numPages;
var div_container = document.querySelector('.flipbook');
for(let i=1; i<=__TOTAL_PAGES; i++)
{
pdf_doc.getPage(i).then(function(page)
{
var scale = 1;
var viewport = page.getViewport(scale);
var pag1 =document.createElement('canvas');
//pag1.id ='Pg_1';
//$("#Pg_1").hide();
var context1 =pag1.getContext('2d');
pag1.height =viewport.height;
pag1.width =viewport.width;
var renderContext =
{
canvasContext: context1,
viewport: viewport
};
page.render(renderContext).then(function()
{
div_container.appendChild(pag1);
pag1.toBlob(function(blob)
{
var burl =URL.createObjectURL(blob);
a['key'].push(burl);
console.log(a);
console.log(a['key'][0]);
}, 'image/png');
/*c_blob=getCanvasBlob(blob);
c_blob.then(function(blob)
{
//do stuff with blob
var burl =URL.createObjectURL(blob);
a['key'].push(burl);
}, function(err) {
console.log(err)
});*/
//$("#Pg_1").remove();
});
});
}
})
console.log(a['key'][0]);
console.log(a);
//b={key:[]}
//b['key'].push(1234);
//console.log(b);
})
</script>
</head>
<body>
<div class="flipbook"></div>
</body>
</html>
//作用
const b64toBlob=(b64Data,contentType='',sliceSize=512)=>
{
常量ByTechCharacters=atob(B64数据);
常量字节数组=[];
for(让offset=0;offset
{
const contentType='application/pdf';
常量b64Data='';
const blob=b64toBlob(b64Data,contentType);
const blobUrl=URL.createObjectURL(blob);
var a={key:[]};
getDocument({url:blobUrl})。然后(函数(pdf_doc)
{
__PDF_DOC=PDF_DOC;
__总页数=\uuuuupdf\udoc.numPages;
var div_container=document.querySelector(“.flipbook”);
for(设i=1;i变量a
位于文档准备就绪时运行的匿名函数中--
它不是全局作用域。如果移动该行,它将起作用
var a={key:[]};
$(document).ready(() =>
排队前
var a={key:[]};
$(document).ready(() =>
这将使它成为一个全局变量。谢谢您的回复。@Samyok Nepal,我试过了。但是,仍然显示出相同的结果。