在客户端保存画布
Save canvas in client side
JavaScript
if (!window.Clipboard) {
var pasteCatcher = document.createElement("apDiv1");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.opacity = 0;
document.body.appendChild(pasteCatcher);
pasteCatcher.focus();
document.addEventListener("click", function() { pasteCatcher.focus(); });
}
window.addEventListener("paste", onPasteHandler);
function onPasteHandler(e)
{
if(e.clipboardData) {
var items = e.clipboardData.items;
if(!items){
alert("Image Not found");
}
for (var i = 0; i < items.length; ++i) {
if (items[i].kind === 'file' && items[i].type === 'image/png') {
var blob = items[i].getAsFile(),
source = window.webkitURL.createObjectURL(blob);
pastedImage = new Image();
pastedImage.src = source;
pasteData();
}
}
}
}
function pasteData()
{
drawCanvas = document.getElementById('drawCanvas1');
ctx = drawCanvas.getContext( '2d' );
ctx.clearRect(0, 0, 640,480);
ctx.drawImage(pastedImage, 0, 0);
}
DIV
<div id="apDiv1" contenteditable='true'>Paste Test</div>
上面的javascript将从剪贴板捕获图像并粘贴到DIV.如何在客户端保存画布。我没有使用任何服务器,所以我需要在客户端保存画布。我发现canvas.toDataURL()
会将内容转换为base64编码的PNG文件,但如果我想将图像保存在本地,该怎么办。比方说,我的C://中有一个Image文件夹。如果我想将图像保存在特定的文件夹中,该怎么办。
只需将html img元素的src设置为canvas.toDataURL()
然后右键单击"另存为"。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillRect(50,50,150,75);
var theImage=document.getElementById("toImage");
theImage.src=canvas.toDataURL();
这里有一个完整的例子:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillRect(50,50,150,75);
var theImage=document.getElementById("toImage");
theImage.src=canvas.toDataURL();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<img id="toImage" width=300 height=300>
</body>
</html>
相关文章:
- 每个客户端保存socket.io数据
- 希望将客户端生成的二进制文件保存到客户端机器
- 如何保存客户端生成的 asp:image 元素
- Socket.io 和 Nodejs:向多个客户端发送响应并且更改未保存(?
- 谷歌浏览器扩展程序在客户端保存文件
- 将客户端生成的数据保存为 JavaScript 中的文件,分块形式保存
- 如何将 html 页面的一部分保存到客户端 (javascript) 或服务器端 asp.net 的图像或 pdf
- 主干 - 渲染客户端视图,然后在保存时创建它们
- Jquery:使用jqgrid将数据w.r.t页面保存在客户端
- 将数据保存到客户端文件
- 在操作方法中保存图像,然后将 URL 返回给客户端
- 如何在javaScript:Jquery中保存/持久化和访问客户端的数据
- 客户端图像调整大小并保存
- 如何从客户端浏览器中的内容生成和提示保存文件
- 我怎么能"保存“;变量客户端,这样我就可以在其他java脚本事件中使用它
- 使用lightswitch html客户端中的自定义方法将数据保存到sql server中
- 来自客户端的Parse.com批处理保存(saveAll)超时
- 我可以用javascript保存客户端状态吗
- 使用 document.location.href 保存客户端数据时,如何向浏览器建议文件名
- 保存客户端生成的图像按钮上单击