I'm trying to use this library but without dropping an image
I upload image file and return base64 of it
and remove the uploaded file
Then i set this base64 to img
i also make another img as result image
when I call the function of compress
give me that error

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

can I use it without using img
i give it base64 and it return base64 to me

Please inform me how do i compress multiple images.

I have made an online gallery where people can upload multiple images at once and i want that the entire images be compressed before being uploaded.

I am trying to use this compression method on my site.
The problem is When I try to compress the file there is no problem, But when I try to parse the compressed file object to struts2 upload that time I am getting null value in file Path.

I've been testing png compression on http://makeitsolutions.com/labs/jic/, but after compression the file seems to be bigeer than the original file.

This png image for example has a size of 2462 kb, and goes to 2794 kb after compression with a selected compression ratio of 30% in google chrome:
http://pngimg.com/upload/water_PNG3277.png

Thanks!

In brief examination it looks like the code only outputs jpeg regardless of input.
As jpeg does not support an alpha channel that would seem to present a problem
for images that contain transparent segments. Obviously since the compression leverages jpeg it would seem a little hocus pocus is in order.

Just happens to be the programming task at hand here tonight is compressing .png with alpha channel intact, so I'll venture a germinating thought that may or may not bare fruit.

The idea that will be tested is to make a mask of the transparent area, do the compression via jpeg as normal, BUT then re-merge the transparent area and output in the original image format, hopefully realizing both some compression benefit and retaining alpha channel too, while also keeping the code's footprint munchkin sized.

Hello,

You will publish in npm ? When ?

How do we avoid blank spot at the bottom if the image is taken vertically?

hi, thanks for the code!! it works fine for me. But i came out with a problem while using it.
in my code, i try to use as follow:
jic.upload(img, "/uploadImge", "image", "t."+output_format, uploadImg1, errorCallback, duringCallback, customHeaders);
and
var duringCallback = function (progressPercent) { $("#percent").html(progressPercent); };
but it seems that it never invoke the duringCallback to show the progressPercent. can you tell me how to use it.
Thanks!

Hello, how hard is it to add a target image size (file size) parameter?

Instead of guessing at what quality will achieve what size.

My own head can think of a binary search algorithm whereby it tries 5-6 iterations attempting to get just under the target max file size. I can use your library to achieve this. But if you have a easier way based on your inside knowledge can we make this a feature?

Hi ,when i try to upload my image i've got this error :

InvalidCharacterError: String contains an invalid character JIC.js:105

in atob(data)

Thks

Hi, i cannot figure out how to compress pictures chosen via the input type file, i tried creating a var = new Image() and setting its path to that of the image but it won't work.
Please help

When I compress pictures taken by iPhone it changes the orientation

最近在项目中也遇到需要压缩上传的需求，请问一下，在压缩的同时，可以修改图片的长宽。

I'm importing it like: import jic from 'j-i-c'; but I get this error when trying to use it: _jIC2.default.compress is not a function

Compression is working in chrome, but some unknown reasons not working in firefox, if i debug the js for first time i can able to upload image otherwise image becomes corrupted.
This is the "https://s3-us-west-2.amazonaws.com/cdndev.mylyapp.com/uploadeddocs/gallery/motherdaughtersymboltattooideas10022201753516.jpg" link of image.

Here is the code snippet.

                    i = new Image();
                    c = new Image();
                    t = new Image();
                    if (file.type == "image/png") {
                        output_format = "png";
                    }
                    i.src = base64;// original image converted in base64

                    c.src = jic.compress(i, objVariables.ImageQuality, output_format, i.width, i.height).src;
                    var obj=objUtility.compressedHeightWidth(i);
                    t.src = jic.compress(i, objVariables.ImageQuality, output_format, parseInt(obj.Width), parseInt(obj.Height)).src;
                    var blobs = [];

                    blobs.push({ src: i.src, path: S3GalleryBucketOriginal});
                    blobs.push({ src: t.src, path: S3GalleryBucketCompress });
                    blobs.push({ src: c.src, path: S3GalleryBucket});

Hi,

Thanks for this awesome library!

Do you plan for any support for other types of images, like BMP and gif? Would be awesome to see a huge size reduction for these image types!

have any method?

if your upload file large than 2M size. canvas will be broken on Safari

I've experienced the same problem. It seems that this is an iOS limitation, jpg over 2 megapixel are subsampled.

See Creating Compatible Web Content for Safari on IPhone
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

https://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios

It will be great if J-I-C can be managed by bower.

The compress function allows choosing mimetype, but when using png the images only get bigger.

In the example code you provided, you specify the value of 'quality' as having to be an integer from 0 to 100, when it really should be a floating point value from 0 to 1:

//An Integer from 0 to 100
var quality = 80;
...
//This function returns an Image Object
target_img.src = jic.compress(source_image,quality).src;

Took me a little while to figure out why the compression wasn't working correctly for me, until I took a look at the source code on your demo page :)

Hey , I am using JIC.js library for image compression and uploading it,
I need to accept this compressed image into python code.
Currently I am using request.files['imgInp'] to accept input.
How can i get compressed image?

This is my javascript code

     function readURL(input) {
        if (input.files && input.files[0]) {
        var output_format = "jpg";
        var file = input.files[0], 
        reader = new FileReader();
        reader.onload = function(event) {
        var i = document.getElementById("source_image");
            i.src = event.target.result;
            i.onload = function(){
                image_width=$(i).width(),
                image_height=$(i).height();

                if(image_width > image_height){
                    i.style.width="320px";
                }else{
                    i.style.height="300px";
                }
                i.style.display = "block";
                console.log("Image loaded");
            }             
        };     
        if(file.type=="image/png"){
            output_format = "png";
        }
        console.log("Filename:" + file.name);
        console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
        console.log("Type:" + file.type);         
        reader.readAsDataURL(file);

        ///////////////////////////////////////////////////////////////////////////////////////
        var result_image = document.getElementById('result_image');
        var source_image = document.getElementById('source_image');
        if (source_image.src == "") {
            alert("You must load an image first!");
            return false;
        }
        console.log("process start...");
        result_image.src = jic.compress(source_image,30,output_format).src;
        result_image.onload = function(){
            var image_width=$(result_image).width(),
            image_height=$(result_image).height();                 
            if(image_width > image_height){
                result_image.style.width="320px";
            }else{  
                result_image.style.height="300px";
            }
           result_image.style.display = "block";
        }
        console.log("process finished...");         
    }        

};

This is my html code

This is python code

@app.route('/updateuser',methods=['GET','POST'])
def updateuser():
file = request.files['imgInp']

This project is one of the best ideas for bandwidth saving of all time... IMHO, for sure.
But it's 4 years since last release and many issues open without feedback.
Is there still any interest in keeping it active by the owners?

I tried to compress a JPEG image which is of 6.x kb, and after compression, all I got is an 8KB image. Is there something I can do about this?

Hi,
I'm using this library for image compression and getting error like below.

SecurityError (DOM Exception 18): The operation is insecure. = $1
toDataURL
compress — JIC.js:24

After compression When i download the file the size is reduced to half of the original file(approximately).
If I upload that compress file the size does not vary like download.

Right now working on an angular2 app. I'm using J-I-C for compression before uploading to firebase storage. It works perfectly on Chrome. On other browsers it doesn't seem to process properly.

...
this.compressedImage = jic.compress(imgTag, quality, 'jpg').src;
// on safari this.compressedImage  = "data:"

let file = dataURItoBlob(this.compressedImage);

let uploadTask = storageRef.child('images/' + newKey + fileType)
          .put(file);
...

Hey after reading your answer on SO I tried using JIC but I am currently getting the following error when I select a file which should get compressed;

(index):109 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

I have also left a question related to this problem here

Any advice on why I am getting such an error. I am actually quite new to JS itself hence I am a bit slow in error handling.

Is typings file for this javascript package available somewhere?

Great source available. However there is an error on the below line any support can be expected please.

var newImageData = canvas.toDataURL(mime_type, quality/100);

Error on console:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Here is my code:

sample.txt

I'm using the library to compress images. I started with creating the source element like so:

var img_elem = document.createElement('img');
    img_elem.src = canvas.toDataURL();

The img_elem, when logged, shows that the element actually has the src attribute filled, so up to this point it all works.

Then, I put it through the compressor:

var compressed = document.createElement('img');
    compressed.src = jic.compress(img_elem, 90, 'jpg').src;

Now, when I log compressed it shows:

<img src="data:,">

Hello :)

Trying to see the working example at link in the README, I came across the following error page:

Just wanted to see if this was an error, or maybe the examples moved elsewhere.

    compress: function(source_img_obj, quality, output_format){

         var mime_type = "image/jpeg";
         if(typeof output_format !== "undefined" && output_format=="png"){
            mime_type = "image/png";
         }

         console.log(source_img_obj);
         var cvs = document.createElement('canvas');
         cvs.width = source_img_obj.naturalWidth;
         cvs.height = source_img_obj.naturalHeight;
         console.log(cvs.width, cvs.height, source_img_obj.width);
         var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
         var newImageData = cvs.toDataURL(mime_type, quality/100);
         console.log('data URL:', newImageData);
         var result_image_obj = new Image();
         result_image_obj.src = newImageData;
         return result_image_obj;
    },

You query naturalWidth and naturalHeight here. Both values could be 0 if they are not available.

This case happened to me.

Though this may not be considered as a strict bug on jic.js side, the caller should make sure source_img_obj meets assumptions.

But it's better to include some validity checking for such a case, for better user/developer experiences.

Also, does anybody know why that naturalWidth and naturalHeight can be zero? I have no idea how to fix this problem.

Can you make browsing file? because i don't like a drag and drop function!

Hola Estimado brunobar79,

e estado intentado utilizar tu librería sin éxito aun jajajjaja, pero sin duda debe ser un error mio jajaj,

mira me da error NS_ERROR_NOT_AVAILABLE:
en la linea

var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

JIC.js (line 37)

y aveces en

var ctx = cvs.getContext("2d").drawImage(compressed_img_obj, 0, 0);

8
JIC.js (line 59)

e modificado el script para que funcione sin drag & drop el script modificado es el siguiente.

jQuery(function(){
jQuery(':file').change(function(e){
var file = this.files[0],
reader = new FileReader();
reader.onload = function(event) {
var i = document.getElementById("source");
i.src = event.target.result;
i.onload = function(){
image_width=jQuery(i).width(),
image_height=jQuery(i).height();

                if(image_width > image_height){
                        i.style.width="320px";
                }else{
                        i.style.height="300px";
                }
                i.style.display = "block";
                console.log("Image loaded");

        }

    };
    reader.readAsDataURL(file);
    var source_image = document.getElementById('source');
    var result_image = document.getElementById('resultado');
    result_image.src = jic.compress(source_image,75).src;
    result_image.onload = function(){
        var image_width=jQuery(result_image).width(),
            image_height=jQuery(result_image).height();

        if(image_width > image_height){
            result_image.style.width="320px";
        }else{
            result_image.style.height="300px";
        }
       result_image.style.display = "block";


    }

});

});

en el botón de subida el código es el siguiente

var result_image = document.getElementById('resultado');
var callback= function(response){
console.log("image uploaded successfully! :)");
console.log(response);
}
jic.upload(result_image, '/foto/subir/', 'file', 'foto.jpg',callback);

/foto/subir es el script php con zendframework que se encarga de subir la foto resultado de la compresión,

te agradecería muchísimo si me pudieras dar un cable con lo que está pasando, espero estés muy bien me despido

Atte.
GrisUNO

:54 Uncaught SyntaxError: Unexpected token .

target_img.src = jic.compress(file,quality,output_format).src;

compress: function(source_img_obj, quality, output_format){
var mime_type = "image/jpeg";
if(typeof output_format !== "undefined" && output_format=="png"){
mime_type = "image/png";
}
var cvs = document.createElement("canvas");
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
},

I am getting newImageData ==> "data:,"

does this plugin work for iOS?

Scenario : I want to take picture from iPad camera and upload on our server after compressing it.

I can't seem to get it to actually compress a png file on the demo page. I tried the attached file with the default compression ratio of 30 and the file size went from 2765KB for the source file to 4089KB for the "compressed" file. I also tried different compression ratios but they didn't seem to change anything in the output file.

The callback parameter seems to be ignored by the upload function.

Great library.

I tried the JIC's demo link to upload a large .jpg (size: 4.6mb) file at the link below (after downloading the image onto my computer first)

http://www.kenrockwell.com/nikon/d810/sample-images/810_4051.JPG

At the Compression ratio of 5% or any up to 30% that I've tried, I've gotten output images that ranged between 2 to 4 times the original filesize.

For example:
Compression ratio: 5%
Original filesize: 4764.8720703125 Kb
JIC Compress/uploaded filesize: 14001.7578125 Kb

Am I doing this correctly on your demo site?