Skip to content

Instantly share code, notes, and snippets.

@zhenniuxing

zhenniuxing/pdftoimage.html

Last active April 26, 2019 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zhenniuxing/30440ead4966cad3a4082727801e7b75 to your computer and use it in GitHub Desktop.
Save zhenniuxing/30440ead4966cad3a4082727801e7b75 to your computer and use it in GitHub Desktop.
Download ZIP
using pdf.js implement pdf to image and support for non-latin characters
Raw
pdftoimage.html
<html>
<body>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<script type="text/javascript" src="https://unpkg.com/pdfjs-dist@2.0.943/build/pdf.js"></script>
<script type="text/javascript">
var pdfurl = "~/Content/js/Attachments/File/d1553218164017cb9d87df-f88a-467a-8dcd-1c8d32a13975.pdf";//Replace it with your url of pdf resource
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.0.943/build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument({url:pdfurl,
cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/' , // use cdn load cmaps。
cMapPacked: true, // must set true
});
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
console.log(canvas.toDataURL('image/jpeg'));
});
});
}, function(error){
console.log(error);
}
)
;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment