base 64 png string to base 64 jpg using java or javascript

Question

I'm working on a project developed in Android with PhoneGap , we need to draw items on the screen and turn this data into pdf.

To draw we are using html5 canvas element.

To write pdf we are using the library "jsPdf."

The problem is that, on Android, the method canvas.toDataUrl ('image / jpeg') always returns a string of "image/png" type but the jsPdf library only reads images in Base64-jpg format.

I thought of two solutions:

1) use some sort of "javascript encoder", which I found on the internet, but I could not find an active link, to transform the canvas in the Base64-jpg format string.

2) create a plugin that "translate" the base64-png string into base64-jpg format.

So....is there a way in javascript or java to make this "translation"? Or anyone know another way to realize what I have explained?

Answer 1

try this one:

http://web.archive.org/web/20120830003356/http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript

after download JPEGEncoder then insert this code:

 var encoder = new JPEGEncoder();
 var imageData = encoder.encode(canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height), 100);

or

try this if you have problem with backgroud color :

http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+MikeChambers+%28Mike+Chambers%29

function canvasToImage(canvas, backgroundColor)
{
    //cache height and width        
    var w = canvas.width;
    var h = canvas.height;
    var context = canvas.getContext('2d');
    var data;       

    if(backgroundColor)
    {
        //get the current ImageData for the canvas.
        data = context.getImageData(0, 0, w, h);

        //store the current globalCompositeOperation
        var compositeOperation = context.globalCompositeOperation;

        //set to draw behind current content
        context.globalCompositeOperation = "destination-over";

        //set background color
        context.fillStyle = backgroundColor;

        //draw background / rect on entire canvas
        context.fillRect(0,0,w,h);
    }

    //get the image data from the canvas
    var imageData = canvas.toDataURL("image/png");

    if(backgroundColor)
    {
        //clear the canvas
        context.clearRect (0,0,w,h);

        //restore it with original / cached ImageData
        context.putImageData(data, 0,0);        

        //reset the globalCompositeOperation to what it was
        context.globalCompositeOperation = compositeOperation;
    }

    //return the Base64 encoded data url string
    return imageData;
}

• backgroundcolor parameter : 'rgba(255,255,255,0.5)'

Answer 2

Maybe this will help you,

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

its specified that

"The toDataURL method will fail if the browser thinks you've drawn to the canvas any data that was loaded from a different origin, so this approach will only work if your image files are loaded from the same server as the HTML page whose script is performing this operation."

also refer this

http://www.nihilogic.dk/labs/canvas2image/