test.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script>
  11. function set_redis(key, value) {
  12. $.ajax({
  13. url: "http://127.0.0.1:7379/SET/" + key + "/" + value,
  14. data: "format=json",
  15. dataType: "json",
  16. success: function(data)
  17. {
  18. $("#result").text(data.GET);
  19. }
  20. });
  21. }
  22. </script>
  23. <script>
  24. </script>
  25. var url = "{{ url_for('send_file', filename=filename) }}";
  26. console.log(url);
  27. var file = url;
  28. var file_reader = new FileReader();
  29. typedarray = new Uint8Array(file);
  30. // Loaded via <script> tag, create shortcut to access PDF.js exports.
  31. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  32. var loadingTask = pdfjsLib.getDocument({data : file});
  33. loadingTask.promise.then(function(pdf) {
  34. console.log('PDF loaded');
  35. // Fetch the first page
  36. var pageNumber = 1;
  37. pdf.getPage(pageNumber).then(function(page) {
  38. console.log('Page loaded');
  39. var scale = 1.5;
  40. var viewport = page.getViewport({scale: scale});
  41. // Prepare canvas using PDF page dimensions
  42. var canvas = document.getElementById('the-canvas');
  43. var context = canvas.getContext('2d');
  44. canvas.height = viewport.height;
  45. canvas.width = viewport.width;
  46. // Render PDF page into canvas context
  47. var renderContext = {
  48. canvasContext: context,
  49. viewport: viewport
  50. };
  51. var renderTask = page.render(renderContext);
  52. renderTask.promise.then(function () {
  53. console.log('Page rendered');
  54. });
  55. });
  56. }, function (reason) {
  57. // PDF loading error
  58. console.error(reason);
  59. });
  60. <img src="{{ url_for('send_file', filename=filename) }}" id="drawing"/>
  61. </script>
  62. <script>
  63. var encoded_data = '{{ encoded_data }}';
  64. console.log(encoded_data);
  65. var pdf_data = atob(encoded_data);
  66. console_log(pdf_data);
  67. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  68. var loadingTask = pdfjsLib.getDocument({pdf_data});
  69. loadingTask.promise.then(function(pdf) {
  70. console.log('PDF loaded');
  71. // Fetch the first page
  72. var pageNumber = 1;
  73. pdf.getPage(pageNumber).then(function(page) {
  74. console.log('Page loaded');
  75. var scale = 1.5;
  76. var viewport = page.getViewport({scale: scale});
  77. // Prepare canvas using PDF page dimensions
  78. var canvas = document.getElementById('canvas');
  79. var context = canvas.getContext('2d');
  80. canvas.height = viewport.height;
  81. canvas.width = viewport.width;
  82. // Render PDF page into canvas context
  83. var renderContext = {
  84. canvasContext: context,
  85. viewport: viewport
  86. };
  87. var renderTask = page.render(renderContext);
  88. renderTask.promise.then(function () {
  89. console.log('Page rendered');
  90. });
  91. });
  92. }, function (reason) {
  93. // PDF loading error
  94. console.error(reason);
  95. });
  96. </script>
  97. document.querySelector("#pdf-upload").addEventListener("change", function(e){
  98. var canvasElement = document.querySelector("canvas")
  99. var file = e.target.files[0]
  100. if(file.type != "application/pdf"){
  101. console.error(file.name, "is not a pdf file.")
  102. return
  103. }
  104. var fileReader = new FileReader();
  105. fileReader.onload = function() {
  106. var typedarray = new Uint8Array(this.result);
  107. pdfjsLib.getDocument(typedarray).then(function(pdf) {
  108. // you can now use *pdf* here
  109. console.log("the pdf has ",pdf.numPages, "page(s).")
  110. pdf.getPage(pdf.numPages).then(function(page) {
  111. // you can now use *page* here
  112. var viewport = page.getViewport(2.0);
  113. var canvas = document.querySelector("canvas")
  114. canvas.height = viewport.height;
  115. canvas.width = viewport.width;
  116. page.render({
  117. canvasContext: canvas.getContext('2d'),
  118. viewport: viewport
  119. });
  120. });
  121. });
  122. };
  123. fileReader.readAsArrayBuffer(file);