在客户端保存画布答案

【问题标题】：Save canvas in client side在客户端保存画布
【发布时间】：2013-07-15 13:20:24
【问题描述】：

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

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

只需将 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>

【讨论】：

图像的保存位置。如果我想保存在 C://Images 文件夹中。
当您右键单击图像时，您将获得一个上下文菜单。上下文菜单选项之一是“将图片另存为”（此措辞因浏览器而异）。然后导航到您的 c:images 文件夹并按保存按钮。出于安全原因，浏览器不允许以编程方式将文件保存到本地系统，但大多数用户都熟悉并习惯使用右键单击另存为将图像保存到本地文件系统的方法。
我的用户将粘贴屏幕截图。用户粘贴图像后，我需要自动保存。如果用户右键单击并保存，图像将保存在用户本地。我希望它保存服务器，以便管理员可以检索回来。
我很困惑......你的问题是“我没有使用任何服务器，所以我需要将画布保存在客户端”。无论如何，如果您想将 dataURL 发送到服务器，只需执行 AJAX 发布即可。
很抱歉让您感到困惑。是的，我没有任何服务器（PHP 或 Perl）。我需要将图像保存在我的 HTML 项目的 Image 文件夹中。