weixin_39999222
weixin_39999222
2020-11-29 15:23

Documentation toDataURL mistake?

Hey, I have a question for the documentation.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/class/Map/toDataURL/README.md

When I use toDataURL on iOS and console.log the result, the data:image/png;base64, part is missing and doing the following doesn't work:


const mapImg = document.getElementById('map-img') as HTMLImageElement;
mapImg.src = picture;

I have to do this:


const mapImg = document.getElementById('map-img') as HTMLImageElement;
mapImg.src = `data:image/png;base64,${picture}`;

Is this a bug or is the documentation wrong?

该提问来源于开源项目:mapsplugin/cordova-plugin-googlemaps

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • weixin_39610488 weixin_39610488 5月前

    How did you write your code?

    点赞 评论 复制链接分享
  • weixin_39999222 weixin_39999222 5月前

    I'm doing it this way: I animate the camera to fit the path I tracked and saved in this.trackingService.mapState.path. After that, I wait for 1.5 seconds because I want the map tiles to be rendered. Then I take the dataURL image and pass it to my SummaryPage over Ionic NavParams.

    
    this.map.animateCamera({
          target: this.trackingService.mapState.path,
          duration: 500
    }).then(async () => {
          // wait 1.5 seconds to render the map before taking the screenshot
          setTimeout(async () => {
                const picture = await this.map.toDataURL();
                await loading.dismiss();
                return this.navCtrl.setRoot('SummaryPage', { picture });
          }, 1500);
    }).catch(err => console.error(err));
    

    In the SummaryPage I have a prepared <img> in my HTML to display the image:

    
    <div class="map-image">
        <img id="map-img" style="object-fit: cover; width: 100%; height: 100%;">
    </div>
    

    And I display it with the following code:

    
    const picture = this.navParams.get('picture');
    if (picture != null) {
        const mapImg = document.getElementById('map-img') as HTMLImageElement;
        mapImg.src = `data:image/png;base64,${picture}`;
    }
    
    点赞 评论 复制链接分享
  • weixin_39610488 weixin_39610488 5月前
    
    mapImg.src = picture;
    
    点赞 评论 复制链接分享
  • weixin_39999222 weixin_39999222 5月前

    Try it. It doesn't work.

    点赞 评论 复制链接分享
  • weixin_39610488 weixin_39610488 5月前

    Ok, please share your project files on GitHub repository

    点赞 评论 复制链接分享
  • weixin_39999222 weixin_39999222 5月前

    I investigated further and it seems to be a bug. On Android everything works fine and I can see in your native code that you prepended the data:image/png;base64, part. In the objective-c code it's missing. I opened a pull request for this: #2574

    点赞 评论 复制链接分享
  • weixin_39610488 weixin_39610488 5月前

    Merged your PR. Thank you for sending a PR.

    点赞 评论 复制链接分享

相关推荐