Comments (2)
try this!!!...
$( document ).ready(function() {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
result = e.target.result;
arrTarget = result.split(';');
tipo = arrTarget[0];
if (tipo == 'data:image/jpeg' || tipo == 'data:image/png') {
$uploadCrop.croppie('bind', {
url: e.target.result
});
$('.upload-demo').addClass('ready');
} else {
alert('Accept only .jpg o .png image types');
}
}
reader.readAsDataURL(input.files[0]);
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () { readFile(this); });
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport',
quality: 0.8
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
</script>
...
from croppie.
I believe this is what you're looking for: http://www.w3schools.com/tags/att_input_accept.asp
I'll throw that tag on the file input. Not a lot of time was spent in the upload demo, it's definitely not implemented with the best practices. But I suppose there's no harm in improving it.
from croppie.
Related Issues (20)
- There aren't transform and transform-origin styles
- After cropping the result is 1/4 selected area HOT 1
- Crop image stretched
- Uncaught ReferenceError: opts is not defined
- update? HOT 4
- Croppie Slider not working properly
- Doesn't show results
- Square Preset of 1:1 or any other should be able to resized proportionally when trying to drag the grid control point.
- Is it possible to preload an image into the preview? HOT 1
- Can croppie be updated to support heic files? HOT 2
- action after image crop complete HOT 1
- size: "original" not being honoured in result method call HOT 1
- can we use croppie for multiple image crop in one page?
- It shows depricated APIs after updating flutter HOT 1
- Result size{width:n, height:n} not working HOT 2
- Zooming out indefinetly
- when croppie is bound to an element zoom starts really big, I want the image to be scaled to the boundary element HOT 2
- Croppie js switch between portait and landscape mode HOT 2
- Canvas images are displayed large HOT 1
- rebind the viewport and boundary on button click
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from croppie.