canvas是html5新增的一个功能，它是一个基于状态的绘图协议。
今天，我们就来看看神奇的canvas可以为我们带来如何惊叹的图片处理效果。
下面是我在慕课网学习的一些笔记整理大家可以看看。
1.如何把图片加载到canvas中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var image = new Image()
window.onload = function(){
canvas.width = 1152
canvas.height = 768
image.src = "img.jpg"
image.onload = function(){
context.drawImage( image , 0 , 0 )
}
}
</script>
</body>
</html>
2.实现图片的放大与缩小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var slider = document.getElementById("scale-range")
var image = new Image()
window.onload = function(){
canvas.width = 1152
canvas.height = 768
var scale = slider.value
image.src = "img-lg.jpg"
image.onload = function(){
drawImageByScale( scale )
// slider.onchange = function(){
// scale = slider.value
// drawImage( image , scale )
// }
slider.onmousemove = function(){
scale = slider.value
drawImageByScale( scale )
}
}
}
function drawImageByScale( scale ){
var imageWidth = 1152 * scale
var imageHeight = 768 * scale
//var sx = imageWidth / 2 - canvas.width / 2
//var sy = imageHeight / 2 - canvas.height / 2
//context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height )
x = canvas.width /2 - imageWidth / 2
y = canvas.height / 2 - imageHeight / 2
context.clearRect( 0 , 0 , canvas.width , canvas.height )
context.drawImage( image , x , y , imageWidth , imageHeight )
}
</script>
</body>
</html>
3.实现图片加水印的放大与缩小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>
<canvas id="watermark-canvas" style="display:none;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var slider = document.getElementById("scale-range")
var watermarkCanvas = document.getElementById("watermark-canvas")
var watermarkContext = watermarkCanvas.getContext("2d")
window.onload = function(){
canvas.width = 1152
canvas.height = 768
var image = new Image()
var scale = 1.0
image.src = "img-lg.jpg"
image.onload = function(){
drawImage( image , scale )
slider.onmousemove = function(){
scale = slider.value
drawImage( image , scale )
}
}
//setup watermark canvas
watermarkCanvas.width = 600
watermarkCanvas.height = 100
watermarkContext.font = "bold 50px Arial"
watermarkContext.lineWidth = "1"
watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )"
watermarkContext.textBaseline = "middle";
watermarkContext.fillText( "== liuyubobobo.com ==" , 20 , 50 )
}
function drawImage( image , scale ){
imageWidth = 1152 * scale
imageHeight = 768 * scale
x = canvas.width /2 - imageWidth / 2
y = canvas.height / 2 - imageHeight / 2
context.clearRect( 0 , 0 , canvas.width , canvas.height )
context.drawImage( image , x , y , imageWidth , imageHeight )
context.drawImage( watermarkCanvas , canvas.width - watermarkCanvas.width ,
canvas.height - watermarkCanvas.height )
}
</script>
</body>
</html>
4.实现图片的放大镜效果
操作方式（在画布所显示的图片上按住鼠标左键并拖动，就可以看到放大镜效果）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<canvas id="offCanvas" style="display: none">
</canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var offCanvas = document.getElementById("offCanvas")
var offContext = offCanvas.getContext("2d")
var image = new Image()
var isMouseDown = false
var scale
window.onload = function(){
canvas.width = 1152
canvas.height = 768
image.src = "img-lg.jpg"
image.onload = function(){
offCanvas.width = image.width
offCanvas.height = image.height
scale = offCanvas.width / canvas.width
context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
offContext.drawImage( image , 0 , 0 )
}
}
function windowToCanvas( x , y ){
var bbox = canvas.getBoundingClientRect()
return {x:x-bbox.left , y:y-bbox.top}
}
canvas.onmousedown = function(e){
e.preventDefault()
isMouseDown = true
point = windowToCanvas( e.clientX , e.clientY )
console.log( point.x , point.y )
drawCanvasWithMagnifier( true , point )
}
canvas.onmouseup = function(e){
e.preventDefault()
isMouseDown = false
drawCanvasWithMagnifier( false )
}
canvas.onmouseout = function(e){
e.preventDefault()
isMouseDown = false
drawCanvasWithMagnifier( false )
}
canvas.onmousemove = function(e){
e.preventDefault()
if( isMouseDown == true ){
point = windowToCanvas( e.clientX , e.clientY )
console.log( point.x , point.y )
drawCanvasWithMagnifier( true , point )
}
}
function drawCanvasWithMagnifier( isShowMagnifier , point ){
context.clearRect( 0 , 0 , canvas.width , canvas.height )
context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
if( isShowMagnifier == true ){
drawMagnifier( point )
}
}
function drawMagnifier( point ){
var mr = 200
var imageLG_cx = point.x * scale
var imageLG_cy = point.y * scale
var sx = imageLG_cx - mr
var sy = imageLG_cy - mr
var dx = point.x - mr
var dy = point.y - mr
context.save()
context.lineWidth = 10.0
context.strokeStyle = "#069"
context.beginPath()
context.arc( point.x , point.y , mr , 0 , Math.PI*2 , false )
context.stroke()
context.clip()
context.drawImage( offCanvas , sx , sy , 2*mr , 2*mr , dx , dy , 2*mr , 2*mr )
context.restore()
}
</script>
</body>
</html>
5.图片滤镜效果（黑白化、颗粒化、马赛克、反色、模糊）
原理：canvas可以把画布上面的每一个像素点转换为二维点阵数组对象，每个数组对象可以返回
下面的格式对象
var r = pixelData[i*4+0] //红 var g = pixelData[i*4+1] //黄 var b = pixelData[i*4+2] //蓝
在计算机中，他们每个被分成0-255个等级，分别代表红黄蓝的光学三原色（上过初中物理吧，大自然的颜色都是由这三个颜色混合的），所以在计算机里我们可以描绘出255的三次方个颜色，怎么样够丰富吧，下面的案例就是利用循环遍历操作这三个颜色来实现图片处理的
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
dd{
box-
}
</style>
</head>
<body>
<div style="margin: 20px auto; width:1700px;">
<canvas id="canvasa" width="800" height="560" style="display:block;float:left;border:1px solid #aaa;">
</canvas>
<canvas id="canvasb" width="800" height="560" style="display:block;float:right;border:1px solid #aaa;">
</canvas>
</div>
<div style="clear: both"></div>
<div style="text-align: center; margin-top:50px;font-size:20px;">
<a href = "javascript:greyEffect()" >Grey Effect</a>
<a href = "javascript:blackEffect()" >Black and White Effect</a>
<a href = "javascript:reverseEffect()" >Reverse Effect</a>
<a href = "javascript:blurEffect()" >Blur Effect</a>
<a href = "javascript:mosaicEffect()" >Mosaic Effect</a>
</div>
<script>
var canvasa = document.getElementById("canvasa")
var contexta = canvasa.getContext("2d")
var canvasb = document.getElementById("canvasb")
var contextb = canvasb.getContext("2d")
var image = new Image()
window.onload = function(){
image.src = "autumn.jpg"
image.onload = function(){
contexta.drawImage( image , 0 , 0 , canvasa.width , canvasa.height )
}
}
function greyEffect(){
var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var pixelData = imageData.data
for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){
var r = pixelData[i*4+0]
var g = pixelData[i*4+1]
var b = pixelData[i*4+2]
var grey = r*0.3+g*0.59+b*0.11
pixelData[i*4+0] = grey
pixelData[i*4+1] = grey
pixelData[i*4+2] = grey
}
contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height )
context.putImageData()
}
function blackEffect(){
var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var pixelData = imageData.data
for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){
var r = pixelData[i*4+0]
var g = pixelData[i*4+1]
var b = pixelData[i*4+2]
var grey = r*0.3+g*0.59+b*0.11
if(grey > 125){
pv = 255
}
else{
pv = 0
}
pixelData[i*4+0] = pv
pixelData[i*4+1] = pv
pixelData[i*4+2] = pv
}
contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasa.width , canvasa.height )
}
function reverseEffect(){
var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var pixelData = imageData.data
for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){
var r = pixelData[i*4+0]
var g = pixelData[i*4+1]
var b = pixelData[i*4+2]
pixelData[i*4+0] = 255 - r
pixelData[i*4+1] = 255 - g
pixelData[i*4+2] = 255 - b
}
contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height )
}
function blurEffect(){
var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var tmpPixelData = tmpImageData.data
var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var pixelData = imageData.data
var blurR = 3
var totalnum = (2*blurR + 1)*(2*blurR + 1)
for( var i = blurR ; i < canvasb.height - blurR ; i ++ )
for( var j = blurR ; j < canvasb.width - blurR ; j ++ ){
var totalr = 0 , totalg = 0 , totalb = 0
for( var dx = -blurR ; dx <= blurR ; dx ++ )
for( var dy = -blurR ; dy <= blurR ; dy ++ ){
var x = i + dx
var y = j + dy
var p = x*canvasb.width + y
totalr += tmpPixelData[p*4+0]
totalg += tmpPixelData[p*4+1]
totalb += tmpPixelData[p*4+2]
}
var p = i*canvasb.width + j
pixelData[p*4+0] = totalr / totalnum
pixelData[p*4+1] = totalg / totalnum
pixelData[p*4+2] = totalb / totalnum
}
contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height )
}
function mosaicEffect(){
var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var tmpPixelData = tmpImageData.data
var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height )
var pixelData = imageData.data
var size = 16
var totalnum = size*size
for( var i = 0 ; i < canvasb.height ; i += size )
for( var j = 0 ; j < canvasb.width ; j += size ){
var totalr = 0 , totalg = 0 , totalb = 0
for( var dx = 0 ; dx < size ; dx ++ )
for( var dy = 0 ; dy < size ; dy ++ ){
var x = i + dx
var y = j + dy
var p = x*canvasb.width + y
totalr += tmpPixelData[p*4+0]
totalg += tmpPixelData[p*4+1]
totalb += tmpPixelData[p*4+2]
}
var p = i*canvasb.width+j
var resr = totalr / totalnum
var resg = totalg / totalnum
var resb = totalb / totalnum
for( var dx = 0 ; dx < size ; dx ++ )
for( var dy = 0 ; dy < size ; dy ++ ){
var x = i + dx
var y = j + dy
var p = x*canvasb.width + y
pixelData[p*4+0] = resr
pixelData[p*4+1] = resg
pixelData[p*4+2] = resb
}
}
contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width, canvasb.height )
}
</script>
</body>
</html>
（完）
共有 0 条评论