I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.
How can I get rid of this easily? Thanks.
Making some huge assumptions about your situation, I've decided that you might try something like this: $(function(){$('.jcrop-holder').removeAttr("style");});
If that's not what you need, you oughtta give us some more info!
I had a similar issue with an old version of jCrop and created a custom destroy function. Here is the gist of it:
function crop_reset()
{
//Reset coordinates of thumbnail preview container
$('#crop_preview').data("coords.x", 0);
$('#crop_preview').data("coords.y", 0);
$('#crop_preview').data("coords.w", 0);
$('#crop_preview').data("coords.h", 0);
//Reset src of jcrop img and copies bound to page specific full size and preview divs
$("#crop, #crop_preview, .jcrop-holder img").attr("src", "");
}
function crop_start()
{
//Initialize and remove previous jCrop containers using load event callback
$('#crop').Jcrop({
onChange: showPreview,
onSelect: showPreview,
onLoad: hidePreview,
aspectRatio: 1,
setSelect: [0, 0, 50, 50],
minSize: [50, 50],
allowResize: false,
allowMove: true
},function(){$(".jcrop-holder").not(":last").remove();});
//Remove previous jCrop containers using timer if callback is not supported
/*
window.setTimeout(function noblank(){
$(".jcrop-holder").not(":last").remove();
}, 1000);
*/
}
Related
I've tried to create a zone, attach image to it's and change displayed size of the zone, but it didn't work. this === Phaser.Scene
this.zone = this.add.zone(
this.game.scale.width / 2,
this.game.scale.height / 2,
this.game.scale.width,
this.game.scale.height,
);
Phaser.Display.Align.In.BottomRight(this.image, this.zone, -20, -20);
and on resize event
this.zone.setDisplaySize(this.game.scale.width, this.game.scale.height);
It places correct at start but doesn't work on resize. I double-checked that the event handler works.
Would be easier to just set the Origin of your image to the bottom-right: Image.setOrigin(1, 1);.
Then just do Image.setPosition(width, height), using the values that Phaser passes automatically to the resize event callback. No need for a Zone to do this at all, really.
I recently started using jsPlumb to make a UI for a client, but I have come across two issues that I can't seem to solve.
jsFiddle here: http://jsfiddle.net/ugxopksz/
The first is my endpoints and connections not being repainted when I resize the window. The site this is going on has some responsive design in it. I tried doing the whole
$(window).resize(function(){
jsPlumb.repaintEverything();
});
But that doesn't do crap. I don't get an error from it, but it doesn't do anything at all.
My second problem is I cannot find anyway to specify more than one source for one connection. Something like:
instance.connect({
source:"oneT",
target:"center",
anchor:[[1, 0.5, 0, 0, 0, 80], [0, 0.5, 0, 0, 7, -40]]
});
Unless I can declare some array and create a loop that will make that block of code for each element in the array. The reason I am looking for that is this UI is pulling from a database and creating each outer element, since they can change I'd like it to be able to handle if database changes occur I don't have to go in and manually add new elements.
Any help would be greatly appreciated.
Since you have created the connections using a seperate jsPlumb instance you have to repaint the jsPlumb components using the same instance.
Change the following line
jsPlumb.repaintEverything();
to
instance.repaintEverything();
Click here for updated jsFiddle link
For First Question:
Making use of list elements(li tag) is not preferable for connection. Instead you can make of div elements and try it. Resize of windows also fails to repaint since the li tags doesn't have proper positions. From Doc's it is clear that element having position absolute will behave normal under all conditions.
Have a look at this FIDDLE for connecting DIV elements and also for repaint option on resizing window.
For Second Question:
For now jsPlumb doesn't support multiple id's for source parameter so you have no other option than to loop them in an array as:
var trg = 'center';
var src = ['oneT','twoT','threeT'];
for(var i=0;i<src.length;i++)
{
jsPlumb.connect({
source: src[i],
target: trg,
connector: [ "Flowchart", {cornerRadius:1} ],
paintStyle:{ lineWidth:5, strokeStyle:'#3E2522' },
anchors: [[1.02, 0.5, 0, 1],
[-0.02, 0.5, 0, 0]],
endpointStyle: { radius:0.5 }
})
}
I'm having serious troubles implementing Jcrop. I'll show the code regarding Jcrop implementation:
$("#crop-mini").Jcrop({
onChange : updatePositions,
onSelect : updatePositions,
boxWidth : 500,
boxHeight : 400,
keySupport : false,
setSelect : [0, 0, 999999, 999999],
minSize : [10, 10]
});
Where #crop-mini is the <img> tag containing the image. updatePositions is just a function that... updates the selection positions. Pretty straightforward:
function updatePositions(coords)
{
$(".x").val(coords.x);
$(".y").val(coords.y);
$(".w").val(coords.w);
$(".h").val(coords.h);
};
I upload an image, write its url into the <img> tag, fire a fancybox and call JCrop. However, when I resize the selection box, boom, this glitch appears:
It looks like the selected content shows the same image being deformed from positions coords.y (coords is the current selection position) to coords.h+coords.y, and from 0 to coords.w. If I put the selection touching the left corner, you would see the whole image.
By the way, cropping works as expected, and the real coordinates are being passed, so I happen to think that the problem is within the presentation, not the processing. Did I do anything wrong?
This happens when you have max-width set in your css:
img {
max-width: 100%
}
Just add the following rule to fix it:
.image-version img {
max-width: none;
}
Where .image-version is a css class of the element wrapping <img> with id #crop-mini.
I'm trying to use jquery jcrop to crop images.
this code starts the plugin adding some selected area to the image with aspcet ratio.
$('#cropbox').Jcrop(
{
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
But if user clicks mouse on image somewhere else, the selection disappears. So what I want is to disable mouse clicks in this plugin so selected area will remain over the image.
SOLUTION
I've received email on my request to the creators of jcrop and that solved the problem
Here is the solution
First there must be some setSelect , so some area is always selected from the beginning.
And this allowSelect: false prevents mouse clicks, and keeps selected area always over the image.
$('#cropbox').click(function(){
return false;
})
or
$('#cropbox').click(function(e){
e.preventDefault();
})
How do I change the zindex of an element inside a canvas?
Example code:
fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
image.set('left', 200).set('top', 250);
canvas.add(image);
});
var helloWorld = new fabric.Text('Hello world!', {
left: 0,
top: 0,
fontfamily: 'delicious_500',
zindex: 10
});
canvas.add(helloWorld);
Using the fabric.js library.
For future reference:
fabric.Element.html#bringForward
I can't get the dang thing working at all, but here's my guess as to what's happening:
Fabric asks that URL for the image. Fabric has been given a callback method when the image is returned, so while it's waiting, it moves on to the next task
Fabric creates the Text object and adds it to the canvas.
Finally, it notices that the image has loaded (the specific example you provided actually 404'd on me), and passes it to the callback method.
Because the image is added to the canvas after the text, I'm assuming that Fabric is acting just as the canvas normally would: things that are added later are drawn on top of things that are already there. ...Even though you gave the text a z-index.
Remember, I couldn't get it to work and just gave up. So it's entirely possible I'm totally, completely wrong. If that is the case, I have another theory:
Are you sure that zindex is the correct property? If you are, then try setting it on the image, as well:
image.set('left', 200).set('top', 250).set('zindex', 5);
And if you aren't sure, then... there you go.
Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:
canvas.moveTo(object, index);
object.moveTo(index);
i hope this is what you want:
http://jsfiddle.net/Kienz/RRv3g/