当前位置：
& HTML5 - 使用Canvas做一个在线画图程序（支持把画布保存为图像）
HTML5 - 使用Canvas做一个在线画图程序（支持把画布保存为图像）
发布：hangge
阅读：2537
1，在线画图板的开发
（1）页面加载后，我们取得&canvas&对象，为它添加一些处理函数，以便处理不同鼠标操作导致的JavaScript事件：onmousedown、onmouseup、onmouseout、onmousemove。
（2）画布上方了两个工具栏可以选择笔画颜色和笔画粗细。点击里面的&img&元素，会调用对应绑定的方法，从而将 strokeStyle 属性设置不同的颜色，或将 lineWidth 属性设置不同的粗细。
在线Demo如下：
使用右键保存图像 ...
--- paint.html ---
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&Paint&/title&
&link rel="stylesheet" href="Paint.css"&
window.onload = function() {
// 获取画布已经绘图上下文
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
// 画布添加鼠标事件
canvas.onmousedown = startD
canvas.onmouseup = stopD
canvas.onmouseout = stopD
canvas.onmousemove =
// 记录当前是否在画图
var isDrawing =
// 开始画图
function startDrawing(e) {
isDrawing =
// 创建一个新的绘图路径
context.beginPath();
// 把画笔移动到鼠标位置
context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
// 停止画图
function stopDrawing() {
isDrawing =
function draw(e) {
if (isDrawing == true) {
// 找到鼠标最新位置
var x = e.pageX - canvas.offsetL
var y = e.pageY - canvas.offsetT
// 画一条直线到鼠标最新位置
context.lineTo(x, y);
context.stroke();
// 保存之前选择的颜色的画笔 &img& 元素标签
var previousColorE
// 改变画笔颜色
function changeColor(color, imgElement) {
context.strokeStyle =
// 将当前画笔的 &img& 元素标签设置为选中样式
imgElement.className = "Selected";
// 将之前的画笔的 &img& 元素标签恢复默认样式
if (previousColorElement != null) previousColorElement.className = "";
previousColorElement = imgE
// 保存之前选择的粗细的画笔 &img& 元素标签
var previousThicknessE
// 改变画笔粗细
function changeThickness(thickness, imgElement) {
context.lineWidth =
// 将当前画笔的 &img& 元素标签设置为选中样式
imgElement.className = "Selected";
// 将之前的画笔的 &img& 元素标签恢复默认样式
if (previousThicknessElement != null) previousThicknessElement.className = "";
previousThicknessElement = imgE
// 清除画布
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 保存画布
function saveCanvas() {
// 找到预览的 &img& 元素标签
var imageCopy = document.getElementById("savedImageCopy");
// 将画布内容在img元素中显示
imageCopy.src = canvas.toDataURL();
// 显示右键保存的提示
var imageContainer = document.getElementById("savedCopyContainer");
imageContainer.style.display = "block";
&div class="Toolbar"&
- 颜色 -&br&
&img id="redPen" src="pen_red.gif" alt="红色" onclick="changeColor('rgb(212,21,29)', this)"&
&img id="greenPen" src="pen_green.gif" alt="绿色" onclick="changeColor('rgb(131,190,61)', this)"&
&img id="bluePen" src="pen_blue.gif" alt="蓝色" onclick="changeColor('rgb(0,86,166)', this)"&
&div class="Toolbar"&
- 粗细 -&br&
&img src="pen_thin.gif" alt="细" onclick="changeThickness(1, this)"&
&img src="pen_medium.gif" alt="中" onclick="changeThickness(5, this)"&
&img src="pen_thick.gif" alt="粗" onclick="changeThickness(10, this)"&
&div class="CanvasContainer"&
&canvas id="drawingCanvas" width="400" height="200"&&/canvas&
&div class="Toolbar"&
- 操作 -&br&
&button onclick="saveCanvas()"&保存图像&/button&
&button onclick="clearCanvas()"&清除图像&/button&
&div id="savedCopyContainer"&
&img id="savedImageCopy"&&br&
使用右键保存图像 ...
--- paint.css ---
background:
.Toolbar {
font-family: 'Trebuchet MS';
font-size: 14
font-variant: small-
text-align:
background: #F2F7FE;
padding: 10px 15px 3px 10
margin-bottom: 1
margin-right: 1
border: 1px solid #7B899B;
.Toolbar button {
padding: 6
margin: 7px 2
font-variant:
font-size: 12
.CanvasContainer {
border: 1px solid #7B899B;
padding: 2
border: 2px solid #F2F7FE;
img:hover {
border: 2px groove #E4F0FE;
background:
img.Selected {
border: 2px groove #E4F0FE;
#savedCopyContainer {
#savedCopyContainer img {
width: 250
height: 125
2，将画布保存为图像
（1）调用&canvas&的 toDataURL() 方法，可以画布图像数据转换为字符序列并编码为数据URL。
var url = canvas.toDataURL();
（2）toDataURL()方法如果不提供参数，得到的将是一个PNG图片。如果想要其他格式的图片，可以传入相应的 MIME 类型。
var url = canvas.toDataURL("image/jpeg");
（3）数据URL就是一个以 data:image/base64 开头的 base-64 编码的字符串。
data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D
（4）数据URL很适合传输图像，除了可以发送到Web服务器在后台保存下来，也可以作为&img&元素的src属性值显示出来。
// 找到预览的 &img& 元素标签
var imageCopy = document.getElementById("savedImageCopy");
// 将画布内容在img元素中显示
imageCopy.src = canvas.toDataURL();js实现canvas保存图片为png格式并下载到本地的方法
转载 &更新时间：日 15:50:15 & 作者：AaronHuang
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法，非常具有实用价值，需要的朋友可以参考下
整理文档，搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法，稍微整理精简一下做下分享。
1.canvas 保存图片
2.下载到本地
function base64Img2Blob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i & rawL ++i) {
uInt8Array[i] = raw.charCodeAt(i);
return new Blob([uInt8Array], {type: contentType});
function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = base64Img2Blob(content); //new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
aLink.download = fileN
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
downloadFile('ship.png', canvas.toDataURL("image/png"));
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS实现HTML5 Canvas图像数据和图片的互相转化 | HTML5资源教程豆丁微信公众号
君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
Python实例讲解 -- tkinter canvas (设置背景图片及文字)
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口tkinter的canvas问题【python吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：186,649贴子：
tkinter的canvas问题收藏
我在canvas里加了一个图片作为背景，用.place，但是他把我所有画的线都盖住了，我线是后画的。这能怎么解决？
python_总监级名师全程面授,项目实战案例式教学,企业需求无缝对接,助你无忧就业!python,0基础21周快速实现高薪就业,0元试听两周.名额有限,欲报从速.点击抢座
你的place最后在用，先画线在放置看看。而且画线记得括号参数第一个是canvas。我用pack是这样用的，place应该也一样
登录百度帐号