HTML5使用Canvas做一个在线画图程序（支持把画布保存为图像）(2)_H5之家

body {
  background: white;
}

.Toolbar {
  float: left;
  font-family: 'Trebuchet MS';
  font-size: 14px;
  font-variant: small-caps;
  text-align: center;
  background: #F2F7FE;
  padding: 10px 15px 3px 10px;
  margin-bottom: 1px;
  margin-right: 1px;
  border: 1px solid #7B899B;
}

.Toolbar button {
  padding: 6px;
  margin: 7px 2px;
  font-variant: normal;
  font-size: 12px;
}

.CanvasContainer {
  clear: both;
}

canvas {
  border: 1px solid #7B899B;
}

img {
  padding: 2px;
  border: 2px solid #F2F7FE;
}

img:hover {
  border: 2px groove #E4F0FE;
  background: white;
}

img.Selected {
  border: 2px groove #E4F0FE;
}

#savedCopyContainer {
  display: none;
}

#savedCopyContainer img {
  width: 250px;
  height: 125px;
}

2，将画布保存为图像

（1）调用<canvas>的 toDataURL() 方法，可以画布图像数据转换为字符序列并编码为数据URL。
1
var url = canvas.toDataURL();
（2）toDataURL()方法如果不提供参数，得到的将是一个PNG图片。如果想要其他格式的图片，可以传入相应的 MIME 类型。
1
var url = canvas.toDataURL("image/jpeg");
（3）数据URL就是一个以 data:image/png;base64 开头的 base-64 编码的字符串。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D

（4）数据URL很适合传输图像，除了可以发送到Web服务器在后台保存下来，也可以作为<img>元素的src属性值显示出来。