Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30415

Re: convert image to base 64 for an AJAX function

Show all headers | View raw

JRough wrote:
^^^^^^
Your *real* name belongs in your “From”.

> sample.js:6 Uncaught ReferenceError: toDataURL is not definedgetImage1Data
> @ sample.js:6(anonymous function) @ page.html:23 Navigated to
> http://localhost:8888/mydir/page.html ---
> 
> var  image2Src = null;
> 
> function getImage1Data(){
>    var image1Src;
>     var xhttp = new XMLHttpRequest();
>     xhttp.open("Get",
>     
toDataURL('https://drive.google.com/file/d/0Bzw8PpdNiQ6ELUdlNVdhUkw1OENlUmpDVFAxYmhrNG5LRlhn/view?usp=sharing')
^^^^^^^^^
>     , false);
        ^^^^^ synchronous
>     xhttp.send(null);
>     image1Src = xmlhttp.responseText; //Assume src = 'myFirstImg.png',
>     200x200 px
> }
> 
> 
> 
> 
> function toDataUrl(url){
           ^^^^^^^^^
>     var img = new Image();
>     img.crossOrigin = 'Anonymous';
>     img.onload = function(){
>         var canvas = document.createElement('CANVAS');
>         var ctx = canvas.getContext('2d');
>         var dataURL;
>         canvas.height = this.height;
>         canvas.width = this.width;
>         ctx.drawImage(this, 0, 0);
>         dataURL = canvas.toDataURL(base64Img);
>         callback(dataURL);
          ^^^^^^^^ ?
>         canvas = null;
>     };
>     img.src = url;
> }
> 
> I'm not sure I get this function.  The dataurl should output to here in
> the HTTP requrest image1Src = xmlhttp.responseText;    THANKS.

This cannot work:

  1. Identifiers are *case-sensitive*: it is “toDataUrl”, not “toDataURL”.
     I recommend using “toDataURI” as function name instead – those are
     “data:” _URIs_, not URLs (regardless what the Canvas API might say).
     <https://en.wikipedia.org/wiki/Data_URI_scheme> p.

  2. You are making a synchronously handled HTTP request (which you should 
     not; this blocks everything in the tab or window – you should get a 
     “deprecated” warning in the console), but image loading is still
     *asynchronous*, and you are not waiting with the request until the
     image has been loaded.  You are not returning anything else from
     toDataUrl(), so once you have fixed the other problems, you are making
     an invalid request to “undefined”.

  3. Probably the currently undefined “callback” in “img.onload” is to
     fix the problem.  You have to make the HTTP request in the function
     that is referred to by what you *pass* for “callback” to toDataUrl().
     IOW, “callback” should be a named parameter of toDataUrl().

  4. You have not thought this through: you attempt to make an *HTTP*
     request to a resource defined by a *“data:”* URI.

Next time, use JSHint and a debugger.

And *always* develop in strict mode, using

  "use strict";

on top of functions (or only the function on the top of the scope  chain – 
called, but not called by other functions), to catch mistakes early (in 
recent runtime environments).

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

convert  image to base 64 for an AJAX function JRough <janis.rough@gmail.com> - 2016-05-09 18:12 -0700
  Re: convert  image to base 64 for an AJAX function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-05-10 05:42 +0200
    Re: convert  image to base 64 for an AJAX function John Harris <niam@jghnorth.org.uk.invalid> - 2016-05-10 09:03 +0100
      Re: convert  image to base 64 for an AJAX function JRough <janis.rough@gmail.com> - 2016-05-11 18:10 -0700
    Re: convert  image to base 64 for an AJAX function JRough <janis.rough@gmail.com> - 2016-05-10 14:51 -0700
      Re: convert  image to base 64 for an AJAX function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-05-11 02:07 +0200
        Re: convert  image to base 64 for an AJAX function JRough <janis.rough@gmail.com> - 2016-05-12 11:57 -0700
    Re: convert  image to base 64 for an AJAX function JRough <janis.rough@gmail.com> - 2016-05-10 19:26 -0700

csiph-web