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

Groups > comp.lang.javascript > #30429

Re: convert image to base 64 for an AJAX function

Show all headers | View raw

On Tuesday, May 10, 2016 at 5:07:26 PM UTC-7, Thomas 'PointedEars' Lahn wrote:
> JRough wrote:
> ^^^^^^
> 
> > [full quote]
> 
> Learn to quote.
> 
> > I now get the error on line 12 where I send the request:
> > xhttp.send(null);
> > and on line 62 where I call the first function:
> >  if (event.target ==  buttons[0] ){
> >                 getImage1Data();
> >             }
> >             if (event.target== buttons[1] ) {
> >                 getImage2Data();
> >             }
> >     };
> > It still says undefined, not found
> > 
> > ----
> > sample.js:12 GET http://localhost:8888/mydir/undefined 404 (Not
> > Found)
> 
> AISB.
> 
> <http://www.catb.org/esr/faqs/smart-questions.html>
> 
> -- 
> 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.
I enabled JSHint and JSLint in my IDE. Thanks,
I I found an easier conversion function.  It looks like it should work.  I have a link of the files..
ERROR MSG
https://www.dropbox.com/sh/ky1clj8n0b5xzuc/AACig7JDAQgHQf1ZIRTH7Xsta?dl=0
This is the error:
VM46 sample.js:27GET http://localhost/html5test/null 404 (Not Found)getImage2Data @ VM46 sample.js:27element.onclick @ VM46 sample.js:85
VM46 sample.js:24null
It looks like it is creating a blank image?


var  image2Src = null;

function getImage1Data(){
    var image1Src='myFirstImage.png';
    var xhttp = new XMLHttpRequest();
    xhttp.open("Get", image1Src, true);
    xhttp.send(null);
    image1Src = xhttp.responseText; //Assume src = 'myFirstImg.png', 200x200 px//
    console.log(image1Src);
   // getDataUri(image1Src, function(image1Src){console.log(dataUri) });
    }


function getImage2Data(){
  //  var image2Src;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200)
            image2Src = (xhttp.responseText);
            console.log(image2Src);
    };
    xhttp.open("Get", image2Src, true);
    xhttp.send(null);
    getDataUri(image2Src, function(image2Src){console.log(image2Src) });
}



function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
        canvas.getContext('2d').drawImage(this, 0, 0);
        // Get raw image data
        callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

        // ... or get as Data URI
       // callback(canvas.toDataURL('image/png'));
    };

    image.src = url;
}

/*function toDataURI(url, callback, outputFormat){
    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.toDataURI(outputFormat);
        callback();
        canvas = null;
    };
    img.src = url;
}*/


function add(type) {
    //Create an input type dynamically.   
    var element = document.createElement(type);
    //Assign different attributes to the element. 
    element.type = type;
    element.value = type; // Really? You want the default value to be the type string?
    element.name = type;  // And the name too?
    element.onclick = function(event) { // Note this is a function
        var buttons = document.getElementsByTagName('button');   
            if (event.target ==  buttons[0] ){
                getImage1Data();

            }
            if (event.target== buttons[1] ) {
                getImage2Data();


            }
    };
    var foo = document.getElementById("btnDiv");
    //Append the element in page (in span).  
    foo.appendChild(element);
}

 function putLeft(){
  document.getElementsByClassName('leftDiv').getElementsByTagName('span').innerHTML = getImage1Data();

  }

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