咱就谈谈Canvas和Image在JavaScript中咋“相互作用”呗！
首先，得告诉你， JavaScript真的很有帮助！Canvas和Image这俩家伙，可是它的好助手。什么绘制图形啦、更换图片，画布输出画作，都是咱们经常用的功能。接下来我就简单给你说说，希望对你有所启发
回顾Mozilla Web开发会议上的讨论
跟你说，上周在Mozilla网络开发大会上热闹极了。围绕着Mozilla以后的发展和APP策略，咱们争论了足足好几个小时。其中最惊人的消息是，Facebook竟然出价超过10亿美元买下了很火的手机应用Instagram！这可是一桩大事，引爆了大众热烈的议论声。经过一番思考，我也打算动手搞一款类似于Instagram风格的APP，给你看看！
转换Image为Canvas
Canvas就是个神器，它能用drawImage功能把图片轻松变成画布！操作超简单，而且效果绝佳，在网页设计中作用可大了！
赶紧学下如何用JavaScript把图片变Canvas！先把你要搞的图给拽进去，搞定以后就开始在Canvas上涂抹！
// 把image 转换为 canvas对象
function convertImageToCanvas(image) {
// 创建canvas DOM元素，并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
转换Canvas为Image
想要让你画得飞起的控制台小画画变成真正的图像吗？简单得像吃汉堡一样！使用canvas.toDataURL()这个魔法函数，把Canvas画出的图形变成一段base64编码，然后再新建一个Image对象，给它设定好SRC属性就行！这可是程序员们的基本功，学会了快去炫技！
你看到上面那段没？搞定这几个步骤，Image跟Canvas之间变换不是啥难事。接下来就是要学习图像处理咯～这个对咱们将来做网页设计可是很有用滴！
总结与展望
// 从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
尽管JavaScript可能给人感觉有些难度，但是他真的很神奇，甚至可以直接把Canvas和Image进行快速互换。要是你想搞定 Canvas 到 Image 的转变或是从 Image 变成 Canvas，仅仅需要短短的几句代码就能实现。希望你们学完以后能真正用起来，让这门技巧成为你们项目中别有用心的工具
我们聊聊呗：你对Canvas跟Image转换还有啥疑问？还想知道更多？告诉我你在想啥！
评论0