<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览</title> <style type="text/css">#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script type="text/javascript"> //图片上传预览 IE是用了滤镜。 function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead alt="div和canvas的问题_html/css_WEB-ITnose" >'; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height;// img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else //兼容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead alt="div和canvas的问题_html/css_WEB-ITnose" >'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style="max-width:90%"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; }</script> </head> <body><div id="preview"> <img id="imghead" style="max-width:90%"<%=request.getContextPath()% alt="div和canvas的问题_html/css_WEB-ITnose" >/images/defaul.jpg'></div> <input type="file" onchange="previewImage(this)" /> </body> </html>
你的浏览器不支持？IE版本是多少
canvas要用drawImage方法把图片渲染出来
canvas要用drawImage方法把图片渲染出来
canvas要用drawImage方法把图片渲染出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览</title> <style type="text/css">#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script type="text/javascript"> //图片上传预览 IE是用了滤镜。 function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ canvasPreview(evt.target.result); } reader.readAsDataURL(file.files[0]); } else //兼容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead alt="div和canvas的问题_html/css_WEB-ITnose" >'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style="max-width:90%"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function canvasPreview(url){ var image = new Image(); image.src = url; image.onload = function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.drawImage(this,0,0); } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; }</script> </head> <body><div id="preview"> <img id="imghead" style="max-width:90%"<%=request.getContextPath()% alt="div和canvas的问题_html/css_WEB-ITnose" >/images/defaul.jpg'></div><canvas id="canvas" width="500px" height="500px"> </canvas> <input type="file" onchange="previewImage(this)" /> </body> </html>
bar skrol div
Apakah kaedah penghasilan penghasilan animasi html5?
Bagaimana untuk memaparkan dua div sebelah menyebelah
Perbezaan antara div dan span
Cara menggunakan tag div
Bagaimana untuk memusatkan teks div secara menegak
Maksud div dalam css
Apakah kaedah untuk menukar kata laluan dalam MySQL?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
