The task is to get the picture from the link available, encode it in base64 and send it to your server. I stumbled upon receiving a picture from the server, I see in the debugger that the picture was received, more precisely the bytes, but the answer to the request still falls into fail() :

 $.ajax({ type: 'GET', url: "https://www.w3schools.com/css/img_viewport2.png", dataType: 'image/jpg', success: function(data) { alert("ok"); } }).fail(function(XHR) { alert("false"); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • one
    ? dataType: 'image/png', - DNS

1 answer 1

You are trying to make a cross-domain request and even more on https. The easiest option is to create on your <img> page, put src in there, and then insert it into the canvas and decode it. The function itself is already on stackOwerflow

 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); } img = document.getElementById('img'); console.log(getBase64Image(img)); 
 <img id="img" src="http://es.biznestext.com/image/cache/catalog/logo.png_crop_211.50632911392404_216.99999999999997-275x275.png" style="display:none">

  • Your example code does not have two return - koks_rs
  • @koks_rs, thank you for noticing. Corrected - Kostiantyn Okhotnyk