Javascript 在Android Cordova上将内容从文件:///移动到内容://(xapk/obb)后,Canvas.toDataURL()会产生纯黑
我在Cordova 5.4.1中使用以下插件:Javascript 在Android Cordova上将内容从文件:///移动到内容://(xapk/obb)后,Canvas.toDataURL()会产生纯黑,javascript,cordova,canvas,cordova-plugins,apk-expansion-files,Javascript,Cordova,Canvas,Cordova Plugins,Apk Expansion Files,我在Cordova 5.4.1中使用以下插件: 白名单插件 XAPKReader index.html标头包含此CSP元标记(必须丑化google TalkBack URL): 上面的代码不会抛出也不会发出警报,但会创建空的DataURI,因此我假设画布受到CORS问题的污染。以content://开头的URL由XAPKReader插件附带的java类ContentProvider提供服务。我自己找到了一种方法。看起来Android上的画布绘图并不关心CSP元条目和白名单插件。因此,在调用上
- 白名单插件
- XAPKReader
上面的代码不会抛出也不会发出警报,但会创建空的DataURI,因此我假设画布受到CORS问题的污染。以content://开头的URL由XAPKReader插件附带的java类ContentProvider提供服务。我自己找到了一种方法。看起来Android上的画布绘图并不关心CSP元条目和白名单插件。因此,在调用上述代码之前,我使用
XMLHttpRequest()
和.readAsDataURL()
将背景图像中的图像引用替换为它们的数据URI。因此,我还必须添加我的ContentProvider权限content://FOO:*
连接到CSP元标记的连接src:部分。画布然后正确渲染。我自己找到了一种方法。看起来Android上的画布绘图并不关心CSP元条目和白名单插件。因此,在调用上述代码之前,我使用XMLHttpRequest()
和.readAsDataURL()
将背景图像中的图像引用替换为它们的数据URI。因此,我还必须添加我的ContentProvider权限content://FOO:*
连接到CSP元标记的连接src:部分。然后画布将正确渲染
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' 'unsafe-eval'
data: gap: content: cdvfile: ....google-URLS...;
img-src data: gap: file: content: cdvfile: ....google-URLS...;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';
connect-src 'self' ....google-URLS..." />
<allow-navigation href="http://*/*" />
<access origin="*://*" />
<allow-intent href="content://*" />
<allow-intent href="content://*/*/*/*" />
html2canvas($("#layerA"), {onrendered:function(stageCanvas){
var stageCtx = stageCanvas.getContext('2d');
var tmpCanvas = document.createElement('canvas');
tmpCanvas.width = stageCanvas.width;
tmpCanvas.height = stageCanvas.height;
var tmpCtx = stageCanvas.getContext('2d');
var imgObj = new Image();
imgObj.onload = function(){
var destX = 0;
var destY = 0;
tmpCtx.drawImage(imgObj,
sourceX, sourceY, sourceWidth, sourceHeight,
0, 0, destWidth, destHeight);
var data = tmpCtx.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
stageCtx.clearRect(0, 0, stageCanvas.width, stageCanvas.height); //clear originalCanvas
stageCanvas.width = sourceWidth;
stageCanvas.height = sourceHeight;
tmpCtx.putImageData(data,0,0);
var datauri = null;
try {
datauri = stageCanvas.toDataURL('image/png');
} catch(err) {
alert(err);
}
// store the image and update UI
$('#fav-img-'+maxFavUsed.toString()).attr('src', datauri);
$("#fav-del-"+maxFavUsed.toString()).show();
$('#fav-big').attr('src', datauri);
if(typeof(Storage) !== "undefined") {
localStorage.setItem('fav-img-'+maxFavUsed.toString(), datauri);
}
showFav(maxFavUsed);
showUI();
//clear memory!!!
stageCtx.clearRect(0, 0, sourceWidth, sourceHeight);//clear originalCanvas
tmpCtx.clearRect(0, 0, sourceWidth, sourceHeight);//clear tmpCanvas
data = null;
datauri = null;
tmpCanvas = null;
stageCanvas = null;
imgObj = null;
};
try {
imgObj.src = tmpCanvas.toDataURL("image/png");
} catch(err) {
alert(err);
}
}, width:canvasW, height:canvasH } );