相关疑难解决方法(0)

所以我使用谷歌地图,我得到的图片,所以它看起来像这样

<img id="staticMap"
        src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">

我需要保存它.我发现了这个:

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function() {

        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    };
}

但是我遇到了这个问题:

Uncaught SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布.

我搜索了修复程序.我在这里找到了一个示例如何使用CORS,但我仍然无法将这两个代码绑在一起以使其工作.也许我这样做的方式不对,有一种更简单的方法吗？我正在尝试保存此图片,以便我可以将数据传输到我的服务器.所以也许有人做了这样的事情并知道如何按需要做.toDataURL()工作？

我目前正在为网站制作一个简单的3D全景查看器.出于移动性能原因,我正在使用three.js CSS3渲染器.这需要一个立方体贴图,分成6个单个图像.

我正在使用Google Photosphere应用程序在iPhone上录制图像,或者创建2:1 equirectangular全景图像的类似应用程序.然后,我使用以下网站调整大小并将其转换为立方体贴图:http://gonchar.me/panorama/(Flash)

我希望自己做转换,无论是在three.js中,如果可能的话,还是在Photoshop中.我发现了Andrew Hazelden的Photoshop动作,它们似乎很接近,但没有直接转换.是否有一种数学方法来转换这些,或某种类型的脚本？如果可能的话,我想避免像Blender这样的3D应用程序.

也许这是一个很长的镜头,但我想我会问.我对javascript有好的经验,但我很新three.js.我也对依赖WebGL功能犹豫不决,因为它似乎在移动设备上很慢或有问题.支持也仍然参差不齐.

示例图片：

*抱歉，实际上网格的大小不正确，仅作为示例。

我怎样才能让它根据网格进行切割并翻转呢？其实我想要的是翻转后，它会显示这样的内容：

我该怎么做？我希望我不需要剪切所有图像，如果可以的话，只需放置壁纸，它就会自动剪切。