电商网站如何设计内容,我的网站搜索不到了,网站设计公司成都,公司改名字重新备案网站会停吗前言#xff1a;我们在网页中经常会用到图片展示#xff0c;通常情况下会给一个固定的宽高来显示这个图片#xff0c;然而从服务器端上传的图片大小是不确定的#xff0c;如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者#xff0c…前言我们在网页中经常会用到图片展示通常情况下会给一个固定的宽高来显示这个图片然而从服务器端上传的图片大小是不确定的如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者让图片们尽可能优美地展现在网页上是一个很愉悦的责任。今天就给太瘦小图片们伸展伸展或者给XXXL号减减肥吧(▽)一、canvas绘图API工欲善其事必先利其器。隆重请出主角canvas绘图函数drawImage()酱酱酱~它能做什么1. 绘制图像将加载的图像绘制到canvas上2. 绘制画布将画好的一个canvas画到另一个canvas上3. 绘制视频差不多就是用来视频截图哇(ο) 好厉害。怎么做(敲黑板今天只教绘制图像啊老师没备课)1. 获取图片//1. 可以直接获取DOM元素var img document.getElementById(imgId)//2. 或者新建一个var img new Image()img.src imgsrc.jpg获取canvas上下文//1. 获取画布var canvas document.getElementById(canvasId)//2. 获取画布上下文var ctx canvas.getContext(2d)在上下文画画img.onload function(){ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)}参数释义drawImage有三种添加参数的情况如下只规定原始图片开始剪切的位置默认填充剩余宽高到画布上drawImage(img,sx,sy)从指定位置裁剪原始图片指定宽高填充到画布上drawImage(img,sx,sy,swidth,sheight)从指定位置裁剪原始图片指定宽高从指定位置开始显示到画布上指定宽高drawImage(img,sx,sy,swidth,sheight,x,y,width,height)这里盗个图解释一下二、拉伸并图片原始图片的宽高较之显示区域较小就需要美美地拉伸一下。1. 原始图片宽高均小于显示区域默认情况下会将原始图片的宽高都扯开成刚好铺满画布。这个就不管了让它自由填充吧freedom~2. 原始图片仅宽度小于显示区域黄色img蓝色canvas默认情况会将图片宽度拉伸高度压缩图片会被压得很~扁~思路将原始图片宽度拉开成现实区域宽度而将高度等比例拉开并且将超出部分上下各剪裁一半。函数参数设置如下ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)3.原始图片仅高度小于显示区域默认情况会将图片高度拉伸宽度压缩图片内容会被挤得很~细~思路将原始图片高度拉开成现实区域宽度而将宽度等比例拉开并且将超出部分左右各剪裁一半。参数设置如下ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)三、压缩并裁剪图片原始图片的宽高较之显示区域较大就需要小小地压缩一下。基本思路在原始图片的宽高均大于显示区域时首先需要确定我们以宽/高中的哪一个为基准进行压缩因此需要计算原始图片的宽/高与显示区域的宽/高的比例以比例高(也就是相差小)的那个作为基准等比例压缩后相差多的那个需要裁减掉一部分。1. dw dh默认情况会将图片高度、宽度分别按各自的比例压缩图片内容会被拉得很~扁~思路将原始图片宽度压缩成现实区域宽度而将高度等比例拉开并且将超出部分上下各剪裁一半。【同拉伸情况2】函数参数设置如下ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)2. dh dw默认情况会将图片高度、宽度按各自比例压缩图片内容会被挤得很~细~思路将原始图片高度拉开成现实区域宽度而将宽度等比例拉开并且将超出部分左右各剪裁一半。【同拉伸情况3】参数设置如下ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)四、小结其实不管是先拉伸再裁剪还是先压缩再裁剪基本思想都是一样的把图片从默认的填充比例中拯救出来让它能等比例地变换大小避免被奇怪的缩放比例搞得颜值比较奇怪。本文中的默认情况均是指直接使用img标签上传图片的情况相当于ctx.drawImage(img,0,0,w,h,0, 0, 300, 200)划重点上文中的代码综合如下var canvas $(.good-img)[0]var ctx canvas.getContext(2d)var img new Image()img.src images/3.jpgimg.onload function () {var w img.widthvar h img.heightvar dw 300/w //canvas与图片的宽高比var dh 200/hvar ratio// 裁剪图片中间部分if(w 300 h 200 || w 300 h 200){if (dw dh) {ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)} else {ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)}}// 拉伸图片else{if(w 300){ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)}else {ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)}}}
