this is my code for image upload now i want to crop selected image.
pls help me to crop selected image.
my max dimention for croping is 145X190 px
my code for image uploading is
This:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
$(function(){
$('image.src').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>
Now i want crop the image.hope you understand my code.
You've already imported jquery.min, so you don't have to import "jquery-1.9.1.js" then.
Beside that maybe you need to call Jcrop just after you created the image tag.
I did the modification to your code and I was able to crop the uploaded image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#uploadPreview').html('<img id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
$('#myImage').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>
Though I have not understood your full code but it looks like you have not implemented the crop functionality. Correct me if I am wrong there.
But to implement crop you can use Jcrop plugin from JQuery.
Let me know if I have misunderstood your query.
Related
Now I have this Jquery font rezising slider but need it in vanilla.js. It is working properly but I can not manage turning it into plain Javascript.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="app.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="font-slider">
<input type="range" min="17" max="28" value="22" step="1" />
</div>
<div>
<h1>Changing Font Size</h2>
<p>I am just a boring text, existing here solely for the purpose of this demo</p>
<p>And I am just another one like the one above me, because two is better than having only one</p>
I am a link, don't click me!
</div>
<script>
var curSize = localStorage.getItem("saveSize");
if (curSize) {
var saveSize = curSize;
$('body').css('font-size', saveSize + 'px');
var setSize = $('body').css('font-size');
}
$('.font-slider input[type="range"]').on("input change", function () {
var newSize = $(this).val(),
defaultSize = $("body").css("font-size"),
minSize = 17,
maxSize = 28;
if (newSize <= maxSize && newSize >= minSize) {
$("body").css("font-size", newSize + "px");
localStorage.setItem("saveSize", newSize);
}
});
</script>
</body>
</html>
Try:
var curSize = localStorage.getItem("saveSize");
var slider = document.querySelector('.font-slider input[type="range"]')
var body = document.body
if (curSize) {
var saveSize = curSize;
body.style.fontSize = saveSize + 'px';
}
slider.addEventListener("input", function (e) {
var newSize = this.value,
defaultSize = body.style.getPropertyValue('font-size'),
minSize = 17,
maxSize = 28;
if (newSize <= maxSize && newSize >= minSize) {
body.style.fontSize = newSize + 'px';
localStorage.setItem("saveSize", newSize);
}
});
var initialCircle;
var i;
var randomXPos;
var randomYPos;
var colorArray;
var interval01;
var circleNodeList;
var circleNodeListIndividual;
var xDirection = 5;
var yDirection = 5;
var dX = xDirection + 5;
var dY = yDirection + 5;
colorArray = [
'aliceblue', 'lavender', 'powderblue', 'lightblue', 'lightskyblue', 'skyblue', 'deepskyblue', 'lightsteelblue', 'dodgerblue', 'cornflowerblue', 'steelblue', 'cadetblue', 'mediumslateblue', 'slateblue', 'darkslateblue', 'royalblue', 'blue', 'mediumblue', 'darkblue', 'navy', 'midnightblue', 'blueviolet', 'indigo'
];
var randomColor;
function startBouncingHoverCircles() {
interval01 = setInterval(function() {
randomXPos = Math.floor(Math.random() * 380) + 31;
randomYPos = Math.floor(Math.random() * 235) + 31;
randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
initialCircle = document.createElement('div');
document.querySelector("#container").appendChild(initialCircle);
initialCircle.className = "aces";
initialCircle.style = 'height:30px;width:30px;border-radius:50%;box-sizing:border-box;position:absolute;border:3px solid green;background-color:' + randomColor;
initialCircle.style.top = randomYPos + 'px';
initialCircle.style.left = randomXPos + 'px';
}, 1);
setTimeout(function() {
clearInterval(interval01);
movement()
}, 100)
}
function movement() {
setInterval(function() {
circleNodeList = document.querySelectorAll(".aces");
for (i = 0; i < circleNodeList.length; i++) {
circleNodeListIndividual = circleNodeList[i];
circleNodeListIndividual.style.transition = "transform 1s";
circleNodeListIndividual.style.transform = 'translate(' + dX + 'px' + ',' + dY + 'px' + ')'
}
}, 1500)
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js" integrity="sha512-vPeZ7JCboHcfpqSx5ZD+/jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU+oujBJKnWmu4hU7r9MMQNWPfXsYw==" crossorigin="anonymous"></script>
<style>
#container {
width: 450px;
height: 300px;
position: relative;
border: 1px solid black;
margin: auto;
}
</style>
</head>
<body>
<button onClick="startBouncingHoverCircles()">Start</button>
<div id="container"></div>
<script src="../Js/bouncingHoverCircles.js"></script>
</body>
</html>
I am trying to have these balls bounce off the walls and reverse direction when they hit a wall. the first step is setting up an interval for them to continue to animate across the screen. I am trying to accomplish this without the implementation of a canvas. Any help as to why the interval only runs one time would be awesome. Thanks
Your setInterval runs OK.
The problem is that you always put the circles again at the same point. When you do 'translate(' + dX + 'px' + ',' + dY + 'px' + ')' - The dX and dY are not added to the current location of the circle. They are used as the new location (which always stays 10px.)
2 options for solution:
Increase dX and dY every time you call movement().
Probably better solution: When you set the transform property in your element - Sum the current location with the dX and dY. Code to do that:
Add the next variable before you set the transform in the movement function:
const matrix = new WebKitCSSMatrix(circleNodeListIndividual.style.transform);
then use it in setting the transform:
circleNodeListIndividual.style.transform = 'translate(' + (matrix.m41 + dX) + 'px' + ',' + (matrix.m42 + dY) + 'px' + ')'
greeting for the day
my task is:
step1:upload an image.
step2:check the criteria of uploading image with our max dimension(xyx or eg:500X500)
step3:if criteria matches then create a thumbnail of 145X190 dimension
done by me: i am able to upload an image and also done criteria validation.
now i want create thumbnail of that image which is uploading by user.(145X190 dimension
)
my coading is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 600;
var maxw = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" onchange="readImage(this);" />
<br>
<div id="uploadPreview" ></div>
</body>
</html>
problem:Create thumbnail after uploading an image.
I also create the thumbnail coding but not able to combine both code.
my code is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
var thumbWidth = 145, thumbHeight = 190;
function preview(img, selection) {
var scaleX = thumbWidth / (selection.width || 1);
var scaleY = thumbHeight / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * $("#ferret").width()) + 'px',
height: Math.round(scaleY * $("#ferret").height()) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
$(document).ready(function () {
$('<div><img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" style="position: relative;" /><div>')
.css({
float: 'right',
position: 'relative',
overflow: 'hidden',
width: thumbWidth + 'px',
height: thumbHeight + 'px'
})
.insertAfter($('#ferret'));
$('#ferret').imgAreaSelect({aspectRatio: thumbWidth+':'+thumbHeight, onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ferret" ><br>
</body>
</html>
Hope you understand my question...
For the thumbnail , i would advice that you create a div and set its background image instead of using <img> tag as it will cause issues with the scaling and aspect ratio.
You can use the following code to achieve that
$('<div> <div>')
.css({
'width': thumbWidth + 'px',
'height': thumbHeight + 'px',
'background': "url('http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg')",
'background-size': '100% 100%',
'background-repeat': 'no-repeat',
'float': 'right',
'background-origin': 'content-box'
})
.insertAfter($('#ferret'));
You might want to add the vendor prefix like -moz-, -webkit- to the css properties above for supporting old browsers.
You can access the file then pass it to the readImage() function , if it returns false ( you can modify the function to do that) then do not proceed. otherwise process the image and generate a thumbnail for it using the above code
jsfiddle: http://jsfiddle.net/xKTU2/1/
I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg
alert("Height is bigger then our max criteria pls select image max height and width =etc");
I am able to do all functionality but when I am uploading image then i am giving a condition to show the selected image actual Hight an Width.and i am getting previous image height an width
my coading is:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Question/problem: Each time i am getting previous selected image dimension not current image image dimension.
Hope you understand my question
See THIS FIDDLE, the important change is that your logic is wrong- you're checking the height and width against the previously uploaded image (blah), you actually need to execute the upload to check the properties- and then determine what action to take.
Note that the below/linked example takes this answer on SO, edited for your purposes.
HTML
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
JS
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
first of all i have implemented the pinch zoom as well as drag from hammer.js onto my image and it works well. The problem is when i zoom in and drag the image the whole page seems to follow, i already set user-scallable to no and yet the problem still exist, any solution?
<html>
<head>
<meta charset="utf-8">
<title>About</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="style.css">
<script src="craftmap.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="hammer.min.js" type="text/javascript"></script>
<script src="hammer.js" type="text/javascript"></script>
<script src="hammer.fakemultitouch.js" type="text/javascript"></script>
<script src="hammer.showtouches.js" type="text/javascript"></script>
<div class="content">
<div id="pinchzoom">
<img src="images/map.jpg" width="628" height="300" id="rect" alt="Zoo"><div>
the script of it
var hammertime = Hammer(document.getElementById('pinchzoom'), {
transform_always_block: true,
transform_min_scale: 1,
drag_block_horizontal: false,
drag_block_vertical: false,
drag_min_distance: 0
});
var rect = document.getElementById('rect');
var posX=0, posY=0,
scale=1, last_scale,
last_posX=0, last_posY=0,
max_pos_x=0, max_pos_y=0;
hammertime.on('touch drag transform dragend', function(ev) {
switch(ev.type) {
case 'touch':
last_scale = scale;
break;
case 'drag':
if(scale != 1){
posX = saved_posX + ev.gesture.deltaX;
posY = saved_posY + ev.gesture.deltaY;
if(posX > max_pos_x){
posX = max_pos_x;
}
if(posX < -max_pos_x){
posX = -max_pos_x;
}
if(posY > max_pos_y){
posY = max_pos_y;
}
if(posY < -max_pos_y){
posY = -max_pos_y;
}
}else{
posX = 0;
posY = 0;
saved_posX = 0;
saved_posY = 0;
}
break;
case 'transform':
scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
max_pos_x = Math.ceil((scale - 1) * rect.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * rect.clientHeight / 2);
if(posX > max_pos_x){
posX = max_pos_x;
}
if(posX < -max_pos_x){
posX = -max_pos_x;
}
if(posY > max_pos_y){
posY = max_pos_y;
}
if(posY < -max_pos_y){
posY = -max_pos_y;
}
break;
case 'dragend':
last_posX = posX < max_pos_x ? posX: max_pos_x;
last_posY = posY < max_pos_y ? posY: max_pos_y;
break;
}
// transform!
var transform =
"translate3d(0, 0, 0) " +
"scale3d(1, 1, 0) ";
if(scale != 1){
transform =
"translate3d("+posX+"px,"+posY+"px, 0) " +
"scale3d("+scale+","+scale+", 0) ";
}
rect.style.transform = transform;
rect.style.oTransform = transform;
rect.style.msTransform = transform;
rect.style.mozTransform = transform;
rect.style.webkitTransform = transform;
});
Use preventDefault
hammertime.on('touch drag transform dragend', function(ev) {
ev.gesture.preventDefault()