将 canvas.toDataURL 传递给 div答案

【问题标题】：Pass canvas.toDataURL return to a div将 canvas.toDataURL 传递给 div
【发布时间】：2012-05-19 17:56:16
【问题描述】：

我尝试捕捉出现在 Google 地图信息窗口中的街景全景图像。我创建了一个调用函数 captureImage() 的按钮，但我很难将它返回的 var = img 变量传递给 HTML 。

我认为本地变量“contentString”和“content”有问题。我应该将 captureImage() 函数写入 initialize() 吗？谢谢你。

我的代码如下：

function initialize() {

//code here

    var contentString = '<input type="button" value="Grab this picture" onClick="captureImage()" /> <div id="content" style="width:300px;height:400px;"></div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

//code here

}

function captureImage()
{
    var canvas = document.getElementById("content");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

}

HTML：

    <div id="dialog" title="Image box">
        <p>Here is the image from Streetview :</p>
                    <img scr=""></img>
    </div>

【问题讨论】：

无法从 div 中捕获。事情就是这样行不通的。
谢谢，我不知道。另一种方法是请求 Google Map Image API。 developers.google.com/maps/documentation/imageapis
另一种方法是将 HTML 内容渲染到画布中，然后使用 'canvas.toDataURL("image/png");' 将 'canvas' 元素导出为 JPEG。
有可能，但可能非常困难。您将需要一些帮助来形成一些库。

标签： javascript google-maps-api-3

【解决方案1】：

我认为直接设置<img>的src会更容易：

http://maps.googleapis.com/maps/api/streetview?size=<width>x<height>&location=lat,%20lng&fov=90&heading=235&pitch=10&sensor=false

【讨论】：