andion

{
  "$": {
    "version": "1.1",
    "creator": "nodomain.freeyourgadget.gadgetbridge.GBApplication 0.35.2",
    "xmlns": "http://www.topografix.com/GPX/1/1",
    "xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "xsi:schemaLocation": "http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd",
    "xmlns:gpxtpx": "http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
  },
  "trk": [

andion

import Gpx from "gpx-parser-builder";

// gpxTrack: our gpx file with the xml representing our exported track
const getTrackPoints = gpxTrack => {
  const parsedGpx = Gpx.parse(gpxTrack);
  return parsedGpx.trk[0].trkseg[0].trkpt;
};

andion

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
<gpx version="1.1" creator="nodomain.freeyourgadget.gadgetbridge.GBApplication 0.35.2" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" 
  xmlns="http://www.topografix.com/GPX/1/1">
  <trk>
    <trkseg>
      <trkpt lon="-8.406095" lat="43.375107">
        <ele>46.000000</ele>
        <time>2019-08-28T18:12:57Z</time>

andion

const {
  sx,
  sy,
  sWidth,
  sHeight,
  dx,
  dy,
  dWidth,
  dHeight,
  canvasWidth,

andion

const {
  sx,
  sy,
  sWidth,
  sHeight,
  dx,
  dy,
  dWidth,
  dHeight,
  canvasWidth,

andion

// Get our canvas and image
const canvas = document.getElementById("canvas");
const image = document.getElementById("source");
const ctx = canvas.getContext("2d");

// Our new ratio and source image width/height
const transformedRatio = 3/4;
const {naturalWidth: originalWidth, naturalHeight: originalHeight} = image;

andion

// Function that returns `drawImage`'s params and the canvas size
// to change an image from its original aspect ratio to a new one
// filling the excess or cropping it.
//
// It needs the image's `originalWidth` and `originalHeight` 
// and the desired resulting `transformedRatio`
//
// It returns the parameters that `drawImage` needs:
//   * To get the portion of the image from the original (`sx`, `sy`, `sWidth`, `sHeight`)
//   * To "paste" that portion of the image on the new format (`dx`, `dy`, `dWidth`, `dHeight`)

andion

// Function that gets the area of the original image to crop 
// depending on the aspect ratio to transform it  toratioWidth:H
const getAspectRatioParams = (sourceWidth, sourceHeight, destinationWidth, destinationHeight) => {
  
  let width = sourceWidth;
  let height = sourceHeight;
  let x = 0;
  let y = 0;

  const imageRatio = sourceWidth / sourceHeight;

andion

// Function that gets the drawImage required parameters to
// resize an image by a scale

const getDrawImageParams = (image, scale) => {
  const {naturalWidth: imageWidth, naturalHeight: imageHeight} = image;
  
  return {
    sx: 0,
    sy: 0,
    sWidth: imageWidth,

andion

// Function that gets the drawImage required parameters to
// crop a square of the 50% of the image from its center
const getDrawImageParams = image => {
  const {naturalWidth: imageWidth, naturalHeight: imageHeight} = image;
  return {
    sx: imageWidth / 4,
    sy: imageHeight / 4,
    sWidth: imageWidth / 2,
    sHeight: imageHeight / 2,
    dx: 0,