在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。
不过，图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。因此，开发人员要特别注意，在呈现之前，应确保图片已经加载完毕。
为保证在呈现之前图片已完全加载，我们提供了回调，即仅当图像加载完成时才执行后续代码，如代码清单如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="cv" width="800px" height="800px"></canvas>
<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();
beauty.src = "http://www.whatled.com/content/uploadfile/tpl_options/logo.png";
if(beauty.complete){
drawBeauty(beauty);
}else{
beauty.onload = function(){
drawBeauty(beauty);
};
beauty.onerror = function(){
window.alert(’图片加载失败，请重试’);
};
};
}//load
if (document.all) {
window.attachEvent(’onload’, load);
}else {
window.addEventListener(’load’, load, false);
}
</script>
</body>
</html>
基本绘图
在最基本的画图操作中，你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。
drawImage(image, x, y) var canvas = document.getElementById(‘myCanvas’); var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50); ctx.drawImage(myImage, 125, 125); ctx.drawImage(myImage, 210, 210);
缩放及调整尺寸
改变图像的尺寸，你需要使用重载的drawImage函数，提供给它希望的宽度和高度参数。
drawImage(image, x, y, width, height) var canvas = document.getElementById(‘myCanvas’); var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100); ctx.drawImage(myImage, 125, 125, 200, 50); ctx.drawImage(myImage, 210, 210, 500, 500);
图像裁剪
最后一个drawImage方法的功用是对图像进行裁剪。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域里。
html5在使用drawImage绘图的时候，出现刷新就不显示的问题，原来要想是图片正常显示需要为图片添加一个onload事件，直接看代码
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html" charset="utf8">
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="./1.png";
img.onload=function(){
cxt.drawImage(img,0,0);
};
cxt.drawImage(img,0,0);
</script>
</body>
</html>
图片展示网页往往色彩繁杂，当一个网页上有多张图片的时候用户的注意力就很不容易集中，而且会造成网站整个色调风格的不可把控。
能不能把所有的预览图变成灰度图片，等用户激活某张图片的时候再上色呢？
以前，唯一的方法就是让美工做两张图，一张彩色一张黑白，费时费力。
能不能让js对图片进行一些处理呢？幸运的是，canvas就提供了图片处理的方法。
canvas+js可以让我们对图片进行像素级的操作，我们可以通过操作图像的像素实现各种图片处理效果,如模糊，马赛克，液化，调色等等。
详细代码及注释如下：
<!doctype html>
<html>
<head>
<title>Canvas图像处理</title>
<meta charset=’utf-8’ />
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<style>
h1{text-align:center;}
.outer{width:800px;margin:0 auto;}
img{border:0;width:200px;height:350px;margin:0;padding:0;}
</style>
</head>
<body>
<h1>Canvas图像处理demo</h1>
<div class=’outer’>
<img class=’image’ src=’1.jpg’/>
<img class=’image’ src=’2.jpg’/>
<img class=’image’ src=’3.jpg’/>
<img class=’image’ src=’4.jpg’/>
<img class=’image’ src=’5.jpg’/>
<img class=’image’ src=’6.jpg’/>
<img class=’image’ src=’7.jpg’/>
<img class=’image’ src=’8.jpg’/>
</div>
<script>
/*等图片加载完成后再执行（若图片没有加载完成，则不能正常进行图片处理）*/
$(window).load(function(){
/*克隆一张原图，把当前图片变为灰度图*/
$(’.image’).each(function(){
$(this).css({"position":"absolute"}).wrap("<div class=’img_wrapper’ style=’display: inline-block;position:relative;float:left;’></div>").clone().addClass(’img_grayscale’).css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore($(this));
$(’.img_wrapper’).css({’height’:$(this).height(),’width’:$(this).width()});
this.src=huidu(this.src);
});
/*通过控制彩色图片的透明度模拟上色效果*/
$(’.img_wrapper’).mouseover(function(){
$(this).find(’img:first’).stop().animate({opacity:1},100);
})
$(’.img_wrapper’).mouseout(function(){
$(this).find(’img:first’).stop().animate({opacity:0},100);
});
/*
*function
*函数名称：huidu
*功能：把图片转换为灰度图
*参数：src（原图的url）
*返回值：（转换完成后的图片url）
*/
function huidu(src){
/*创建一个canvas*/
var canvas=document.createElement(’canvas’);
var ctx=canvas.getContext(’2d’);
var img=new Image();
img.src=src;
canvas.height=img.height;
canvas.width=img.width;
ctx.drawImage(img,0,0);
var imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);var data=imgdata.data;
/*灰度处理：求r，g，b的均值，并赋回给r，g，b*/
for(var i=0,n=data.length;i<n;i+=4){
var average=(data[i]+data[i+1]+data[i+2])/3;
data[i]=average;
data[i+1]=average;
data[i+2]=average;
}
ctx.putImageData(imgdata,0,0);
/*返回处理之后的src*/
return canvas.toDataURL();
}
});
</script>
</body>
</html>
