렌더링은 다음과 같습니다. 코드는 다음과 같습니다. 코드 복사 코드 로컬 이미지 미리보기 ; <br>#preview{width :100px;height:100px;border:1px solid #000;overflow:hidden;} <br>#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} <br> <br>함수 PreviewImage(파일) <br>{ <br>var MAXWIDTH = 100 <br>var MAXHEIGHT = 100; <br>var div = document.getElementById('preview'); <br>if (file.files && file.files[0]) <br>{ <br>div.innerHTML = '<img id=imghead> '; <br>var img = document.getElementById('imghead'); <br>img.onload = function(){ <br>var ect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 🎜>img.width = 직사각형 너비; <br>img.height = ret.height; <br>img.style.marginLeft = ret.left 'px' <br>img.style.marginTop = ret.top' px'; <br>} <br>var reader = new FileReader(); <br>reader.onload = function(evt){img.src = evt.target.result;} <br>reader.readAsDataURL(file. files[0]) <br>} <br>else <br>{ <br>var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; <br>file.select (); <br>var src = document.selection.createRange().text; <br>div.innerHTML = '<img id=imghead>' <br>var img = document.getElementById('imghead') ; <br>img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; <br>var ect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); '직사각형:' 각형 상단 ',' 각형 왼쪽 ',' 각형 너비 ',' 각형 높이) <br>div.innerHTML = "<div id=divhead 스타일='폭:" 각형.폭 "px;height:" 직사각형 높이 "px;margin-top:" ret.top "px;margin-left:" ret.left "px;" sFilter src ""'></div>"; <br>} <br>} <br>function clacImgZoomParam( maxWidth, maxHeight, width, height ){ <br>var param = {top:0, left:0, width:width, height:height} <br>if ( 너비>maxWidth || 높이> maxHeight ) <br>{ <br>rateWidth = 너비 / maxWidth; <br>rateHeight = 높이 / maxHeight; <br><br>if( rateWidth > rateHeight ) <br> 🎜>param.width = maxWidth; <br>param.height = Math.round(height / rateWidth); <br>}else <br>{ <br>param.width = Math.round(width / rateHeight); 🎜>param.height = maxHeight; <br>} <br>} <br><br>param.left = Math.round((maxWidth - param.width) / 2); round((maxHeight - param.height ) / 2); <br>return param <br>} <br></head> <br><body> ;div id="preview"> ; <br><img id="imghead" 너비=100 높이=100 테두리=0 src='../images/head01_big.jpg'> ; <br><br/ > <br><input type="file" onchange="previewImage(this)" /> <br></html> ><br> </div>
