How to convert a image from PNG to JPEG using javascript?

Question

I am trying to get image from canvas. enter image description here PNG image is coming properly but the JPEG is producing a problem. I attached image here.First image is my canvas.Followed by PNG then JPEG.So i want my JPEG image with white background or i need a solution for PNG to JPEG conversion in JS

canvas =  $('.jSignature')[0];

            imgData = canvas.toDataURL();
            imgDatajpeg = canvas.toDataURL("image/jpeg");                   

            $(".sigCapHolder").append('<img src='+imgData+' /> ')
            $(".sigCapHolder").append('<img src='+imgDatajpeg+' /> ')

Showing us the code that generated those images sure would help — adeneo
– adeneo, Commented Dec 23, 2013 at 13:32
Cleary is a transparency problem. Put a white background rectangle to your canvas. — Pierre Arlaud
– Pierre Arlaud, Commented Dec 23, 2013 at 13:34
Data =$('.jSignature')[0].getContext("2d"); Data.fillRect(0,0,10,100); Data.fillStyle="white"; Data.fill(); I tried this but still am getting same issue only — gauti
– gauti, Commented Dec 23, 2013 at 14:05
It won't be displayed black if used in any GUI or web application — Eklavya Chandra
– Eklavya Chandra, Commented Jan 9, 2021 at 16:20

Community · Accepted Answer · 2020-06-20 09:12:55Z

21

Cause

The reason for this to happen is due to canvas being transparent. However the transparancy color is black with a transparent alpha-channel so it won't show on screen.

JPEG on the other side doesn't support alpha-channel so that black color which is the default is stripped of its alpha channel leaving a black background.

You PNG supports alpha-channel so it is compatible with the way canvas work.

Solution

To get around this you will have to manually draw in a white background on the canvas before you draw in the image:

var canvas =  $('.jSignature')[0];
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#fff';  /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);

/// draw image and then use toDataURL() here

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 23, 2013 at 16:58

user1693593

Sign up to request clarification or add additional context in comments.

2 Comments

gauti Over a year ago

Thank you so much.I rectified my issue.I tried after drawn and changed dynamically.I hope this answer will help to many people in future.

user2078023 Over a year ago

This does not seem to work, even though I draw before the image I get just a white image (as if the white rect is above the image that I draw afterwards). Should I do something additional to work?

GouravGupta · Accepted Answer · 2021-08-08 07:19:37Z

Just as an alternative way, using a package to convert black background of transparent image to white or any other other based on the provided HEX value, in our

const Jimp = require("jimp");

// Read the PNG file and convert it to editable format
Jimp.read("./images/your-image.png", function (err, image) {
    if (err) {
        // Return if any error
        console.log(err);
        return;
    }

    image.background(0xFFFFFFFF, (err, val) => {
        // Convert image to JPG and store it to 
        // './output/' folder with 'out.jpg' name
        image.write("./output/out.jpg");
    })

});

psygo · Accepted Answer · 2024-05-01 18:48:54Z

0

this works in firefox, oCanvas.toDataURL("image/jpeg")

edited May 1, 2024 at 18:48

psygo

7,8338 gold badges63 silver badges112 bronze badges

answered Jun 10, 2014 at 23:42

Nwachukwu A. Nnaemeka

3694 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to convert a image from PNG to JPEG using javascript?

3 Answers 3

Cause

Solution

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Cause

Solution

2 Comments

Comments

Comments

Linked

Related