Canvas图像处理图片查看器图像缩放功能的实现.docxVIP

Canvas图像处理、图片查看器、图像缩放功能的实现模仿手机图像查看软件用canvas实现一个图像查看器。目前实现：利用将图像起点绘制到canvas之外的技术实现了图像的缩放。包括，图像自适应、图像放大缩小下一步准备实现：鼠标拖动图像截图：总结下要点与步骤：要点：图像缩放与自适应要一起做的话，缩放对象实际是canvas，然后图像去对新的canvas做自适应。步骤：1.缩放canvas，得到缩放后的canvas的长宽。2.图像对于缩放后的canvas做自适应，得到图像的长宽。3.利用旧canvas的中心点与缩放后图像的长宽，计算图像绘制起点。4.调用drawImage();方法，传入图像，绘制起点，缩放长宽。下面是源代码：①页面代码[html]?/mikuscallion/article/details\o view plainview plain/mikuscallion/article/details\o copycopy!DOCTYPE?html?html??head??meta?http-equiv=content-type?content=text/html;?charset=utf-8?/??style?type=text/css??canvas{???background-color:?black;???}???.contain{???margin:?0?auto;???width:?480px;???height:?640px;???position:?relative;???}???.scaleSlider{???margin:?0px;???padding:?0px;???position:?absolute;???/*旋转元素*/???transform:rotate(-90deg);???top:?70px;???left:400px;???}???/style??script?type=text/javascript?src=/mikuCanvasImageUtil.js/script??/head??body??div?class=contain??input?id=scaleSlider?class=scaleSlider?type=range?min=0.25?max=4?step=0.01?value=1?/??canvas?id=canvas?width=480?height=640??/canvas??/div??/body??script?type?=?text/javascript??var?canvas?=?document.getElementById(canvas);???var?context?=?canvas.getContext(2d);???var?scaleSlider?=?document.getElementById(scaleSlider);???var?image?=?new?Image();???var?imageUtil?=?new?MikuCanvasImageUtil();???image.src?=miku01.jpg;???image.onload?=?function(){???//将图像缩放后绘制到canvas中央??imageUtil.drawScaleImageInCenter(context,image);???}???scaleSlider.onchange?=?function(){???//清除屏幕??context.clearRect(0,0,canvas.width,canvas.height);???//根据缩放比例将图像在中心缩放??imageUtil.scaleImgInCenter(context,image,scaleSlider.value,false);???}???/script?/html?②图像工具代码[javascript]?/mikuscallion/article/details\o view plainview plain/mikuscallion/article/details\o copycopyvar?MikuCanvasImageUtil?=?function(){??}??MikuCanvasImageUtotype?=?{??//---------------------------------------------------------------------------------??//图像在canvas中心区域按照给定比例缩放??//noOver表示是，阻止过度缩放？默认true??//date:201