My code crops a photo. The cropped photo is constantly replaced but the browser only ever loads the first crop. I have scoured the web but nothing has worked. I have added random strings to the php - new.jpg?time=t - but this prevents the cropped image from saving. I have included
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
</head>
but the browser still loads from the cache. The HTML JavaScript and PHP follow. Any other suggestions?
<html>
<head>
<title>Image Crop</title>
<style>
body{
margin: 0;
padding: 0;
}
#container{
width: 300px;
}
#box{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background: white;
border: 2px solid blue;
opacity: 0.5;
}
#crop_button{
background: #333;
color: #fff;
padding: 5px;
border: 0px;
margin: 5px;
}
#output{
position: absolute;
top: 0px;
left: 300px;
}
</style>
</head>
<body>
<div id="container">
<img src="resized_IMG0934.jpg"/>
<div id="box"></div>
</div>
<div id="output"><image />
</div>
<button id="crop_button">Crop</button>
<link rel="stylesheet" href="//code.jquery/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery/jquery-1.10.2.js"></script>
<script src="//code.jquery/ui/1.10.4/jquery-ui.js"></script>
<script src="index.js"></script>
</body>
</html>
$(function() {
$('#box').draggable({containment: '#container'});
$('#box').resizable({containment: '#container'});
$('#crop_button').click(function(){
var top = $('#box').position().top;
var left = $('#box').position().left;
var width = $('#box').width();
var height = $('#box').height();
$.post('crop.php', {top:top, left:left, width:width, height:height}, function(){
$('#output').html('<img src="new.jpg"/>');
});
});
});
<?php
$dst_x = 0;
$dst_y = 0;
$src_x = $_POST['left']; //crop Start x
$src_y = $_POST['top']; //crop Start y
$dst_w = $_POST['width']; //Thumb width
$dst_h = $_POST['height']; //Thumb height
$src_w = $_POST['width']; //$src_w + $dst_w
$src_h = $_POST['height']; //$src_h + $dst_h
$dst_image = imagecreatetruecolor($dst_w,$dst_h);
$src_image = imagecreatefromjpeg("resized_IMG0934.jpg");
imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
imagejpeg($dst_image, "new.jpg");
My code crops a photo. The cropped photo is constantly replaced but the browser only ever loads the first crop. I have scoured the web but nothing has worked. I have added random strings to the php - new.jpg?time=t - but this prevents the cropped image from saving. I have included
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
</head>
but the browser still loads from the cache. The HTML JavaScript and PHP follow. Any other suggestions?
<html>
<head>
<title>Image Crop</title>
<style>
body{
margin: 0;
padding: 0;
}
#container{
width: 300px;
}
#box{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background: white;
border: 2px solid blue;
opacity: 0.5;
}
#crop_button{
background: #333;
color: #fff;
padding: 5px;
border: 0px;
margin: 5px;
}
#output{
position: absolute;
top: 0px;
left: 300px;
}
</style>
</head>
<body>
<div id="container">
<img src="resized_IMG0934.jpg"/>
<div id="box"></div>
</div>
<div id="output"><image />
</div>
<button id="crop_button">Crop</button>
<link rel="stylesheet" href="//code.jquery./ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.10.2.js"></script>
<script src="//code.jquery./ui/1.10.4/jquery-ui.js"></script>
<script src="index.js"></script>
</body>
</html>
$(function() {
$('#box').draggable({containment: '#container'});
$('#box').resizable({containment: '#container'});
$('#crop_button').click(function(){
var top = $('#box').position().top;
var left = $('#box').position().left;
var width = $('#box').width();
var height = $('#box').height();
$.post('crop.php', {top:top, left:left, width:width, height:height}, function(){
$('#output').html('<img src="new.jpg"/>');
});
});
});
<?php
$dst_x = 0;
$dst_y = 0;
$src_x = $_POST['left']; //crop Start x
$src_y = $_POST['top']; //crop Start y
$dst_w = $_POST['width']; //Thumb width
$dst_h = $_POST['height']; //Thumb height
$src_w = $_POST['width']; //$src_w + $dst_w
$src_h = $_POST['height']; //$src_h + $dst_h
$dst_image = imagecreatetruecolor($dst_w,$dst_h);
$src_image = imagecreatefromjpeg("resized_IMG0934.jpg");
imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
imagejpeg($dst_image, "new.jpg");
- you could use alwasy a different name instead of new.jpg and replace the src attribute – Sven Delueg Commented May 19, 2014 at 9:20
- So you're saying create pletely different names? But doesn't that mean I will have to keep unlinking/deleting the last crop in order to stop my images folder filling up with old crops? – user2790911 Commented May 19, 2014 at 9:28
3 Answers
Reset to default 2You have the following choices: - add the following meta tag, this will force not to cache
<meta http-equiv="pragma" content="no-cache" /> which you have already as I see
- moreover, if you want to load new version of the css file, do the following
< link rel="stylesheet" type="text/css" href="mystyle.css?version={NewVersionOnRequierd}">
- same for the image
< img src="picture.jpg?123" alt="">
Okay, I eventually solved the problem by appending a random string to the image element source, as I have tried many times. There appeared to be something wrong with my Firefox installation. Difficult to draw any conclusions. Thanks for the contributions.
Create a hidden iframe and set its src as the image url as follows:
function refresh(url){
var iframe = document.createElement('iframe')
iframe.src = url
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745274997a4619984.html
评论列表（0条）