cordova 如何在图库中保存画布文本/图像

yhuiod9q  于 2023-11-22  发布在  其他
关注(0)|答案(1)|浏览(170)

我已经开发了画布图像来存储画廊。我已经添加了插件从

**cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git**

字符串
我已经把签名写在设备里了,但是无法保存在图库里。

以下代码:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />    

             <script type="text/javascript" src="cordova.js"></script>         
             <script type="text/javascript" src="js/jquery.js"></script>       
             <script type="text/javascript" src="js/modernizr.custom.34982.js"></script> 
             <script type="text/javascript" src="js/signatureCapture.js"></script>           
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
       <link rel="stylesheet" type="text/css" href="css/styles.css" />                   
             <script type="text/javascript">
             var sigCapture;
             $(document).ready(function(e) 
            {       
                    sigCapture = new SignatureCapture( "signature" );
                    document.addEventListener("deviceready", onDeviceReady, false);         
                    function onDeviceReady()  
                    {
                        window.canvas2ImagePlugin.saveImageDataToLibrary(
                                function(msg){
                                    console.log("Save =========>"+msg);
                                },
                                function(err){
                                    console.log("Error =====>"+err);
                                },
                                document.getElementById('signature')
                            );
                    }
                    $("#submit").click( onSubmitClick );
                    $("#cancel").click( onCancelClick );
                });
             function onSubmitClick(event ) { }
             function onCancelClick( event ) {
                 sigCapture.clear();
                }

             </script>
        </head>
        <body>

       <h2>SIGNATURE</h2>
        <div id="canvasContainer"  >
            <canvas id="signature" />
        </div>

       <button data-role="button" id="submit" data-theme="b">Save</button>
        <button data-role="button" id="cancel" data-theme="b">Cancel</button>       


        </body>
    </html>

错误控制台:

无法在file:/android_asset/www/index.html:55解码图像
请有人可以帮助我如何保存画布上的文字在图片库。

insrf1ej

insrf1ej1#

您可以使用toDataURL方法将画布转换为URL,然后您可以使用此URL下载画布,类似于:

<canvas id="myCanvas" width="500" height="500"></canvas>
<button id="downloadImageButton">Download Image</button>

<script>
  const canvas = document.getElementById('myCanvas'),
        downloadImageButton = document.getElementById('downloadImageButton');

  downloadImageButton.addEventListener('click', downloadCanvasAsImage);

 function downloadCanvasAsImage() {
    let link = document.createElement('a');
    link.download = 'myCanvasAsImage.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
 }

</script>

字符串

相关问题