Cropper: Black background when cropping image

[bossmanpl]

I have viewMode: 0, and when i want to crop image, setting cropping box outside of that image, script adds to my saved picture black background, is there a way i could add white background when this happens ?

I am using version 2.3.0

[icemanind]

I have this same issue. It seems that if the image contains transparent pixels, it gets converted to black pixels.

[bossmanpl]

i did resolve it not quite in a good way, but it is quite alright now.

Wiadomość napisana przez Alan Bryan [email protected] w dniu 19.09.2016, o godz. 23:39:

I have this same issue. It seems that if the image contains transparent pixels, it gets converted to black pixels.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/fengyuanchen/cropper/issues/776#issuecomment-248135488, or mute the thread https://github.com/notifications/unsubscribe-auth/AKeCjPBmSUB1906zvm4az_9AwVf8CpYpks5qrwETgaJpZM4J7g8b.

[justijndepover]

I have the same problem as well. It should be possible to give a color in the options

[tiloru]

There is an option fillColor in the _getCroppedCanvas_ method to set the background color. That should help!
https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

[11webapps]

Hi
I have the same issue. I used fillColor option in getCroppedCanvas method but issue is not resolved.

[fengyuanchen]

@11webapps Browser version? Cropper version?

[nirav-panchal]

I also have same issue when cropping image it will take black background if image height or width is smaller than crop area my cropper version is 1.0.0 -rc and the fillcolor property is also not working.

[justijndepover]

The problem probably lies in your server code that does the actual cropping. What language are you using server side?

[nirav-panchal]

I am using php.
But still when i am trying demo on your site demo https://fengyuanchen.github.io/cropperjs/ when i clicked "get cropped canvas button" and download image it still gives image with black background if image size is smaller than cropped area.
Is it possible to set backgroud to white color?

[justijndepover]

Can you share the code you use in php to process the picture?

[nirav-panchal]

See this screenshots as i have taken.


and here is result image :

[nirav-panchal]

Here is my javascript code :
var image1 = document.getElementById('canvasToThumb1');
var options1 = {
aspectRatio: 1,
center: true,
highlight: true,
background: true,
cropBoxResizable: false,
modal:true,
viewMode:0,
dragMode:'move',
minContainerWidth:984,
minContainerHeight:500,
getCroppedCanvas:{fillcolor: "#FFFFFF"},
ready: function (e) {
console.log(e.type);
},
crop: function (e) {
var data = e.detail;
console.log(e.type);
$('#x1').val(Math.round(data.x));
$('#y1').val(Math.round(data.y));
$('#w1').val(Math.round(data.height));
$('#h1').val(Math.round(data.width));
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
}
};

var cropper1 = new Cropper(image1, options1);

// cropper end
$('#crop1').bind('click', function(e) {
e.preventDefault();
$('#spinner').show();
var url = "/photo-upload";
var $post = {};

$post.photo= $("#photo1").val();
$post.photo_id= $("#photo_id").val();
$post.w= $('#w1').val();
$post.h= $('#h1').val();
$post.x= $('#x1').val();
$post.y= $('#y1').val();

$.ajax({
    type: "POST",
    url: url,
    data: $post,
    cache: false,
    success: function(data){
    if(data['error'] == undefined) 
    {
        location.reload();
    }
    else
    {
        $('#console').html(data['error']);
    }
},
    error: function(jqXHR, exception){
    if(jqXHR.status == 401)
    {
        window.location.href = '/';
    }
}

});
return false;
});
});

[justijndepover]

Yeah, it's normal behaviour to fill the rest with black.
This plugin gives the correct variables to a script that should be on your server. There php will use the variables given from the plugin and use them to crop the image.

The black borders are created there. So this is a php issue, nothing to do with your javascript.

Could you share the code you use when you post your image to/photo-upload

[nirav-panchal]

public static function crop_image($file,$w,$h,$x,$y) {

    $source_path = upload_tmp_path($file);   
    if ($file && file_exists($source_path)) {
        Image::make($source_path)->crop($w, $h, $x, $y)->save($source_path);
        upload_move($file,'photos');
    }
}

I just crop image with coordinates got from cropper and save the image to source path.

[nirav-panchal]

can you please suggest me how can i replace black background with white color?

[justijndepover]

I'd like to, what plugin are you using? I'm guessing the Image::make(...) is from a php plugin?

maybe this one http://image.intervention.io/api/make ?

[nirav-panchal]

yes it is http://image.intervention.io/api/make

[justijndepover]

I'm not very familiar with the plugin, but i found a different issue with the same problem as you have:
https://github.com/Intervention/image/issues/36

[nirav-panchal]

I have also checked that link and try as per its suggestion but still it didn't work. I think its not php issue. it is also not working in cropper sites demo as i sent screenshots above.

[justijndepover]

I'm fairly confident the problem lies with image/intervention and not with the cropper.js plugin.

It looks like the problem hasn't been properly documented as well. Maybe you should consider using a different plugin to process the image.

[nirav-panchal]

Have you try as per my screenshots taken from cropper demo?
Here is the link : https://fengyuanchen.github.io/cropperjs/
If above site link is not belongs to original cropper js than i am wrong.

[justijndepover]

If i test out the plugin it also adds black. But thats not an issue with the plugin itself. It's with the server side code that actually processes the image.

The cropper.js plugin only gives some parameters to your server. Then the server will use those parameters to crop the image. So the cropping is actually done by your SERVER not your browser.

When the server is done processing the image you can download it

That's how it works. So you should be looking at image/intervention to solve your problem or replace the php plugin with a different one. This is not a cropper.js problem.

[Alexbeis]

Hi,
@nirav-panchal may be it's about jpeg "issue", with png it should add transparent background..
regards

[andyblem]

To those experiencing the problem, assuming your are using intervention the problem is caused by trying to crop an image that does not exist(if that makes sense, let me elaborate). In my situation I have an image that I have to crop several time on each request. The first approach I took was to load the image in memory, run a loop and crop the image on each iteration. The first iteration cropped okay but the following iterations produced a black picture. To figure out what was happening i manually inserted the arguments and observe what was happening(my cropping worked).
$img->crop(200, 200, 0, 0)->save('images/vizjig/work/test.jpg'); $img->crop(200, 200, 200, 0)->save('images/vizjig/work/test.jpg');
So i figured out the problem arises when you try to recycle a variable, like in this instance
for($i = 0; $i < $root; ++$i){ $posY = $i * $height; for($j = 0; $j < $root; ++$j){ $posX = $j * $width; $croppedImage = $img->crop($width, $height, $posX, $posY); $croppedImage->save('images/vizjig/work/'.$node["children"][$currChild]["HTMLid"].'.jpg'); ++$currChild; } }

So I had to refresh the image at each iteration, like so
for($i = 0; $i < $root; ++$i){ $posY = $i * $height; for($j = 0; $j < $root; ++$j){ $posX = $j * $width; $croppedImage = $img->crop($width, $height, $posX, $posY); $croppedImage->save('images/vizjig/work/'.$node["children"][$currChild]["HTMLid"].'.jpg'); $img = Image::make('images/vizjig/work/'.$node["HTMLid"].'.jpg'); ++$currChild; } }

[Artistan]

@andyblem - sorry, I was having a hard time reading your text...

using intervention

the problem is caused by trying to crop an image that does not exist.

In my situation I have an image that I have to crop several time on each request.
The first approach I took was to load the image in memory,
run a loop and crop the image on each iteration.

The first iteration cropped okay, but the following iterations produced a black picture.

To figure out what was happening i manually inserted the arguments and observe what was happening (my cropping worked).

$img->crop(200, 200, 0, 0)->save('images/vizjig/work/test.jpg'); 
$img->crop(200, 200, 200, 0)->save('images/vizjig/work/test.jpg');

So i figured out the problem arises when you try to recycle a variable, like in this instance

for($i = 0; $i < $root; ++$i)
{ 
    $posY = $i * $height; 
    for($j = 0; $j < $root; ++$j)
    { 
        $posX = $j * $width; 
        $croppedImage = $img->crop($width, $height, $posX, $posY); 
        $croppedImage->save('images/vizjig/work/'.$node["children"][$currChild]["HTMLid"].'.jpg');
        ++$currChild; 
    } 
}

So I had to refresh the image at each iteration, like so

for($i = 0; $i < $root; ++$i)
{ 
    $posY = $i * $height; 
    for($j = 0; $j < $root; ++$j)
    { 
        $posX = $j * $width; 
        $croppedImage = $img->crop($width, $height, $posX, $posY); 
        $croppedImage->save('images/vizjig/work/'.$node["children"][$currChild]["HTMLid"].'.jpg');
        $img = Image::make('images/vizjig/work/'.$node["HTMLid"].'.jpg'); 
        ++$currChild; 
    }
}

[fengyuanchen]

@all When call the getCroppedCanvas method, you should pass a fillColor option if you want to get a JPEG image in the end, if not the transparent background will become black:

cropper.getCroppedCanvas({
  fillColor: '#fff',
}).toDataURL('image/jpeg');