应用场景：在地图图片上对特定的区域进行像素处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvasTest</title>
<link rel="stylesheet" type="text/css" href="css/jquery.gzoom.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.1.custom.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="js/jquery.gzoom.js">
</script>
<script type="text/javascript" src="js/jquery.mousewheel.js">
</script>
<script type="text/javascript" src="js/jquery.ui.core.min.js">
</script>
<script type="text/javascript" src="js/jquery.ui.slider.min.js">
</script>
<script type="text/javascript" src="js/main.js">
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
margin-left: auto;
margin-right: auto;
width: 70%;
}
#gallery a:hover img {
border: 0px solid #fff;
border-width: 5px 5px 5px;
color: #fff;
}
#gallery a:hover {
color: #fff;
}
#gallery img {
margin: 10px;
}
</style>
</head>
<body >
<div class="gzoomwrap" onload="draw()">
<div id="zoom01">
<img id="image" src="" alt=""/>
</div>
</div>
<div >
<canvas id="girl" width="4800" height="2610" style="visibility: hidden"></canvas>
</div>
</body>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("girl");
var ctx = canvas.getContext("2d");
var img0 = new Image();
img0.src = "image/lack.jpg";
var img1 = new Image();
img0.onload = function () {
ctx.drawImage(img0, 0, 0);
for (var i = 0; i < 34; i++) {
for (var j = 0; j < 34; j++) {
ctx.fillStyle = 'rgba(' + Math.floor(255 - 7.5 * i) + ',' +
Math.floor(255 - 7.5 * j) + ',0,1)';
ctx.fillRect(1400 + j * 25, 1400 + i * 25, 25, 25);
}
}
img1.src = canvas.toDataURL("image/jpeg", 1);
document.getElementById("image").src = img1.src;
};
}
draw();
</script>
</html>
网友评论