为什么 Cordova (PhoneGap) 不从 canvas.toDataURL() 返回任何数据，而相同的代码在 Cordova 之外工作？答案

【问题标题】：Why does Cordova (PhoneGap) return no data from canvas.toDataURL() whereas the same code works outside of Cordova?为什么 Cordova (PhoneGap) 不从 canvas.toDataURL() 返回任何数据，而相同的代码在 Cordova 之外工作？
【发布时间】：2020-06-15 17:25:12
【问题描述】：

我在下面有一段使用 SignaturePad JS 库的测试代码。

此代码在浏览器中运行良好（没有科尔多瓦引用），但在科尔多瓦canvas.toDataURL() 内不返回任何内容。我正在运行PhoneGap 桌面进行开发，因此cordova 应用程序正在浏览器中运行（顺便说一下，在直接打开html 文件时返回正确输出的同一浏览器，没有phonegap/cordova）。

<html>
  <head>
    <meta charset="utf-8" />
    <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"
    />
  </head>

  <body>
    <div class="app">
      <canvas class="test-canvas"></canvas>
      <button class="test-btn">Log DataURL</button>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
      type="text/javascript"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

    <script type="text/javascript">
      app.initialize();
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
        $(document).ready(function() {
          var canv = $(".test-canvas");
          canv.css({ border: "1px solid black" });
          var sigPad = new SignaturePad(canv[0]);

          $(".test-btn").click(function() {
            console.log(canv[0].toDataURL());
          });
        });
      }
    </script>
  </body>
</html>

在浏览器中登录框后的示例输出：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

科尔多瓦的输出：``

我读过一些人在 Cordova 中与 toDataURL() 苦苦挣扎，但他们似乎与 CORS 策略等有关，但我在使用代码时没有收到任何错误，并且没有访问外部图像等。

【问题讨论】：

标签： cordova canvas phonegap todataurl

【解决方案1】：

我发现了我的错误。科尔多瓦根本不是问题。这是因为我使用 Brave Broswer（基于 Chrome 的隐私浏览器）作为我的开发浏览器。似乎 Brave 中的某些东西（默默地...叹息）阻止 canvas.toDataURL() 从画布访问数据。 Chrome 和 Firefox 运行良好。

【讨论】：