为什么 Cordova (PhoneGap) return 没有来自 canvas.toDataURL() 的数据,而相同的代码在 Cordova 之外工作?
Why does Cordova (PhoneGap) return no data from canvas.toDataURL() whereas the same code works outside of Cordova?
我在下面有一段使用 SignaturePad JS 库的测试代码。
此代码在浏览器中工作正常 运行(没有 cordova 引用),但在 Cordova 中 canvas.toDataURL()
returns 没有。我是 运行 要开发的 PhoneGap 桌面,因此 cordova 应用程序在浏览器中 运行(顺便说一句,当直接打开 html 文件时,returns 正确输出的是同一个浏览器, 没有 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 根本不是问题。这是因为我使用 Brave Broswer(基于 Chrome 的隐私浏览器)作为我的开发浏览器。看起来 Brave 中的某些东西正在(默默地......叹息)阻止 canvas.toDataURL() 从 canvas 访问数据。
Chrome 和 Firefox 工作正常。
我在下面有一段使用 SignaturePad JS 库的测试代码。
此代码在浏览器中工作正常 运行(没有 cordova 引用),但在 Cordova 中 canvas.toDataURL()
returns 没有。我是 运行 要开发的 PhoneGap 桌面,因此 cordova 应用程序在浏览器中 运行(顺便说一句,当直接打开 html 文件时,returns 正确输出的是同一个浏览器, 没有 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 根本不是问题。这是因为我使用 Brave Broswer(基于 Chrome 的隐私浏览器)作为我的开发浏览器。看起来 Brave 中的某些东西正在(默默地......叹息)阻止 canvas.toDataURL() 从 canvas 访问数据。 Chrome 和 Firefox 工作正常。