您的位置：首页 > 其它

Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。

2015-01-31 21:43 411 查看
模仿手机图像查看软件用canvas实现一个图像查看器。

目前实现：

利用将图像起点绘制到canvas之外的技术实现了图像的缩放。

包括，图像自适应、图像放大缩小

下一步准备实现：

鼠标拖动图像

截图：



总结下要点与步骤：

要点：图像缩放与自适应要一起做的话，缩放对象实际是canvas，然后图像去对新的canvas做自适应。

步骤：

1.缩放canvas，得到缩放后的canvas的长宽。

2.图像对于缩放后的canvas做自适应，得到图像的长宽。

3.利用旧canvas的中心点与缩放后图像的长宽，计算图像绘制起点。

4.调用drawImage();方法，传入图像，绘制起点，缩放长宽。

本文由 CSDN MIKUScallion 原创，更多canvas案例代码：http://blog.csdn.net/mikuscallion

下面是源代码：

①页面代码

<!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>

②图像工具代码

var MikuCanvasImageUtil = function(){
}
MikuCanvasImageUtil.prototype = {
//---------------------------------------------------------------------------------
//图像在canvas中心区域按照给定比例缩放
//noOver表示是，阻止过度缩放？默认true
//date:2014-1-31
//author:MIKUScallion
scaleImgInCenter:function (context,image,scale,noOver){
//获得原有canvas长宽
var cw = context.canvas.width;
var ch = context.canvas.height;
//获得缩放后的canvas长宽
var scaledCw = cw*scale;
var scaledCh = ch*scale;
//获得相对新canvas的缩放对象
var scaleObj = this.getScaleObj(image,scaledCw,scaledCh,noOver);
//获取原有canvas中心坐标
var canvasCenterX = context.canvas.width/2;
var canvasCenterY = context.canvas.height/2;
//相对于canvas中心点计算，图像顶点
var imageStartPointX = canvasCenterX - scaleObj.width/2;
var imageStartPointY = canvasCenterY - scaleObj.height/2;
//绘制图像
context.drawImage(image,imageStartPointX,imageStartPointY,scaleObj.width,scaleObj.height);
},
//将image缩放后绘制到canvas中心
//date:2014-1-31
//author:MIKUScallion
drawScaleImageInCenter:function(context,image){
//获取canvas中心坐标
var canvasCenterX = context.canvas.width/2;
var canvasCenterY = context.canvas.height/2;
//相对原本的canvas获取缩放对象
var scaleObj = this.getScaleObj(image,context.canvas.width,context.canvas.height);
//计算图像顶点
var imageStartPointX = canvasCenterX - scaleObj.width/2;
var imageStartPointY = canvasCenterY - scaleObj.height/2;
//绘制图像
context.drawImage(image,imageStartPointX,imageStartPointY,scaleObj.width,scaleObj.height);
},
//获得图像相对与一个矩形的缩放对象
//该对象包含：width，height
//date:2014-1-31
//author:MIKUScallion
getScaleObj:function(image,width,height,noOver){
//默认不能过度缩放
noOver = noOver===undefined? true:noOver;
var scaleW,scaleH;
var widthLonger = image.width - width;
var heightLonger = image.height - height;
if(noOver){
//图像无需缩放
if(widthLonger <=0 && heightLonger<=0 ){
scaleW = image.width;
scaleH = image.height;
return {
width:scaleW,
height:scaleH
};
}
}
//固定宽度缩放
if(widthLonger >= heightLonger){
scaleW = width;
var percent = width/image.width;
scaleH = image.height*percent;
}
//固定长度缩放
else{
scaleH = height;
var percent = height/image.height;
scaleW = image.width*percent;
}
//----------------
return {
width:scaleW,
height:scaleH
};
}
}


本文由 CSDN MIKUScallion 原创，更多canvas案例代码：http://blog.csdn.net/mikuscallion


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航