I am aware of this question-Fineuploader - add jqCrop.
However my challenge is that i do not want to use a generic file input that add jCrop as a listener.I am a newbie with FineUploader.Can some expert confirm if this is the most appropriate steps to follow.
form: {
element:document.getElementById('fileinput_inline')
}
$('#image_input img').Jcrop({
bgColor: 'black',
bgOpacity: .6,
setSelect: [0, 0, 100, 100],
aspectRatio: 1,
onSelect: imgSelect,
onChange: imgSelect
});
Use FineUploader Core form.element option to bind my file input to FineUpload
Use FineUploader validation options to validate size,filetype, etc
At the onSubmitted event ,retrieve the file id and use the drawThumbnail method to insert a preview in an image html element (<img id='image_input'/>)
Introduce jCrop.
Submit the cropped Blob to Fine Uploade
uploader.addBlobs({blob: croppedImageAsBlob, name: "my cropped image.png"});
Fire the upload to server
Your outlined steps look to be appropriate, but the selector tied to jcrop looks incorrect.
For this element: <img id='image_input'/>, your selector string should be '#image_input'.
Related
Hello World,
I trying to crop an image like explain on the React-native Doc
<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>
But it's doesn't work the image is not cropped.
Any idea?
From the docs:
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
React Native Image is not currently supporting image cropping, at least not the way you pointed, however you still have other options that will do the same job.
ImageEditor:
React Native Component, again from the docs:
Crop the image specified by the URI param. If URI points to a remote
image, it will be downloaded automatically. If the image cannot be
loaded/downloaded, the failure callback will be called.
Cropping doesn't require linking.
Image Crop Picker another package that offers cropping, but in a different way: Picking. Requires linking, but thankfully it also supports RN versions > 0.40.
I haven't used any of them, but if I were you, I would first try Image Editor, since you don't need any additional installation except importing.
you can use package for cropping the image. first package for uploading image and second for cropping the image.
react-native-image-picker
react-native-image-crop-picker
for uploading image you can use first package function like this
const pickImage = () => {
launchImageLibrary({quality: 0.5}, response => {
if (!response.didCancel) {
setUri(response.assets[0]);
setCropImg('');
}
});
};
for cropping the image you can use second package function like this
const Crop_img = () => {
ImagePicker.openCropper({
path: uri.uri,
width: dimensions.width - 30,
height: dimensions.height / 3.5,
maxFiles: 1,
showCropFrame: false,
}).then(image => {
console.log(image.path);
setCropImg(image.path);
});
};
I have implemented Dropzonejs to upload files, I have a very simple question, how can I remove a file from the box, actually, there is a 'X' when you upload a file but it's not clickable. any idea?
i'm not allowed to post a screenshot so here is an external link:
enter link description here
In your configuration add the addRemoveLinks options with the value of "dictRemoveFile"
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 2,
addRemoveLinks: "dictRemoveFile", //this is what you want to add
};
I want to restrict end user to upload multiple images using drag and drop feature, should not be greater than 1000 pixels wide. I have read http://docs.fineuploader.com/branch/master/features/validation.html
it's discuss fineuploader provide built-in validators for image dimensions.I have used image.maxWidth attribute but it's not work.
validation: {
allowedExtensions: ['jpeg','jpg','png', 'gif'],
maxWidth:1000,
},
Please suggest what i am doing wrong?
Thanks
I am doing wrong,the correct way is :
validation: {
allowedExtensions: ['jpeg','jpg','png', 'gif'],
image:{maxWidth:1000},
},
You can find more validation attribute details here :
http://docs.fineuploader.com/branch/hotfix_4.1.1/features/validation.html
I am trying to allow users upload their own images to the kineticJS stage through an input in the html. I prefer to keep all my code in a separate js file, here is what i have so far:
$(document).ready(function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 900,
height: 500
});
var layer = new Kinetic.Layer();
});
function addImage(){
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(myImage);
stage.add(layer);
}
var f = document.getElementById('uploadimage').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
How do I expose the stage to the addImage() method? It is out of its scope at the moment and I havent been able to figure out how to solve the problem as the canvas doesn't show in the html until something is added to it. I need these images to be added as layers for future manipulation so want to use kineticJS. Any suggestions would be much appreciated!
http://jsfiddle.net/8XKBM/12/
I managed to get your addImage function working by attaching an event to it. If you use the Firebug console in Firefox or just press Ctrl+Shift+J you can get javascript errors. It turns out your function was being read as undefined, so now the alert is working, but your image isn't added because they aren't stored anywhere yet, like on a server (must be uploaded somewhere first)
I used jQuery to attach the event as you should use that instead of onclick='function()'
$('#addImg').on('click', function() {
addImage();
});
and changed
<div>
<input type="file" name="img" size="5" id="uploadimage" />
<button id='addImg' value="Upload" >Upload</button>
</div>
What you would really want to do is have the user upload the photos (to the server) on the fly using AJAX, (available with jQuery, doesn't interfere with KineticJS). Then, on success, you can draw the photo onto the canvas using your function. Make sure to use:
layer.draw()
or
stage.draw()
at the end of the addImage() function so that the photo is drawn on your canvas, as the browser does not draw the image until after the page loads and img.src is defined at the end. So, this will basically just require things to be in correct order rather than being difficult.
So, step 1: upload using AJAX (to server), step 2: add to stage, step 3: redraw stage
i want to apply jquery tooltip plugin from jQuery Tools website
(http://flowplayer.org/tools/tooltip/index.html) to some elements loaded by ajax in my page.
i know that delegate(0 and live() methods are used for applying events to ajax loaded elements but i don't know how i can apply a plugin to these kind of elements.
the code is:
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: 'down', bounce: true } });
would someone help me?
thank you.
Apply the call to a hover function portion of your script like:
$("#mytable img").live('hover', function() {
//your function here
});
Alternatively you can use the script directly inside the ajax page you're loading in, in which case the script is directly in the same layer as the content.
You have to initialize the tooltip plugin on the new content on the success function of your ajax call.
it is solved now.i wrote it here:
jQuery Tooltip plugin error