使用 phonegap 保存 HTML 画布内容的问题答案

【问题标题】：Issue with saving HTML canvas conent using phonegap使用 phonegap 保存 HTML 画布内容的问题
【发布时间】：2014-10-04 04:51:11
【问题描述】：

我有一个 HTML 画布，我可以在其中进行签名，为了保存画布内容，我使用了来自以下 URL 的插件，

https://github.com/devgeeks/Canvas2ImagePlugin

使用此插件后，我遇到了一个问题，即图像正在保存到手机的图库中，但图像是空白图像，只是黑屏。画布内容未保存。我们如何获取画布内容并将其保存在手机的图库中？

脚本：

var sigCapture;

   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady()
     {
      $(document).ready(function() {
         sigCapture = new SignatureCapture( "signature" );
      });
     }


   function saveCanvas()
   {
      window.canvas2ImagePlugin.saveImageDataToLibrary(
                function(msg){
                    console.log(msg);
                },
                function(err){
                    console.log(err);
                },
                document.getElementById('signature')
            );
   } 

    </script>

HTML：

<div  data-role="page" id="personalinfo">
            <div  data-role="header" id="header" data-position="fixed">                                    
                  <h4>SBI Account Open</h4>                                    
               </div>

                  <h2>SIGNATURE</h2>
           <div id="canvasContainer"  >
                   <canvas id="signature" />
           </div>
           <button  onClick='saveCanvas()'>Start</button>
   </div>

谁能帮我保存画布内容，即签名

【问题讨论】：

图像正在保存，但未捕获签名。只有空白图像（黑屏）正在保存。如何保存签名？
猜测字符串中数据URI信息的base64解码和删除没有正确完成，因此损坏了图像数据

标签： html cordova canvas html5-canvas

【解决方案1】：

我在这里瞎了眼，因为现在不知道如何测试它，但是：画布它不是一个自闭合标签。尝试将其更改为<canvas id="signature"></canvas>

【讨论】：