Question

将 Google地图框架转换为base64图像时出现问题，如下图所示，框架已保存但地图未显示在其中。

我想知道为什么它没有占据框架的内部。

JSFiddle：http://jsfiddle.net/Lindow/gvy1x7kf/6/

HTML：

function googleapi_permission() {
    return array(
        'access googleapi' => array('title' => t('Access Google API')),
    );
}

function googleapi_menu() {
    $items = array();

    $items['googleapi'] = array(
        'title' => t('Google API'),
        'page callback' => 'googleapi_main',
        'access callback' => 'user_access',
        'access arguments' => array('access googleapi'),
        'type' => MENU_CALLBACK,
    );

    return $items;
}

function googleapi_main() {
    $path = drupal_get_path('module', 'googleapi');
    require_once "./$path/library/google-api-php-client-2.2.0/vendor/autoload.php";

    $config_file = 'Zebraclick_Drive_API-891f9b06f8ae.json';
    $folderId = '0B-XFow04K90UPTRYRFRsZk5HdDA';

    $filename = 'text.'.time();
    $filemime = 'text/plain';

    try {
        $data = 'server test';
        $client = new Google_Client();
        $scopes = ['https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/drive.appdata', 'https://www.googleapis.com/auth/drive.file'];
        $client->setAuthConfig($config_file);
        $client->setScopes($scopes);
        $service = new Google_Service_Drive($client);
        $file = new Google_Service_Drive_DriveFile(array(
            'name' => $filename,
            'parents' => array($folderId),
            'mimeType' => 'application/vnd.google-apps.document'
        ));
        $file->setName($filename);
        $result = $service->files->create($file, array(
            'data' => $data,
            'mimeType' => $filemime,
            'uploadType' => 'multipart'
        ));
        $fileId = $result['id'];
        $publicOriginallink = "https://drive.google.com/open?id=".$fileId;
        $type = 'anyone';
        $role = 'writer';
        $msg = 'File saved. Please check the folder in Drive.';
    }
    catch(Exception $e) {
        print_r($e);
        $msg = $e->getMessage() . '<br />';
        $msg .= 'Error occurred. Please try again. If this happens again, please contact the developer.';
        return $msg;
    }
}

JavaScript：

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

有什么建议吗？

Answer 1

您需要做的是在useCORS: true,内添加html2canvas($('#id'), {...});。

useCORS用于什么？

跨域资源共享是访问不同域上的Web资源的标准。

JSFiddle： http://jsfiddle.net/Lindow/60yn2hss/

<强> JavaScript的：

$("#btnSave").click(function() { 
    html2canvas($("#map"), {
        useCORS: true, #<--- here
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#img-out").append(canvas);
        }
    });
});

<强>输出：

在此了解更多信息：https://html2canvas.hertzen.com/documentation.html

如何拍摄GMaps Frame的截图并使用Javascript将其转换为图像？

1 个答案: