JavaScript“保存为”弹出窗口

jxct1oxe  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(183)

我正在做一个项目,我正在使用JavaScript代码来获取网站的截图。
屏幕截图工作正常,在页面上呈现得很好。我想做的不是在页面上显示它,而是在屏幕截图中显示“保存为”弹出窗口。
下面是在页面上显示图像的当前代码:

  1. <script type="text/javascript">
  2. var date = new Date();
  3. var message,
  4. timeoutTimer,
  5. timer;
  6. var proxyUrl = "http://html2canvas.appspot.com";
  7. function addRow(table,field,val){
  8. var tr = $('<tr />').appendTo( $(table));
  9. tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
  10. }
  11. function throwMessage(msg,duration){
  12. window.clearTimeout(timeoutTimer);
  13. timeoutTimer = window.setTimeout(function(){
  14. message.fadeOut(function(){
  15. message.remove();
  16. });
  17. },duration || 2000);
  18. $(message).remove();
  19. message = $('<div />').html(msg).css({
  20. margin:0,
  21. padding:10,
  22. background: "#000",
  23. opacity:0.7,
  24. position:"fixed",
  25. top:10,
  26. right:10,
  27. fontFamily: 'Tahoma' ,
  28. color:'#fff',
  29. fontSize:12,
  30. borderRadius:12,
  31. width:'auto',
  32. height:'auto',
  33. textAlign:'center',
  34. textDecoration:'none'
  35. }).hide().fadeIn().appendTo('body');
  36. }
  37. $(function(){
  38. $('ul li a').click(function(e){
  39. e.preventDefault();
  40. $('#url').val(this.href);
  41. $('button').click();
  42. })
  43. var iframe,d;
  44. $('input[type="button"]').click(function(){
  45. $(iframe.contentWindow).unbind('load');
  46. $(iframe).contents().find('body').html2canvas({
  47. canvasHeight: d.body.scrollHeight,
  48. canvasWidth: d.body.scrollWidth,
  49. logging:true
  50. });
  51. });
  52. $('button').click(function(){
  53. $(this).prop('disabled',true);
  54. var url = $('#url').val();
  55. $('#content').append($('<img />').attr('src','loading.gif').css('margin-top',40));
  56. var urlParts = document.createElement('a');
  57. urlParts.href = url;
  58. $.ajax({
  59. data: {
  60. xhr2:false,
  61. url:urlParts.href
  62. },
  63. url: proxyUrl,
  64. dataType: "jsonp",
  65. success: function(html){
  66. iframe = document.createElement('iframe');
  67. $(iframe).css({
  68. 'visibility':'hidden'
  69. }).width($(window).width()).height($(window).height());
  70. $('#content').append(iframe);
  71. d = iframe.contentWindow.document;
  72. d.open();
  73. $(iframe.contentWindow).load(function(){
  74. timer = date.getTime();
  75. $(iframe).contents().find('body').html2canvas({
  76. canvasHeight: d.body.scrollHeight,
  77. canvasWidth: d.body.scrollWidth,
  78. logging:true,
  79. proxyUrl: proxyUrl,
  80. logger:function(msg){
  81. $('#logger').val(function(e,i){
  82. return i+"\n"+msg;
  83. });
  84. },
  85. ready: function(renderer) {
  86. $('button').prop('disabled',false);
  87. $("#content").empty();
  88. var finishTime = new Date();
  89. var table = $('<table />');
  90. $('#content')
  91. .append('<h2>Screenshot</h2>')
  92. .append(renderer.canvas)
  93. .append('<h3>Details</h3>')
  94. .append(table);
  95. addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
  96. addRow(table,"Total draws", renderer.numDraws);
  97. addRow(table,"Context stacks", renderer.contextStacks.length);
  98. addRow(table,"Loaded images", renderer.images.length/2);
  99. addRow(table,"Performed z-index reorder", renderer.needReorder);
  100. addRow(table,"Used rangeBounds", renderer.support.rangeBounds);
  101. throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
  102. }
  103. });
  104. });
  105. $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
  106. html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
  107. if ($("#disablejs").prop('checked')){
  108. html = html.replace(/\<script/gi,"<!--<script");
  109. html = html.replace(/\<\/script\>/gi,"<\/script>-->");
  110. }
  111. // console.log(html);
  112. d.write(html);
  113. d.close();
  114. }
  115. }); });
  116. });
  117. </script>
wnrlj8wa

wnrlj8wa1#

为此,您可以使用canvas2image
我想你可以加入ready函数:

  1. ready: function(renderer) {
  2. ....
  3. Canvas2Image.saveAsPNG(renderer.canvas);

相关问题