Output Image is always PNG , croppie not keeping original Format

Hello ,

Im trying to integrate Croppie inside a simple WebApp ( HTML/php + js / css) and here is how is my code looks like :

`document.addEventListener(‘DOMContentLoaded’, function() { var extension = “1212121”; $image_crop = $(‘#image_demo’).croppie({ enableExif: true, viewport: { width: 1180, height: 600, type: ‘rectangle’ //circle }, boundary: { width: 1280, height: 800 }, }); $(‘.house_img’).each(function() { var id = $(this).attr(“id”);

    $('#' + id + '').on('change click', function() {
		extension = $(this).val().split('.').pop();
        var reader = new FileReader();
        reader.onload = function(event) {
			
            $image_crop.croppie('bind', {
                url: event.target.result,
            }).then(function() {
                console.log(extension);
            });

        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');

    });

})
    $('.crop_image').click(function() {
					var GetCropper = $(".crop_image")[0]['attributes']['data-selected'].nodeValue;
					$image_crop.croppie('result',{
						type: 'canvas',
						size: 'original',
						format : 'jpg',
						quality: 0.5,
					}).then(function(response){
					$.ajax({
						url:"./queries/upload.php",
						type: "POST",
						dataType: 'json',
						data:{"image": response},
						success:function(data)
							{
								$('#uploadimageModal').modal('hide');
								image_placing = $('#uploaded_image').find('img');
								image_placing.each(function(){
										if($(this).attr('data-reading') == GetCropper )
										{
											 
											$(this).attr('src','../images/uploads/'+encodeURI("%")+'temp'+encodeURI("%")+'/'+data['image']+'');
											$(this).next().val(data['image'].split('.').slice(0, -1).join('.').concat('.'+data['filetype']));
										}
								})
		
							}
						});
				})

            $('#uploadimageModal').modal('show');

    })

});`

The problem is that the croppie is converting my Image Always into PNG even if i choose JPEG it dosen’t work at all , and not reducing the quality is there something wrong on my Code ? thank you

[frestalink]

Sorry, wrong place declared… solved

$('.upload-site-result').on('click', function (ev) {
	$uploadCrop.croppie('result', {
		type: 'canvas',
		size: 'viewport',
		format: 'jpeg',
		quality: 0.9,
	}).then(function (img) {
...

[Daniel-Cong]

If you want to keep the image format then you should just add extra logic to check what is the extension of the file that user picked, and then tweak the value of croppie’s result format based on that. Keep in mind that croppie can only output jpeg, png, and webp format though, at the time of my writing. (so it’s not possible to let GIF stay GIF).