Using cors-anywhere.herokuapp to download image

Question

I have this code below that consist of a image and a download button. The problem is that by using the library HTML2Canvas to download external image causes CORS issue thats why im using this https://cors-anywhere.herokuapp.com/ to solve the CORS issue but it keeps giving me the error 400 (Header required)

I'm not really sure if i am doing it wrongly or there is a better way to solve this issue but any help woud be greatly appreciated thanks.

function sendData() {

  html2canvas(document.getElementById('capture'), {}).then(function(canvas) {
    downloadCanvas(document.getElementById('test'), canvas, 'test.png');
  });
}

function downloadCanvas(link, canvas, filename) {
  link.href = canvas.toDataURL();
  link.download = filename;
  link.click();
}

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 8px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}

#capture {
  overflow: visible;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 25px;
  border: 1px solid #ccc;
  border-top: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: white;
}

.jobs-panel {
  display: table;
  max-height: 100%;
  width: 85%;
  background-color: #b7bcbe;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.tabwidth {
  width: 85%;
  margin: 0 auto;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />

  <link rel="shortcut icon" href="//#" />
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
  <div id="capture">
    <img src="https://cors-anywhere.herokuapp.com/https://s22.postimg.cc/l2txqenox/Pikachu.png" width="300" height="300">
  </div>
  <button id="match-button" onclick="sendData();">capture</button>
  <a id="test" href="#"></a>

</body>

</html>

You can not specify custom headers for the request the browser automatically makes when you just use the URL as an `img` element source. You would need to request this via AJAX in the first place to be able to do this. — CBroe, Aug 03 '18 at 07:48
Yes. (And then you would probably have to convert that to a Data URI first, so that you can then use it source for the `img` element.) — CBroe, Aug 03 '18 at 07:57

Using cors-anywhere.herokuapp to download image

0 Answers0