将 Canvas 转换为图像并保存到光盘答案

【问题标题】：Convert Canvas to image and save to disc将 Canvas 转换为图像并保存到光盘
【发布时间】：2013-10-17 14:05:37
【问题描述】：

已经有很多类似的问题，但由于某种原因，它们并没有解决我的问题。

我的项目是保存一个动态创建的页面（或页面的一部分）。用户可以选择在屏幕上拖动对象并以任意顺序保留它们，然后将此顺序作为图像保存到光盘。

我自己的研究表明我可以使用Draggable from JQuery，这很容易实现。这是我卡住的保存部分。

我关注了几个links，但图像似乎没有保存到光盘，我认为它在 IE 中不起作用！不过，我对 FireFox 很满意，因此使用 toDataUrl() 听起来是最好的方法。

由于我无法让它工作，我决定稍微改变策略并将值传递给后面的代码 (C#)

我的代码的保存部分看起来像

<script>
    function SaveMe() {
        var canvas = document.getElementById("mycanvas");
        var image = canvas.toDataUrl();
        document.getElementById("hideMe").value = image;
    }
</script>

当我在 FireBug 中调试时，我从来没有到达过document.getElementById("hideMe").value = image;。我通过但永远无法通过var image = canvas.toDataUrl(); 这是预期的行为，我认为不是，但没有错误消息？

我的 HTML 正文是

<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.popup_click').show(0).draggable();    
        });    
    </script>

    <form id="form1" runat="server">

        <div class="popup_click">
            <div id="popup_title">Title</div>
        </div>

        <canvas id="mycanvas" class="canvas"></canvas>

        <asp:HiddenField ID="hideMe" runat="server" />
        <asp:Button runat="server" OnClick="ClickMe" text="Click" OnClientClick="SaveMe()"/>

    </form>
</body>

我做错了什么？我在调试模式下本地工作，Visual Studio 2013。

【问题讨论】：

标签： c# javascript jquery html canvas

【解决方案1】：

不太确定，但我过去也遇到过 todataurl() 的问题，这个链接帮助了我

Not able to get data url when using images in kinetic js

【讨论】：

你能分享一下你的错误导致你改变策略吗？
没有错误...只是似乎没有保存，好像 toDataUrl 崩溃了，但没有显示错误消息。虽然 +1 作为您引用的网站正在做我需要的事情
在您发布的链接中，如果我点击保存，我会得到一个弹出框。当我将代码复制并粘贴到我的机器并单击保存时，没有弹出框。什么都没有发生。
sigh....我用的是canvas.toDataUrl();，你用的是canvas.toDataURL();...注意URL是大写的！谢谢

【解决方案2】：

这是我想将画布导出到图像时经常使用的功能，它将图像放入弹出窗口中，以便用户可以使用它做他们想做的事情（我希望这会有所帮助）：

function imageCanvas(evt){
    var imageCanvas = document.createElement('canvas');
    imageCanvas.width = document.documentElement.clientWidth;
    imageCanvas.height = document.documentElement.clientHeight;
    var imageCanvasContext = imageCanvas.getContext("2d");
    imageCanvasContext.fillStyle = document.getElementById("body").style.backgroundColor;
    imageCanvasContext.fillRect(0,0,imageCanvas.width,imageCanvas.height);
    imageCanvasContext.drawImage(mainCanvas,0,0,imageCanvas.width,imageCanvas.height,0,0,imageCanvas.width,imageCanvas.height);
    var dataURL = imageCanvas.toDataURL("image/png");
    var imagePopup = window.open("","fractalLineImage","left=0,top=0,width="+(imageCanvas.width/2)+",height="+(imageCanvas.height/2)+",toolbar=0,resizable=0");
    imagePopup.document.write("<title>Export Image</title>");
    imagePopup.document.write("<img id='exportImage'"
    +" alt=''"
    +" height='"+ imageCanvas.height+"'"
    +" width='"+ imageCanvas.width+"'"
    +" style='position:absolute;left:0;top:0'/>");
    imagePopup.document.close();
    var exportImage = imagePopup.document.getElementById("exportImage");
    exportImage.src = dataURL;
}

【讨论】：