在客户端保存画布

Question

JavaScript 的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

<div id="apDiv1" contenteditable='true'>Paste Test</div>

Above javascript will capture image from clipboard and paste in the DIV. 上面的javascript将捕获剪贴板中的图像并粘贴到DIV中。 How do I save the canvas in clientside. 如何在客户端保存画布。 I'm not using any server so i need to save the canvas in client side. 我没有使用任何服务器，因此我需要将画布保存在客户端。 I found that canvas.toDataURL() will convert contents as a base64 encoded PNG file, but how do I do if i want the image save in my local. 我发现canvas.toDataURL()会将内容转换为base64编码的PNG文件，但是如果要将图像保存在本地时该怎么办。 Let say, I have a folder Image in my C:// . 假设我的C：//中有一个文件夹Image 。 How do I do if i want the image saved in particular folder. 如果要将图像保存在特定的文件夹中，该怎么办。

Answer 1

Just set an html img element's src to canvas.toDataURL() 只需将html img元素的src设置为canvas.toDataURL（）

Then right-click-save-as. 然后右键单击另存为。

    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();

Here's a complete example: 这是一个完整的示例：

<!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>

在客户端保存画布

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-07-17 06:08:22

在客户端保存画布

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-07-17 06:08:22

解决方案1
1 已采纳 2013-07-17 06:08:22