1

When trying to use Jcrop with a transparent background canvas it renders it in black, I've checked online, and the solution given as per the question on jcrop turns transparent image black doesn't work for me, it still produces a black background. Below is my code. Any help towards getting this working would be greatly appreciated!

var maxWidth = 200;
var img = new Image();

img.onload = function() {

  var canvas = document.createElement('canvas');
  canvas.width = maxWidth;
  canvas.height = img.height * (maxWidth / img.width);

  var ctx = canvas.getContext('2d');

  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    document.getElementById('image').src = canvas.toDataURL();

  $('#image').Jcrop({
    bgColor:'',
    setSelect: [0, 0, canvas.width, canvas.height]
  });


}
img.setAttribute('crossOrigin', 'anonymous');
img.src = 'https://z1.porter21.com/wp-content/uploads/sites/2/2015/02/sprite1.png';

A live sample can be found at https://jsfiddle.net/9Lmapguv/

Community
  • 1
  • 1
Paul
  • 756
  • 1
  • 10
  • 22

1 Answers1

0

http://jsfiddle.net/seahorsepip/wepu47zn/

Added thumbnail preview on crop/scale/rotate/etc: http://jsfiddle.net/seahorsepip/wepu47zn/1/

Added thumbnail preview on crop select and crop/scale/rotate/etc: http://jsfiddle.net/seahorsepip/wepu47zn/2/ The on crop select thumbnail in the third link is cropped by a div wrapper with overflow hidden to prevent any need for canvas cropping on every select.

Source: How should I crop the image at client side using jcrop and upload it?

See the comment in the validateImage function, you can call a method to update a thumbnail image source there. I added bgColor: "" which seems to work somehow now to the code too. It also has some transform functions and a submit function (IE10+) thanks to @Tatarize

For submitting cropped images in older browsers see my post at the source.

I never got that working either :/

But the cropping output is still a transparent image of course even when it shows black in the cropper.

I used the following "hack" to hide the canvas element with the back background and show a transparent css background image instead.

$(".jcrop-active").css({"background": "url(\""+img.src+"\")", "background-size": "100%"});



.jcrop-active canvas {
    display: none;
}

Example: https://jsfiddle.net/seahorsepip/w8bgm8hk/

Community
  • 1
  • 1
seahorsepip
  • 4,519
  • 1
  • 19
  • 30
  • Is there a way to implement this also on Jcrops thumbnail preview? As that image appears black. It's not as easy as just setting a background, as it's a zoomed in crop preview. – Paul Aug 20 '16 at 00:09
  • I remembered there was a SO question before about Jcrop: http://stackoverflow.com/questions/34651017/how-should-i-crop-the-image-at-client-side-using-jcrop-and-upload-it/. I modified the answer so it doesn't show a black background(bgColor seems to work somehow) and added a comment in the ``validateImage()`` function to show where you can update the thumbnail image element source: http://jsfiddle.net/seahorsepip/wepu47zn/ – seahorsepip Aug 20 '16 at 00:41