I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?
I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
Setting background property of cropper object to false fixes this problem.
You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container
In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.
I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!
Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/
Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});
You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...
Related
I'am using the CropperJs library to crop and edit an image in an ionic application. I need to resize the image freely using the entire screen as cropbox, So, I had to set the crop box size equal to the width of the device and the remaining height of the container in order.
Here's the instantiation:
const offsetHeight = this.shapeContainer.nativeElement.offsetHeight;
const offsetWidth = this.shapeContainer.nativeElement.offsetWidth
this.cropper = new Cropper(this.image.nativeElement, {
dragMode: "move",
aspectRatio: offsetWidth / offsetHeight,
minCropBoxWidth: offsetWidth,
minCropBoxHeight: offsetHeight,
viewMode: 0,
restore: false,
guides: false,
center: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
modal: false,
rotatable: true,
zoomable: true,
});
Export in Base64 :
this.cropper
.getCroppedCanvas({
width: this.shapeContainer.nativeElement.offsetWidth,
height: this.shapeContainer.nativeElement.offsetHeight,
maxHeight: this.shapeContainer.nativeElement.offsetHeight * 4,
maxWidth: this.shapeContainer.nativeElement.offsetWidth * 4,
fillColor: '#000',
imageSmoothingQuality: 'high'
})
.toDataURL("image/jpeg");
HTML:
<div class="image-container" #shapeContainer>
<img [src]="imageBase64" #image alt="">
</div>
SASS:
.image-container {
flex: 1;
position: relative;
height: 80vh;
img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
}
}
When I keep the orientation of the image as the first upload it works great. Here's an example:
The issue comes when i call
this.cropper.rotate(90)
Here's the image that I actually pushed til the edge as the previous one:
I honestly don't know what is going on. I tried everything i could, setting different aspect ratio once the rotate method gets called, changing some options passed through the Cropper class but nothing seems to work. I don't get either if this is a cropperJS bug, even though I don't quite understand why an image in a fixed container with fixed aspect ratio behaves like that.
Does anyone know what's happening?
I have 5-6 images with various sizes like width from 1000px to 1048px and height from 593px to 1736px. But its not loading small images. I tried to pass the width & height but its not working.
HTML
<a class="fancybox" href="images/press/creating websies for NGOS.png" data-fancybox-group="gallery" title="Creating websites for NGOs" data-width="1048" data-height="593">
<img src="images/press/creating websies for NGOS.png" style="border:0" alt="">
</a>
JQUERY
$(".fancybox").fancybox({
beforeShow: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
});
So how do it. It will load as per the width & height passed from html. Any idea guys ?
The Problem
Your current URL is
http://firstplanet.in/about/feature.php/
and your images are linked to
images/press/commitment to unemployment.png
which gets expanded to
http://firstplanet.in/about/feature.php/images/press/creating%20websies%20for%20NGOS.png
change your image links to
/about/images/press/commitment to unemployment.png
to get them working.
More Info
Read this article on relative URLs. Here is an excerpt.
Not prepending a /
If the image has the same host and the same path as the base document:
http://www.colliope.com/birdpics/owl/pic01.jpg
http://www.colliope.com/birdpics/owl/page.html
We would write < img src="pic01.jpg" >
Prepending a /
If the image has the same host but a different path:
http://www.colliope.com/gifs/groovy14/button.gif
http://www.colliope.com/birdpics/owl/page.html
We would write < img src="/gifs/groovy14/button.gif" >
Part of the problem is the context of this being lost.
Whenever we use this in a function, the context of this takes that function.
So we can assign it early : var $this = $(this);
Edit: Perhaps this.element is a fancybox way to get the element, I don't know, if so, I'm wrong. Nontheless, here's what we can do , if you want to make use of those data height and width attributes:
$('a.fancybox').on('click', function (e) {
e.preventDefault(); /* stop the default anchor click */
var $this = $(this); /* register this */
$.fancybox({
'content': $this.html(), /* the image in the markup */
'width': $this.attr("data-width"),
'height': $this.attr("data-height"),
'autoDimensions': false,
'autoSize': false
});
});
Try this out here
Also some CSS will help keep the fancybox frame from scrolling ( for this direct image usage )
.fancybox-inner img {
display:block;
width:100%;
height:100%;
}
Try
$.fancybox("<img src='images/press/creating_websies_for_NGOS.png' style='border:0'>");
I am using jQuery rotate plugin to rotate an image. The problem is that when the image rotates it comes out of the boundry of the container as the width and height of the container are not updated.
Is there away to update the container dimensions also? If you want to look at the application you can go here. Upload an image and press rotate to see the problem.
There is a callback function which will be called when the animation is done.. In this function you can reset the img container width and height like this (not tested):
var img = $('#img');
var cont = img.parent();
img.rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180,
callback: function(){
cont.css({ width: img.css('height'), height: img.css('width') });
}
})
}
}
});
I am trying get this background to fade in on click. I found one tutorial that was helpful, and I ended up created the code so it has two images, and they fade in and out on click to bring up the picture.
Here's the work: http://www.mccraymusic.com/bgchangetest.html
Only a couple of issues though:
How do I make this work without the images getting selected at random? I'd like it to just switch from the plain black image to the image with the drum set. (And cross-fade to if possible, but not necessary)
How do I center the image on the page, so the image of the drums are centered?
I'm guessing this is what you're after:
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image);
$(this).fadeIn(1000);
});
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
DEMONSTRATION
Also added :
display: block;
margin-left: auto;
margin-right: auto;
to your #bg element to center the image.
Alright, assuming you use JQuery
You have #backgroundid and #imageid
Begin by setting
$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible
Now you have #buttonid.
Set up a jquery event so that when it's clicked, you fade out the background, and fade in the image using JQuery's animate.
$('#buttonid').click(function() {
$('#backgroundid').animate(function() {
opacity : 0 // fade it to 0 opacity, invisible
}, 1000); // animation will take 1000ms, 1second
$('#imageid').animate(function() {
opacity : 1 // fade it to full opacity, solid
}, 1000);
});
Now about that image centering.
You can either let css manage it with
body { /* Body or #imageid parent */
text-align : center;
}
#imageid {
margin: 0px auto;
}
Or you can stick to a JQuery solution, using absolute/fixed positioning.
First, use some css to fix the position of your image
#imageid {
position: absolute; // or fixed, if you want
}
Now use JQuery to reposition it
function positionImage() {
var imagewidth = $('#imageid').width();
var imageheight = $('#imageid').height();
$('#imageid').css('left', ($(window).width() - imagewidth) / 2);
$('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too
if you keep a div element with height and width as 100% and bgcolor as black. And then change the opacity of the div as desired to get the fade in/out effect, that should generate the same effect. I guess..
You are better off using any available jQuery plugin as they would have optimized and fixed bugs for multiple browsers.
Try lightBoxMe plugin
http://buckwilson.me/lightboxme/
This is the simplest plugin available!
We are using Galleria library (http://galleria.io/) for dynamically generating slideshow from a set of user selected images. The user can also select a few options like height, width, transition speed, show/hide thumbnail carousel etc. and these settings are applied to Galleria options.
Now when user selects to hide carousel, I set relevant options which makes the thumbnails in the carousel disappear. However, the container div (with css class galleria-thumbnails-container) still occupies some whitespace. I tried changing a few css attributes of this class as well as galleria container w/o any luck.
Things I have tried:
After selecting div with class "galleria-thumbnails-container", change height to 0. No change observed.
After selecting div with class "galleria-thumbnails-container", change display to none. No change observed.
After selecting div with class "galleria-container notouch", reduce height by say 70 px. This reduced the height of main image in the slideshow.
I have gone through Galleria doc but they do not seem to have an option to handle this. So it has be a css hack. Any ideas?
Thanks.
You can turn off the thumbnails by using the following option on the script:
$('#galleria').galleria({
thumbnails: "false"
});
Documentation
thumbnails
type: Boolean or String
default: true
Took a look at your link and that space below your slider is made due to the fact that your images are not scaling according to the width/height you specified in your script, and also due to some spacing on the .galleria-stage class. Try this to fix it:
javascript
$('#slideshow_1749').galleria({
data_source: mmod_slideshow_data,
dummy: '/images/default.jpg',
showCounter: false,
width: 300, /* scale accordingly */
height: 300, /* scale accordingly */
autoplay: 3000,
carousel: false,
thumbnails: false,
showImagenav: false,
carousel: false,
thumbFit: false,
thumbMargin: 0,
imageCrop: "height"
});
CSS
.galleria-stage { /* modify line 17 of your galleria.classic.css stylesheet */
bottom:10px; /* define the bottom spacing, same as top/left/right */
}
Just a side note, but why use such a complex plugin for such a simple task? You can get a cleaner result by using the jQuery Cycle plugin.
I could not solve the problem with jquery / gallery.js -but this workaround does the job:
overrride styles dynamicly (adapt to your values needed):
function fixcss()
{
// dynamic overides of styles because all ties to change css with jquery
//galleria.js unsucsessful...
if (! thumbnails)
{
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 60px !important; } \
.galleria-info {bottom: 0px !important } \
.galleria-thumbnails-container {height: 0px \
!important;}";
document.body.appendChild(sheet);
}
if ( ! showInfo ){
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 80px !important; } \
.galleria-info {bottom: 10px !important }";
document.body.appendChild(sheet);
}
};
$(document).ready(function() {
Galleria.loadTheme('++resource++fgrcon.slideshow/galleria.classic.js');
Galleria.configure({
transition: 'fade',
transitionSpeed: transitionSpeed,
autoplay: galleryduration,
lightbox: lightbox ,
showInfo: showInfo ,
showCounter: showCounter ,
showImagenav: showImagenav,
thumbnails: thumbnails ,
height: galleryheight
});
fixcss();
Galleria.run('#galleria');
}
);