『壹』 灏嗕竴寮犲皬鍥剧墖浠3*3骞抽摵鍦ㄧ綉椤典笂js锛
瑕佸皢涓寮犲皬鍥剧墖浠 3*3 骞抽摵鍦ㄧ綉椤典笂锛屽彲浠ヤ娇鐢 javaScript 鍜 CSS 鏉ュ疄鐜般傚叿浣撴ラゅ備笅:
鑾峰彇鍥剧墖瀵硅薄锛氫娇鐢 JavaScript 鑾峰彇鍥剧墖瀵硅薄锛屼緥濡備娇鐢 HTML5 瀛樺偍鍔熻兘灏嗗浘鐗囦笂浼犲埌鏈嶅姟鍣锛屾垨鑰呬粠鏈嶅姟鍣ㄤ笅杞藉浘鐗囧苟鑾峰彇鍏跺硅薄銆
鍒涘缓涓涓鏂扮殑鍥剧墖瀵硅薄锛氫娇鐢 CSS 涓鐨 background-image 灞炴у皢鍥剧墖瀵硅薄璁剧疆涓鸿儗鏅鍥剧墖锛屽悓鏃跺皢 background-size 灞炴ц剧疆涓 cover锛屼互浣胯儗鏅鍥剧墖浠 3*3 鐨勬瘮渚嬪钩閾恒
灏嗘柊鍥剧墖瀵硅薄娣诲姞鍒扮綉椤典笂锛氫娇鐢 JavaScript 灏嗘柊鍥剧墖瀵硅薄娣诲姞鍒扮綉椤典笂锛屼緥濡備娇鐢 DOM 鍏冪礌鐨 insertAdjacentHTML 鏂规硶銆
浠ヤ笅鏄涓涓绀轰緥浠ｇ爜:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>骞抽摵鍥剧墖</title>
<style>
body {
background-color: #ccc;
}
.container {
width: 100%;
height: 100%;
background-image: url("small-image.jpg");
background-size: cover;
background-position: center center;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="small-image.jpg" alt="骞抽摵鍥剧墖">
</div>
<script>
const container = document.querySelector(".container");
const img = container.querySelector("img");
img.src = "small-image.jpg";
container.addEventListener("click", () => {
img.src = "";
});
</script>
</body>
</html>
鍦ㄨ繖涓绀轰緥浠ｇ爜涓锛宻mall-image.jpg 鏄浣犺佸钩閾虹殑鍥剧墖鏂囦欢鐨勫悕绉般傚湪 CSS 涓锛屾垜浠浣跨敤 background-image 灞炴у皢鍥剧墖璁剧疆涓鸿儗鏅鍥剧墖锛屽悓鏃跺皢 background-size 灞炴ц剧疆涓 cover锛屼互浣胯儗鏅鍥剧墖浠 3*3 鐨勬瘮渚嬪钩閾恒傚湪 JavaScript 涓锛屾垜浠浣跨敤 querySelector 鏂规硶鑾峰彇瀹瑰櫒鍏冪礌鍜屽浘鐗囧厓绱狅紝骞跺皢瀹冧滑娣诲姞鍒扮綉椤典笂銆傛渶鍚庯紝褰撶敤鎴峰崟鍑诲瑰櫒鍏冪礌鏃讹紝鎴戜滑灏嗗浘鐗囨枃浠剁殑 src 灞炴ч噸缃涓虹┖鍊硷紝浠ヤ娇鍥剧墖鍋滄㈠钩閾哄苟鎭㈠嶅師濮嬬姸鎬併
『贰』 图片按比例缩放js
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
调用的时候
<img onload="javascript:DrawImage(this,100,100)" src="" />
这个是把图片固定在宽和高各是100px,在这区间进行缩放。
『叁』 js压缩图片 到固定像素以内，500k为例
本文旨在探究js压缩图片的两种方式： 改变图片长宽 ， 改变图片质量 ，和结合了以上两者的 最终方案 。
首先，阅读本文需要知道canvas的两个方法
这两个方法具体的说明可以在MDN上查看，关于图片压缩，也有很多现成的博客可以直接用。但是那些博客都有个问题，并没有关心之后图片的压缩质量。
我试着用一个现成的例子去跑了一下，一个1.7M的图片压缩到了23k，堪称像素级毁灭性破坏。
假如一张大图可能包含着很多文字等关键信息，必须上传之后使用方能清晰辨认。所以要压缩之后质量尽可能接近500k的。500k像素以内，就是若一张图宽度为1024，则高度不能超过500。因为图片有其他的信息，也是要占大小的。即不得大于 1024*500 。
所以激答，根据需求，上传图片不能超过500k的情况下尽可能保留图片的清晰度。当然如果可以的情况下用上面提到的 canvas.toDataURL 设置压缩程度为0.9，0.8试试看，图片质量可以接受，大小会有大幅度的缩小。
如果不压缩，靠调整图片长宽去控制上传大小呢？
原理很简单，就是靠不断地缩小限定的最大宽高，直到最终长宽的积小于规定的大小。
这种方法有可能最后得出的图片的大小会略大于规定大小，原因上文也提到过了，如果想使用这种方法，可自行再调整一下。
上面的方法有个问题，就是改变了图片的原始长宽。如果一个图的长宽足够大，压缩图片质量，糊一点但是内容看得清也是ok的嘛。所以，跟上面同理，我们可以不断调整图片的质量设定直到大小合适，那么，如何在图片上传之前知道图片的大小呢？
首先，需要知道的一点是，压缩之后拿到的base64字符串会转成blob对象，然后传给服务端。
可以查阅文档，blob对象有个属性是size
这个size就是上传之后实际的文件大小。
参照上面的思路，可以每次改变 canvas.toDataURL('image/' + fileType, level); level的值，去调整压缩图片质量，然后用blob对象的size去验证是否满足500k以内的需求。
关于 canvas.toDataURL 的level到底是怎么计算的，MDN文档里也没说，写了个循环一次减少0.1的level压缩了几个图片
用加减乘除算了一下，没找到规律，数学不好放弃了（这个东西好像也不是能观察出来的，看结果跟初始大小没啥关系）。
这里要注意的是，有可能遇到超大图片闷早，0.1的level可能不足以压缩到500k，所以小于0.1的时候，改变level递减的差值继续压缩下去
在开始接收到图片的时候给一个loading增加用户的耐心好了，loading万岁~
其实单纯的压缩质量遇到稍大的图片，会导致页面高频计算，然后页面基本就用不了了- -。有尝试过用iphone的一个屏幕截图（10M左右），压的时候稍过一会，整个手机都在发烫，只能杀进程。
所以，若对长度没有特殊的限制，可以做一个缩放，去加快压缩的进度蚂铅雀，提高能压缩的图片大小上限。
页面到了ios上还是不行- -，可以看到最后图片level为0.001，最长边为764。
问题还是循环次数还是过多，计算频率太高。从图中可看出，对于大图来说，初始设定的level和图片尺寸过于宽松，可以优化一下初始level和尺寸。
有的时候还会遇到一张图片无论如何也压不到500k，就是上一次和这次的压缩后大小没有变化，这种情况需要抛错，不让循环继续。
大图片的等待时间稍长，可以给用户先预览一个base64的图片增加等待耐心，方法名为 getImgBase64 ,这里都一并给出了
解决的隐患：上面这个方案会出现我需要一个500k的照片，压到了520k之后，再压了一次。有时候这最后的一次会特别夸张，直接将图片弄到了几十k。
参考了： https://github.com/WangYuLue/image-conversion
这个库里面有个方法 compressAccurately ,这个方法可以比较精准地压缩。偷偷翻了一下源码。
其实上一个方案的痛点就在于，如何在每一个压缩循环里处理尺寸和压缩比例。
总结
如有纰漏，欢迎指正
『肆』 js或css怎么图片随屏幕分辨率等比例缩放
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:auto0px;padding:auto0px;text-align:center;}
.imgBox,.imgBoximg{width:100%;height:100%;}
</style>
</head>
<body>
<divclass="imgBox">
<imgsrc="1.jpg"/>
</div>
</body>
</html>
如上代码可以实现，把图片版换一下就权OK了，希望可以帮到你。
『伍』 js实现网页 高度和宽度成比例的代码
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在
IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
复制代码 代码如下:
<!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>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
『陆』 缃戠粶缂栬緫鍦╝sp.net涓濡備綍鑷鍔ㄨ皟鏁翠笂浼犲浘鐗囩殑鍍忕巼澶у皬(瀹介珮)
鑷鍔ㄨ皟鏁翠笂浼犲浘鐗囧ぇ灏 鍙浠ユ湁涓ょ嶆柟娉曪細
1鏄涓婁紶鏃跺欏悓鏃剁敓鎴愬浘鐗囩缉鐣ュ浘锛
2鏄鍦ㄦ樉绀哄浘鐗囨椂鍊欙紝绛夋瘮渚嬪帇缂 鍥剧墖澶у皬 杩欎釜鐢╦s鍙浠ュ疄鐜帮紱
鐢熸垚缂╃暐鍥句唬鐮(C#)锛
/// <summary>
/// 鐢熸垚缂╃暐鍥
/// </summary>
/// <param name="originalImagePath">婧愬浘璺寰勶紙鐗╃悊璺寰勶級</param>
/// <param name="thumbnailPath">缂╃暐鍥捐矾寰勶紙鐗╃悊璺寰勶級</param>
/// <param name="width">缂╃暐鍥惧藉害</param>
/// <param name="height">缂╃暐鍥鹃珮搴</param>
/// <param name="mode">鐢熸垚缂╃暐鍥剧殑鏂瑰紡</param>
public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
{
System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);
int towidth = width;
int toheight = height;
int x = 0;
int y = 0;
int ow = originalImage.Width;
int oh = originalImage.Height;
switch (mode)
{
case "HW"://鎸囧畾楂樺界缉鏀撅紙鍙鑳藉彉褰锛
break;
case "W"://鎸囧畾瀹斤紝楂樻寜姣斾緥
toheight = originalImage.Height * width / originalImage.Width;
break;
case "H"://鎸囧畾楂橈紝瀹芥寜姣斾緥
towidth = originalImage.Width * height / originalImage.Height;
break;
case "Cut"://鎸囧畾楂樺借佸噺锛堜笉鍙樺舰锛
if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
{
oh = originalImage.Height;
ow = originalImage.Height * towidth / toheight;
y = 0;
x = (originalImage.Width - ow) / 2;
}
else
{
ow = originalImage.Width;
oh = originalImage.Width * height / towidth;
x = 0;
y = (originalImage.Height - oh) / 2;
}
break;
default:
break;
}
//鏂板缓涓涓猙mp鍥剧墖
System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
//鏂板缓涓涓鐢绘澘
Graphics g = System.Drawing.Graphics.FromImage(bitmap);
//璁剧疆楂樿川閲忔彃鍊兼硶
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//璁剧疆楂樿川閲,浣庨熷害鍛堢幇骞虫粦绋嬪害
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//娓呯┖鐢诲竷骞朵互閫忔槑鑳屾櫙鑹插～鍏
g.Clear(Color.Transparent);
//鍦ㄦ寚瀹氫綅缃骞朵笖鎸夋寚瀹氬ぇ灏忕粯鍒跺師鍥剧墖鐨勬寚瀹氶儴鍒
g.DrawImage(originalImage, new Rectangle(0, 0, towidth, toheight),
new Rectangle(x, y, ow, oh),
GraphicsUnit.Pixel);
try
{
//浠jpg鏍煎紡淇濆瓨缂╃暐鍥
bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch (System.Exception e)
{
throw e;
}
finally
{
originalImage.Dispose();
bitmap.Dispose();
g.Dispose();
}
}
绛夋瘮渚嬪帇缂╃殑js浠ｇ爜濡備笅:
function DrawImage(ImgD,iwidth,iheight){
//鍙傛暟(鍥剧墖,鍏佽哥殑瀹藉害,鍏佽哥殑楂樺害)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
鐢ㄦ硶锛
<img id="img1" src='鍥剧墖鍦板潃' alt='' onload="javascript:DrawImage(this,130,150)" />
『柒』 如何利用JS或者CSS样式来自动调整图片大小
js版和css版自动按比例调整图片大小方法，分别如下：
<title>javascript图片大小处理函数</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>