保存canvas绘制后的图像

canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。

引入图像到 canvas 里需要以下两步基本操作：

1. 获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片（参见例子）
2. 使用drawImage()函数将图片绘制到画布上

我们来看看具体是怎么做的。

获得需要绘制的图片

canvas 的 API 可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的<img>元素

HTMLVideoElement

用一个 HTML 的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement

可以使用另一个 <canvas> 元素作为你的图片源。

ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

这些源统一由 CanvasImageSource类型来引用。

有几种方式可以获取到我们需要在 canvas 上使用的图片。

使用相同页面内的图片

我们可以通过下列方法的一种来获得与 canvas 相同页面内的图片的引用：

• document.images集合
• document.getElementsByTagName()方法
• 如果你知道你想使用的指定图片的 ID，你可以用document.getElementById()获得这个图片

使用其它域名下的图片

在 HTMLImageElement上使用crossOrigin (en-US)属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染 canvas，否则，使用这个图片将会污染 canvas。

使用其它 canvas 元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。

由零开始创建图像

或者我们可以用脚本创建一个新的 HTMLImageElement 对象。要实现这个方法，我们可以使用很方便的Image()构造函数。

var img = new Image(); // 创建一个<img>元素img.src = 'myImage.png'; // 设置图片源地址

当脚本执行后，图片开始装载。

若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片：

var img = new Image(); // 创建 img 元素img.Onload= function(){ // 执行 drawImage 语句}img.src = 'myImage.png'; // 设置图片源地址

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预加载策略超出本教程的范围。

通过 data: url 方式嵌入图像

我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

img.src = 'data:image/png;base64,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***JKuqVgNm4sEvu5EOKzKLoLu3rmfgsEXucWJ+nIyB2CRx+Atuss5La75tNV1bPo0gHpWUi8***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***c37+bxNgw7vAHHU46myiF5KbRSOVpzoKX7up3WJU3AzkSG79WC+wjU6ykmUzXd5CezN6ajKgggofDRu4Th8ezzZTzqiejA8UjLP7VZb5p+33N0fOoH3dZYR1b/x/QcdzeG6la6LRkLa0NKjBRDCdFVZxsq3N/MNHYPMBQKv/rm0vvwaHumBhqaIe7Wz/gqyzQDmnEcGPgXZRyR1dl1CTkQuQf4i6m0PrM28QEwuqInGByu3N2xUsrpFk/CpnbEudngB0rNUU2816/Ndx8jtar57USVmo/3lXBu+dqtPJwvjBCJmCYmyTjq6+y4GSAfdgp1uZnWSUMu***ovkDkbhU4Zb4jklL2EgDdPcp1OKNtbchUc7vZFDRBO2FmEOA4oeN6hR2TjKC+nfDcZSoZeUJmEw/DmwZhClT41m4I+k3Ny6Fkz/PyiOmwOykZScCosOpFk8kvY1CkSGwpeYxl1q4MDNsjfvpk/***tUtkKyRzK1Y55gRZpzla5LBgnMvTwZP1YQSMvZ9iUEeytybcj8nzZ6H3t4eW2Ggv9pPMUXX1d2pN1yAmQdQZMrtCvZqy9MO19+lRl4ZBkG5JNzeEQq7fcgIh9WG6hX1JWpckJ00CHvf3n2z0kj8r+ydkQb***J2VqNdzmhvcNXciYRqnOoRxn0iL8d+ZB0O2HekHt2wo1Qmwlbcx8+myA/qZwZtbkn46b/QfGM4Xu9y40P6zr9qJBHR583S9WMwuZysEqvC5zx95kEe+mwyxPSzr+gg1xIAqNrgBj9n7qlvC2Ms1xrdk17uMNic8uth0rjqRSuNYgKonp2YLc24Ijj98rYAC/sYYfoWKt729NZ+rE0PiF76eE2jVQ9/bAf2EYBIcIpKDidx8s0aVeI2m7FIKkFjRM3PkHsbv2rf/5r9eH0evriSHUZdreuMrj0vhPPPoxfpxf1wdWJBBscXeLt/rg2oOEOA99O8TQaqo+ZIxMHB0obtkNge6Z8rzlXt9VDJlg3WMN3dihjaaWhWMJF23jq0AdPhvIaKgqhtK2yJZwA/X/twDLcoiEahvsSTcmYNyTcz/NJTTPDwWx2/R3KfhA0I5Yuj2Sc7FhaH8tAErViFa2K1jAgA2EThE3FN2iIli6ew8s9L94Lfehx2cATYkKz3WaLRZiSTFQpJ8cGLG2YKZGOGBwLCo4o5QoABJtLAcRW9woxEgU3Faei3LGxjvM69XOo17ktrmUKJo5SdEW4WjyOEUVrhGyNVlpu9G19Sgk2sRN1CfVCIQ+XSg+5A6ry4YQ/8u57LRbpDXuWl2faxQLOb4Dqb2VCmACqQDp3Rh7W1btugfhNpy1GkZvURoBiolPRVvwHLt1jhjse8mjVngoI5RPDqQJfb***vknjy5uclE8d5hOgqvr0lNwnY+w8NW0MDksuSTI1naPSjYy0ZklfHbi6CmwBX2mMOm/WvArQY/svQt5EfseqzGmO/JQAAJZTAUcY3OEZTiV9XX4u2sn6mK+osWBWYQ100m39h7YvgMuPbK/tmmpYSjK9ip4dmAg6XTsD53TSGiOSJwiWE2op4eKLht+RU0oUWTBumU8i3Xwr6CTVnL6O0QoEv+ubISeOEF0bS1kleihZKw26xDIfB6AajWi1AEq2mwqClsh0fzmusNo79v7lWxezAXQSJPqr4XVnCwB1LP9IKgK4nGAaWywoe1AQsAnjYK3+phjEK389LEPDsElgd9c9OpoYTmh9udLpj7fq3f+1ehgD68biJscP/TNGJIHCj/vc3bHlaTvilWEI7d2N1sCyMilEaRUsNzE5HUphYNotbz7fM+0C15UllgHHIr8OhYl4Yp4m8A65zZfMumd42kyzbzkqk6Yn5AstADmYeS0rAeNd3FAogttdqIFTYBGE2rB74nYpR6AXSAAPjNqZ3gjJ82OFm8gajFDYyJ4qFXQ/9Vrk7Uj6/9RdczEkRqUYfnk+d6ly1fzJAL+xkTeVSyupqsh25MzVay6Sta8XOGsz3+xfR+tU8+mokkL7zRsybJ3SMFbhUWSVgRLvuw9Qzxsnc10liOlsU+rY+wKfoZWCBxPi+dVYzWvMVHE6tNu514nSA1iBQm8bhnDlWGPANrB+koRh/SFV3y9GKQMJejBqbHdiQBPD2y+1ASktXzbvqNFuXqIZC5Cb2Qg/qNqzqab1wSS9B2WFgB***w+5p9XOY0pOczIx6GSglqXj2mOHd3vR/hDx6KrOQjtDwCOkaNBH4oj8UlYZ00zI0LhQLa+OfbGVNUk8IhfAPS3AK3aEtY8AYXbtyAQxu106UmxL/GXuSuMBFulrGmo1sP7YmJdpuUfdFw6aQEho6/LoDNXO/SrQxmSvz2K4AbhYQeV9V3RzZ6tgqxsBINUl1olR+5/puEDVjea2WpDWmzEt6gMyYnhEUgA2bRYi/pfERVpQ19mLODKk3A+dl6GA6Scs1SVl8pPhSsc5EBX+jEGtliHPEpDF7APvBUG8urvj+T0QYl6ReF6SFdJOTzHtGLNsqYIm4F5sZweZNB5Wf0KBI6lNnzoC5tq9WpYyQ86M6CaO0jISIk2nsQM+AGcNlPIlPoYrecAehH1MsvsS7PaJ6SUBwgIsyMC/sYADgM64YCnoVDjgY4VVpJ33/GKASs1+BjiOZvZI8HAyhUmnOMqVd2MNawBhnRSow+1s+XZ6YlDwziE9guNsMxcTNE/FT55omddXZ43QTiA9uSEt357EtZYLh9Q4koxoY3+e+MrxNQcJI9LiigBVDBzJ7JqT/9xaBJh7aokDP9GrfMueojLqyduYgq9o7FIfD+m6gGH0eqNP8bDCFUQGfSw3lPigx2Quk1UYOdTxuR9RAHzZooVB7w6RXwji16CFw+wAM7rgiNneZS6ubA0/2T2H1GAzlo5Qy2d/cUfv6k3UPBY3zIUc8mVm8cPMq0C4LZ27Beku81WB3NHwbqvhyd8eSt96P1JTSdsxE6j9PtHwNlZE4wCNTTnHxqkuqSHaQxqxMylhU42n6NX1iGY4PB7lAEhczTQoFfFzeYw5bx1EADkyfyzC8He9saxER6cwkuAGop/fDkuQ+S2e/hzYX2aXN009tq3HjZOAVgB/QKO4C0LiVggRnX2hWPhgAWOu5NguOGFrib4GA8lryR6KmpmCHcrxtK6uw+QqtDuQaOarfKC9xqomNp+oafMfKa6O/LSBCQDeMSFYW1EQBPSNZAVEZEETikAdlsPmubpECJHYAACC6Cv5KOm3ofHV3edyqofIBQK7PGTGKAA9IyiUF3IZsRTDvumwAARmkM5d4Tc4otjBKPqRiQ02lpnbtx29492UDBUqiW6U6bHNGRzxsnq1UcUQFNqsjxdPYZBOE7Wc0/39aV+a2UTwVwJplTKn+AE/r62w2famwXD6aifwe/e28Ec1zuB87DEvpQTdMYr3oV/OSArwAGg4vz4uKCQFBH6U4kuLmhLY+K4UgFzpspj9Jy1wfZh668ysAAAA=';

其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，Javascript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：(比如上图一个还不算太大的图片)

使用视频帧

你还可以使用<video> 中的视频帧（即便视频是不可见的）。例如，如果你有一个 ID 为“myvideo”的<video> 元素，你可以这样做：

function getMyVideo() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); return document.getElementById('myvideo'); }}

它将为这个视频返回HTMLVideoElement对象，正如我们前面提到的，它可以作为我们的 Canvas 图片源。

绘制图片

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。

drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。（SVG 图像必须在 <svg> 指定元素的宽度和高度。）

例子：一个简单的线图

下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制复杂的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。

 function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.Onload= function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = '***/files/5395/backdrop.png'; }

缩放 Scaling

drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。

drawImage(image, x, y, width, height)

这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小

例子：平铺图像

在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50×38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。（图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。）

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.Onload= function(){ for (var i=0;i<4;i++){ for (var j=0;j<3;j++){ ctx.drawImage(img,j*50,i*38,50,38); } } }; img.src = '***/files/5397/rhino.jpg';}

切片 Slicing

drawImage 方法的第三个也是最后一个变种有 8 个新参数，用于控制做切片显示的。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。

例子：相框

在这个例子里面我用到上面已经用过的犀牛图像，不过这次我要给犀牛头做个切片特写，然后合成到一个相框里面去。相框带有阴影效果，是一个以 24-bit PNG 格式保存的图像。因为 24-bit PNG 图像带有一个完整的 8-bit alpha 通道，与 GIF 和 8-bit PNG 不同，我可以将它放成背景而不必担心底色的问题。

我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（display:none）它。两个图像我都赋了 id ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次drawImage）放在 canvas 上，然后再上面套个相框（第二次drawImage）。

<html> <body Onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <div style="display:none;"> <img id="source" src="***/files/5397/rhino.jpg" width="300" height="227"> <img id="frame" src="***/files/242/Canvas_picture_frame.png" width="132" height="150"> </div> </body></html>

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw slice ctx.drawImage(document.getElementById('source'), 33,71,104,124,21,20,87,104); // Draw frame ctx.drawImage(document.getElementById('frame'),0,0);}

示例：画廊 Art gallery example

我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后，为每张画创建一个 canvas 元素并用加上画框然后插入到画廊中去。

在我这个例子里面，所有“画”都是固定宽高的，画框也是。你可以做些改进，通过脚本用画的宽高来准确控制围绕它的画框的大小。

下面的代码应该是蛮简单易懂的了。就是遍历图像对象数组，依次创建新的 canvas 元素并添加进去。可能唯一需要注意的，对于那些并不熟悉 DOM 的朋友来说，是 insertBefore 方法的用法。insertBefore 是父节点（单元格）的方法，用于将新节点（canvas 元素）插入到我们想要插入的节点之前。

<html> <body Onload="draw();"> <table> <tr> <td><img src="***/files/5399/gallery_1.jpg"></td> <td><img src="***/files/5401/gallery_2.jpg"></td> <td><img src="***/files/5403/gallery_3.jpg"></td> <td><img src="***/files/5405/gallery_4.jpg"></td> </tr> <tr> <td><img src="***/files/5407/gallery_5.jpg"></td> <td><img src="***/files/5409/gallery_6.jpg"></td> <td><img src="***/files/5411/gallery_7.jpg"></td> <td><img src="***/files/5413/gallery_8.jpg"></td> </tr> </table> <img id="frame" src="***/files/242/Canvas_picture_frame.png" width="132" height="150"> </body></html>

body { background: 0 -100px repeat-x url(***/files/5415/bg_gallery.png) #4F191A; margin: 10px;}img { display: none;}table { margin: 0 auto;}td { padding: 15px;}

function draw() { // Loop through all images for (i=0;i<document.images.length;i++){ // Don't add a canvas for the frame image if (document.images[i].getAttribute('id')!='frame'){ // Create canvas element canvas = document.createElement('CANVAS'); canvas.setAttribute('width',132); canvas.setAttribute('height',150); // Insert before the image document.images[i].parentNode.insertBefore(canvas,document.images[i]); ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(document.images[i],15,20); // Add frame ctx.drawImage(document.getElementById('frame'),0,0); } }}

控制图像的缩放行为 Controlling image scaling behavior

如同前文所述，过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：

ctx.mozImageSmoothingEnabled = false;ctx.webkitImageSmoothingEnabled = false;ctx.msImageSmoothingEnabled = false;ctx.imageSmoothingEnabled = false;