保存画布客户端

的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：//。如果我想将图像保存在特定文件夹中，我该怎么办？

来源

2013-07-17 chinna_82

只需设置一个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>

来源

2013-07-17 06:08:22 markE

在图像保存。如果我想保存在C：// Images文件夹中。 –

当你右键点击图片时，你会得到一个上下文菜单。其中一个上下文菜单选项是“图片另存为”（这个措辞因浏览器而异）。然后导航到您的c：images文件夹，然后按保存按钮。出于安全原因，浏览器不允许将文件编程保存到本地系统，但大多数用户都熟悉和习惯于将图像保存到本地文件系统的右键单击 - 保存方式。 – markE

我的用户将粘贴屏幕截图。我需要在用户粘贴图像后自动保存。如果用户点击并保存，图像将保存在用户本地。我想要它保存服务器，以便管理员可以恢复。 –

保存画布客户端

回答

相关问题