☰

图片在Chrome中自动缩放

让大图在Chrome窗体内自动调整到适合的缩放大小，一览图片全貌（不会影响图片保存）

  1. // ==UserScript==
  2. // @name         Picture Auto-Resize on Chrome
  3. // @name:zh-cn    图片在Chrome中自动缩放
  4. // @namespace    https://greasyfork.org/users/2646
  5. // @version      0.8
  6. // @description  Auto-Resize on Chrome Picture Preview Tab
  7. // @description:zh-cn  让大图在Chrome窗体内自动调整到适合的缩放大小，一览图片全貌（不会影响图片保存）
  8. // @author       2016+, CLE
  9. // @include      *://*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. if( ! document.contentType.match(/^image\//i) ) return;
  14.  
  15. var img = document.getElementsByTagName("img")[0];
  16.  
  17. var imginfo = document.createElement("div");
  18. imginfo.setAttribute("style", "position:fixed; right:10px; top:5px; z-index:10086; color:#FFF; font-size: 26px; opacity:0.5; text-shadow: 0px 0px 5px #000; padding: 1px; text-align: right;");
  19. document.body.appendChild(imginfo);
  20.  
  21. var imgfsize = -1; var tfs = "unknow";
  22.  
  23. function refinfo(){
  24. 	var infohtml;
  25. 	if(navigator.language=="zh-CN"){
  26. 		infohtml = '图片宽：'+ img.width + ' / ' + img.naturalWidth + 
  27. 			'<br/>图片高：' + img.height + ' / ' + img.naturalHeight;
  28. 		infohtml += '<br/>文件类型：' + document.contentType;
  29. 		if(imgfsize > 0) infohtml += '<br/>文件大小：' + tfs;
  30. 	}else{
  31. 		infohtml = 'Width: '+ img.width + ' / ' + img.naturalWidth + 
  32. 			'<br/>Height: ' + img.height + ' / ' + img.naturalHeight;
  33. 		infohtml += '<br/>File Type: ' + document.contentType;
  34. 		if(imgfsize > 0) infohtml += '<br/>File Size: ' + tfs;
  35. 	}
  36.  
  37. 	imginfo.innerHTML = infohtml;
  38. }
  39.  
  40. var xhr = new XMLHttpRequest();
  41. xhr.open("HEAD", document.location.href, true);
  42. xhr.onreadystatechange = function(){
  43. 	if ( xhr.readyState == 4 ) {
  44. 		if ( xhr.status == 200 ) {
  45. 			imgfsize = Number( xhr.getResponseHeader("Content-Length") );
  46.  
  47. 			if(imgfsize > 0){
  48. 				if(imgfsize < 1024)
  49. 					tfs = imgfsize + " bytes";
  50. 				else if( imgfsize <=1024000 )
  51. 					tfs = (imgfsize/1024).toFixed(2) + " KB";
  52. 				else if( imgfsize >1024000 )
  53. 					tfs = (imgfsize/1024/1024).toFixed(2) + " MB";
  54. 				refinfo();
  55. 			}
  56.  
  57. 		}
  58. 	}
  59. };
  60. xhr.send();
  61.  
  62.  
  63.  
  64. function defsize(){
  65. 	img.height = img.naturalHeight;
  66. 	img.width = img.naturalWidth;
  67. 	refinfo();
  68. }
  69.  
  70. function autoresize() {
  71. 	if ( img.naturalHeight > window.innerHeight || img.naturalWidth > window.innerWidth ) {
  72. 		var hb = 0; var zb = 0; var rat = 0;
  73.  
  74. 		if(img.naturalWidth > window.innerWidth) hb = img.naturalWidth / window.innerWidth;
  75. 		if(img.naturalHeight > window.innerHeight) zb = img.naturalHeight / window.innerHeight;
  76.  
  77. 		if(hb !== 0 && zb !== 0){
  78. 			if(hb >= zb) rat = hb; else rat = zb;
  79. 		} else if (hb !==0) {
  80. 			rat = hb;
  81. 		} else if (zb !==0) {
  82. 			rat = zb;
  83. 		}
  84.  
  85. 		if (rat !==0 ){
  86. 			img.width = img.naturalWidth / rat;
  87. 			img.height = img.naturalHeight / rat;
  88. 		}
  89. 	}
  90. 	refinfo();
  91. }
  92.  
  93. autoresize();
  94. window.onresize = autoresize;
  95.  
  96.  
  97. var defm = false;
  98. window.onkeydown = function(event){
  99. 	switch(event.keyCode) {
  100. 		case 13: //enter
  101. 			if(defm){
  102. 				window.onresize = autoresize;
  103. 				autoresize();
  104. 			}else{
  105. 				window.onresize = null;
  106. 				defsize();
  107. 			}
  108. 			defm = !defm;
  109. 			break;
  110. 		case 27: //escape
  111. 			window.close();
  112. 			break;
  113. 		case 16: //shift
  114. 			if(imginfo.style.display=="none")
  115. 				imginfo.style.display = "block";
  116. 			else
  117. 				imginfo.style.display = "none";
  118. 			break;
  119. 	}
  120. };