Question

我试图通过签名板和画布捕获用户的签名，并将其下载到phonegap cordova项目中的设备中。图像正在下载，但它在下一分钟就消失了。

不知道我的代码中的问题在哪里。我也附上了我的代码片段。

文件传输插件的链接 - https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

＆＃13;

//register.js
var imageURI;
var imageURIsign;
var signaturePad;
var canvas;

$(document).ready(function() {



  document.addEventListener("deviceready", onDeviceReady, false);

});


function onDeviceReady() {


}






function callcanvas() {

  //$('#test').popup('open');
  $('#test').attr("style", "display:block");
  alert("Inside call canvas...");
  canvas = document.getElementById("signature");
  var w = window.innerWidth;
  var h = window.innerHeight;
  // As the canvas doesn't has any size, we'll specify it with JS
  // The width of the canvas will be the width of the device
  canvas.width = w;
  // The height of the canvas will be (almost) the third part of the screen height.
  canvas.height = h / 2.5;

  signaturePad = new SignaturePad(canvas, {
    dotSize: 1
  });

  document.getElementById("export").addEventListener("click", function(e) {
    // Feel free to do whatever you want with the image
    // as export to a server or even save it on the device.
    //imageURIsign=signaturePad.toDataURL("image/jpeg");
    imageURIsign = signaturePad.toDataURL();
    document.getElementById("preview").src = imageURIsign;
    alert("imageURIsign :-" + imageURIsign);

    //downloadFile();

  }, false);

  document.getElementById("reset").addEventListener("click", function(e) {
    // Clears the canvas
    signaturePad.clear();
  }, false);
}


/*$(".img-download").click(function(){
    var data = signaturePad.toDataURL();
    $(this).attr("href",data)
  $(this).attr("download","imgName.png");
});*/

//yyy add
function downloadFile() {
  var fileTransfer = new FileTransfer();
  var downloadurl = document.getElementById("preview").src;
  var uri = encodeURI(downloadurl);


  var fileURL = 'cdvfile://localhost/sdcard/test.jpg';

  fileTransfer.download(
    uri, fileURL,
    function(entry) {
      alert("download complete: " + entry.toURL());
    },
    function(error) {
      alert("error :- " + JSON.stringify(error));
      <!--alert("download error source " + error.source);-->
      <!--alert("download error target " + error.target);-->
      <!--alert("download error code" + error.code);-->
    },

    false, {
      headers: {
        "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
      }
    }
  );
}




function DownloadFile(URL, Folder_Name, File_Name) {
  //Parameters mismatch check
  if (URL == null && Folder_Name == null && File_Name == null) {
    return;
  } else {
    //checking Internet connection availablity
    var networkState = navigator.connection.type;
    if (networkState == Connection.NONE) {
      return;
    } else {
      download(URL, Folder_Name, File_Name); //If available download function call
    }
  }
}


function download(URL, Folder_Name, File_Name) {
  //step to request a file system
  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);

  function fileSystemSuccess(fileSystem) {
    var download_link = encodeURI(URL);
    ext = download_link.substr(download_link.lastIndexOf('.') + 1); //Get extension of URL

    var directoryEntry = fileSystem.root; // to get root path of directory
    directoryEntry.getDirectory(Folder_Name, {
      create: true,
      exclusive: false
    }, onDirectorySuccess, onDirectoryFail); // creating folder in sdcard
    var rootdir = fileSystem.root;
    var fp = rootdir.toURL(); // Returns Fulpath of local directory
    console.log("harsh_link:- " + fp);

    fp = fp + "/" + Folder_Name + "/" + File_Name + "." + ext; // fullpath and name of the file which we want to give
    // download function call
    filetransfer(download_link, fp);
  }

  function onDirectorySuccess(parent) {
    // Directory created successfuly
  }

  function onDirectoryFail(error) {
    //Error while creating directory
    alert("Unable to create new directory: " + error.code);
  }

  function fileSystemFail(evt) {
    //Unable to access file system
    alert(evt.target.error.code);
  }
}



function filetransfer(download_link, fp) {
  var fileTransfer = new FileTransfer();
  // File download function with URL and local path
  fileTransfer.download(download_link, fp,
    function(entry) {
      alert("download complete: " + entry.fullPath);
    },
    function(error) {
      //Download abort errors or download failed errors
      alert("download error source " + error.source);
      //alert("download error target " + error.target);
      //alert("upload error code" + error.code);
    }
  );
}

//yyy add

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>

  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

  <title>Register User</title>

</head>

<body>

  <button onclick="callcanvas()">Signature</button><br><br>
  <button onclick="downloadFile()">DownloadSignature</button><br><br>

  <div id="test" style="display:none;">

    <canvas id="signature" style="border: 1px solid black;"></canvas>
    <img id="preview" />
    <br>
    <div style="text-align:center;">

      <input type="button" id="export" value="Export" />
      <input type="button" id="reset" value="Reset" />
    </div>

  </div>



  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
  <script type="text/javascript" src="js/register.js"></script>

</body>

</html>

＆＃13;

Answer 1

我通过将背景颜色添加为不透明的白色解决了我的问题，因为默认情况下签名板变为黑色，我的问题通过更改背景颜色来解决。

var signaturePad = new SignaturePad（canvas，{

backgroundColor：＆＃34; rgb（255,255,255）＆＃34;，

dotSize: 1

}）;

从画布下载的签名图像在一秒钟后闪烁后消失

1 个答案: