html2canvas(document.querySelector("#" + imageHtmlId)).then(function(canvas) {
  var ranges = [...that.state.ranges];

  // insert the thumbnail at the top of the page

  document.body.appendChild(canvas);
  document.body.removeChild(imageHtml);
  ranges[0].pic = canvas.toDataURL("image/png", 0.1).replace("image/png", "image/octet-stream");

  that.setState({
    ranges: ranges
  });
  return API.put("hands", `/hands/${that.props.match.params.handId}`, {
    body: that.state.ranges
  });
})

createShareLink() {
    try {
     s3Upload(this.state.pic, this.state.id);
    } catch (e) {
      alert(e);
      this.setState({ isLoading: false });
    }
  }

import { Storage } from "aws-amplify";

export async function s3Upload(file, filename) {
   const stored = await Storage.put(filename, file, {
    contentType: file.type
   });

   return stored.key;
}

var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href',
canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();