首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Android上将内容从file:///移动到内容:// (xapk/obb)后,Canvas.toDataURL()会导致soild黑色

在Android上将内容从file:///移动到内容:// (xapk/obb)后,Canvas.toDataURL()会导致soild黑色
EN

Stack Overflow用户
提问于 2015-12-22 15:47:49
回答 1查看 253关注 0票数 1

我在Cordova 5.4.1中使用了以下插件:

  • WhitelistPlugIn
  • XAPKReader

index.html头包括这个CSP标记(必须对google TalkBack URL进行丑化):

代码语言:javascript
运行
复制
<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..." />

config.xml包括:

代码语言:javascript
运行
复制
<allow-navigation href="http://*/*" />
<access origin="*://*" />
<allow-intent href="content://*" />
<allow-intent href="content://*/*/*/*" />

当画布用file:///* URL显示图像,而不是使用内容:/*这样的URL时,我的画布相关代码看起来就像这样,工作得很好。

代码语言:javascript
运行
复制
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 } );

上面的代码不会抛出,也不会发出警报,而是创建空的数据显示,所以我假设画布受到了CORS问题的影响。以内容://开头的URL由随ContentProvider插件附带的java类XAPKReader提供。

EN

回答 1

Stack Overflow用户

发布于 2017-04-27 13:27:36

我自己找到了办法。看起来Android上的画布并不关心CSP元条目和白名单插件。因此,在调用上述代码之前,我使用background-image urls中的XMLHttpRequest().readAsDataURL()将图像引用替换为它们的dataURI。为此,我还必须将我的ContentProvider授权content://FOO:*添加到CSP标记的connect:中。画布然后正确地呈现。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34419557

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档