当前位置：
& HTML5 - 使用Canvas做一个在线画图程序（支持把画布保存为图像）
HTML5 - 使用Canvas做一个在线画图程序（支持把画布保存为图像）
发布：hangge
阅读：1961
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();网页上浏览的图片怎么在源代码中找不到存放图片的地址
全部答案（共1个回答）
命令可以提取网页的..包含源码+图片。
个人以前经常玩的。
量多的话，可以用批量采集工具。
如果觉得有必要，就自己写一个。
那个保持如果到本地的话，需要离线查看才能看到有图的。如果断网的话，你有缓冲，不离线查看也没用的吧。或者是，另存为的时候把图片也给保存下来的。
但是现在的服务器很多你另存为的时候，图片是不保存下来的。
因为图片跟网站地址不在同一个域名...
可以用wget试试，这个用d相关信息命令可以提取网页的..包含源码+图片。
个人以前经常玩的。
量多的话，可以用批量采集工具。
如果觉得有必要，就自己写一个。
那个保持如果到本地的话，需要离线查看才能看到有图的。如果断网的话，你有缓冲，不离线查看也没用的吧。或者是，另存为的时候把图片也给保存下来的。
但是现在的服务器很多你另存为的时候，图片是不保存下来的。
因为图片跟网站地址不在同一个域名下的，或是图片在上一级的非域地址下的。
典型的例子就是：
看看新浪微博或博客，你能把新浪微博的模板都下载下来不？
如果你能分析出图片的过滤的话，样式css+背景图，是可以批量下载的。
按住F12 会弹出一个框、然后有一个查看
如果不清楚我可以教你哈
你只能联系上传者，网上是找不到源文件。在百度的图片上传都是有用户名的。
论坛中贴图片有2种方法
第一种是把图片直接上传到论坛上,在发贴的时候会有一个上传图片的选项,点浏览后从你的电脑上选择你要上传的图片后点上传就可以了,这个功能不是...
如果你用win7操作系统自带文件夹浏览缩略图的话，要在文件管理系统内选择合适的显示方式，例如：小图标、中等图标、大图标等，才能显示缩略图
在我的电脑里，点工具，然后点文件夹选项，再点查看，再点显示所有文件和文件夹，就可以了。
答: 没有关系，2者的电气规格和通讯协议不一样。局域网一般都是以太网，有国际通行的标准，网络协议复杂功能强大，电气规格是收发分开，现在已经发展到2发2收共4对线。
答: 它在电缆电视的基础上，将分配网络的主干部分改为光缆，在各个服务节点处完成光电转换，再由同轴电缆将传输信号送到用户家里，可有效地实现Internet访问、电视点播...
答: 用代IP的QQ就可以看
大家还关注
Copyright &
Corporation, All Rights Reserved
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区
相关问答：123456789101112131415三种方法教你如何保存Instagram上的图片
Instagram自发布以来，快速风靡全球，成为一款备受欢迎的图片分享应用程序。它以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享给彼此。尽管在程序中浏览图片是一件有趣的事情，但是如果你想把图片保存下来以便日后查看，这就困难多了。因为你无法从Instagram应用程序上直接保存图片，接下来，教大家把图片保存到你的手机或电脑上。
要知道你没有办法直接下载保存Instagram上的照片。为了保护照片的著作权和版权，Instagram不允许用户直接从应用程序上保存图片。尽管这样做让你感到很头疼，但请记住这也能阻止他人剽窃你的照片，保护你的工作成果。
不要保存或使用他人照片，用以获取商业利益。
在分享他人照片时，请注明照片的出处（照片的原作者）。
使用独立的Instagram下载网站来下载用户的图片。在线搜索“下载Instagram图片”来选择合适的下载网站。这些网站允许你使用他人的用户名搜索到任何Instagram用户，并将它们的照片保存下来。找到目标用户，点击你想保存的图片。在页面最底部有一个“保存图片”的按钮，你可以点击它来进行保存。
你可以在移动设备的网络浏览器上使用这些网站，也可以使用即将发布的“Instagrabbr”应用程序。
尝试使用instagrabbr网站和免费的Instagram下载器。
下载合适的图片保存应用程序，来获取好友的图片。搜索“保存Instagram图片”，找到合适的应用程序。安卓设备和苹果设备上都有很多好用的图片下载应用程序，这些程序会要求你登录你的Instagram账户，并获取“授权”。一旦你授权它们的访问，你就可以下载你和好友照片流里的任意图片了。这些应用程序大部分都是免费的。
授权访问意味着Instagram程序有权获取你Instagram账户里的各类信息。
有时候，随着手机的更新有些程序可能过时落伍了，如果在使用中遇到各类技术难题，请尝试使用其它应用程序。
其它好用的程序有InstaSave、SaveGram、Instagrab、GramDrive下载器、My
InstaAlbum等等。
当然，最方便的就是登录到www.Instagram.com网站。尽管大多数用户都使用他们的手机来访问Instagram，但是这样能更方便地保存图片。不知道怎么登？我教你呀：
首先，进入&http://www.yueyouip.cn下载登录器
无需解压，安装应用程序即可
使用官方免费账号登陆，账号wwwyueyouip.cn
密码yueyou
选择大陆以外的节点连接，大陆以外哪里都行，你高兴就好
查询到国外的IP地址，就可以正常访问了
打开www.instagram.com登陆就可以了，网页版没有限制，看上什么都可以随意保存，就是这么任性
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。MySQL如何存储图片？？？？？
一个向数据库存取image文件的jsp程序
&&&&&&& 我在程序代码里贴了向Mysql数据库写入image代码的程序，可是好多人都是Java的初学者，对于这段代码，他们无法将它转换成jsp，所以我在这在写一下用jsp怎样向数据库写入图像文件。大家先在数据库建这样一张表，我下面的这些代码对任何数据库都通用，只要支持blob类型的
只要大家将连接数据库的参数改一下就可以了。
create table image(id int,content varchar(200),image blob);
如果在sqlserver2000的数据库中，可以将blob字段换为image类型，这在SqlServer2000中是新增的。
testimage.html文件内容如下：
&TITLE&Image File &/TITLE&
&meta http-equiv="Content-Type" content="text/ charset=gb2312"&
&FORM METHOD=POST ACTION="testimage.jsp"&
&INPUT TYPE="text" NAME="content"&&BR&
&INPUT TYPE="file" NAME="image"&&BR&
&INPUT TYPE="submit"&&/FORM&
我们在Form的action里定义了一个动作testimage.jsp，它的内容如下：
&%@ page contentType="text/charset=gb2312"%&
&%@ page import="java.sql.*" %&
&%@ page import="java.util.*"%&
&%@ page import="java.text.*"%&
&%@ page import="java.io.*"%&
&%Class.forName("org.gjt.mm.mysql.Driver").newInstance();
String url="jdbc:mysql://localhost/mysql?user=root&password=&useUnicode=true&characterEncoding=8859_1";
//其中mysql为你数据库的名字，user为你连接数据库的用户，password为你连接数据库用户的密码，可自己改
Connection conn= DriverManager.getConnection(url);
String content=request.getParameter("content");
String filename=request.getParameter("image");
FileInputStream str=new FileInputStream(filename);
String sql="insert into test(id,content,image) values(1,?,?)";
PreparedStatement pstmt=dbconn.conn.prepareStatement(sql);
pstmt.setString(1,content);
pstmt.setBinaryStream(2,str,str.available());
pstmt.execute();
out.println("Success,You Have Insert an Image Successfully");
下面我写一个测试image输出的例子看我们上面程序写的对不对，testimageout.jsp的内容如下：
&%@ page contentType="text/charset=gb2312"%&
&%@ page import="java.sql.*" %&
&%@ page import="java.util.*"%&
&%@ page import="java.text.*"%&
&%@ page import="java.io.*"%&
&%Class.forName("org.gjt.mm.mysql.Driver").newInstance();
String url="jdbc:mysql://localhost/mysql?user=root&password=&useUnicode=true&characterEncoding=8859_1";
//其中mysql为你数据库的名字，user为你连接数据库的用户，password为你连接数据库用户的密码，可自己改
Connection conn= DriverManager.getConnection(url);
String sql = "select image from test where id=1";
Statement stmt=
ResultSet rs=
stmt=conn.createStatement();
rs=stmt.executeQuery(sql);
}catch(SQLException e){}
while(rs.next()) {
res.setContentType("image/jpeg");
ServletOutputStream sout = response.getOutputStream();
InputStream in = rs.getBinaryStream(1);
byte b[] = new byte[0x7a120];
for(int i = in.read(b); i != -1;)
sout.write(b);
in.read(b);
sout.flush();
sout.close();
catch(Exception e){System.out.println(e);}
你运行这个程序，你就会看到刚才你写入美丽的图片就会显示在你面前。怎么样，用jsp来试试。
这种方法把图片写到数据库中会使数据库在短时间内容量飞涨，会影响性能的，另外一种做法将图片存上传到服务器上，
在数据库里只存放图片的路径，这是一个很好的方法。我建议大家采取后面一种方法。
archerfrank
浏览: 8622 次
来自: 杭州
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'