I'm using the cropit jquery plugin to manage image cropping on my website. The way I have it setup is that cropit will give me a base 64 string that I'll pass to PHP which will decode it and place it in the folder. The issue is that when I decode the string it will only make about 1/10 of the image, the rest will just be white / transparent. My code is as follows:
jQuery:
var username = "<?php echo $userData['username']; ?>";
$('#image-cropper').cropit({
imageState:{
src:'users/'+username+'/profile_picture.jpg'
},
});
$('#image-cropper').cropit('previewSize', {width:500, height:500});
$('.export').click(function() {
var imageData = $('#image-cropper').cropit('export');
//$("#code").val(imageData);
window.open(imageData);
});
PHP:
function decode ($base64) {
list($type, $base64) = explode(';', $base64);
list(, $base64) = explode(',', $base64);
$code = base64_decode($base64);
echo $userData['username'];
file_put_contents('users/' . $userData['username'] . '/profile_picture.png', $base64);
}
The code I have here was working when I had the width/height of $('#image-cropper').cropit('previewSize', {width:500, height:500}); set to 250. I had to change it because without a larger width/height it would save a very low resolution image which is still an issue but not as major. Any help would be great. Thanks!
base64 viewed in browser:
base64 when decoded with PHP:
The data URI scheme that the export function is using as size limitations (depending on the browser).
As the cropit export function allows to tweak the image format and compression factor, you could try to save in jpeg and adjust the quality for best results inside the data URI limits:
// Returns the cropped image in Data URI format.
// The second argument `options` takes the following keys:
// - [type='image/png'] exported image type.
// - [quality=.75] exported image quality, only works when type is
// 'image/jpeg' or 'image/webp'.
// - [originalSize=false] when set to true, export cropped part in
// original size, overriding exportZoom.
// - [fillBg='#fff'] if `type` is 'image/jpeg', this color will be
// filled as the background of the exported image.
$imageCropper.cropit('export', {
type: 'image/jpeg',
quality: .9,
originalSize: true
});
function decode ($base64) {
$explodeBase64 = explode(";base64,", $base64);
$code = base64_decode($explodeBase64[0]);
file_put_contents('users/' . $userData['username'] . '/profile_picture.'.basename(#$explodeBase64[0]), $code);
}
Use the above function to create an image using base64 encoded values, here you need to pass a parameter to function decode('YOUR_IMAGE_ENCODED_STRING')
My output:
Related
I have created a paint app using JavaScript and Flask. When I store the images drawn by the user using the canvas.toDataURL() and then try to display them together in another /finish domain using the PIL, I get a black image as follows:
This is my code for storing the canvas data on the press of the Save button:
function save(){
var filename = document.getElementById("fname").value;
var data = JSON.stringify(canvas_data);
var image = canvas.toDataURL();
var targetX = document.getElementById("targetX").value;
var targetY = document.getElementById("targetY").value;
var sizeX = document.getElementById("sizeX").value;
var sizeY = document.getElementById("sizeY").value;
$.post("/", { save_fname: filename, save_cdata: data, save_image: image, save_targetX: targetX, save_targetY: targetY, save_sizeX: sizeX, save_sizeY: sizeY });
alert(filename + " saved");
document.getElementById("fname").value = ''
reset();
}
And this is the function I use for decoding the encoding:
def stringToRGB(base64_string):
imgdata = base64.b64decode(str(base64_string))
image = Image.open(io.BytesIO(imgdata))
return cv2.cvtColor(np.array(image), cv2.COLOR_BGR2RGB)
This is how I call the function:
img_arrays.append(stringToRGB(base64_string.split(',')[1]))
This is a common error that mainly has the reasons that the user is trying to save them as JPEG images or there's some error with the base54 encoding/decoding but I am not able to find out the exact issue for my code. I used a similar answer (can't find the link) to write the snippets for conversion of the base64 image to a PIL image.
Here's a sample base64 string sample:
svg_arr='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHCCAYAAACwm0waAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3U+odXtZB/DHe6/eTLnXqNRrk5SiJhoakUKCowIdFToooSZZoJAYBA2EdCBNwkhQSJsUUgOFmijUsAItSEsnRaFN0mtZqJji1Wux6mzd7nvO2f/WWvv3fPfnhQvKu/48z+f5nbW/Z71r7/208ocAAQIECBAgQIAAgeEFnjZ8hQokQIAAAQIECBAgQKAEd4uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQIECBAQHC3BggQIECAAAECBAg0EBDcGwxJiQQIECBAgAABAgQEd2uAAAECBAgQIECAQAMBwb3BkJRIgAABAgQI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KCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgADTmLrGAAAJUklEQVQBAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnECgnvcSDVEgAABAgQIECCQKCC4J05VTwQIECBAgAABAnEC/wttGW/hY4MvrAAAAABJRU5ErkJggg=='
I'm posting a blob to php via jquery with the following code.
var blob = dataURLToBlob(dataURL);
var reader = new FileReader();
// this function is triggered once a call to readAsDataURL returns
reader.onload = function(event){
var fd = new FormData();
fd.append('data', event.target.result);
$.post("upload.php",{data: fd},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
};
// trigger the read from the reader...
reader.readAsDataURL(blob);
upload.php
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
echo ($decodedData);
$timestamp = date('YmdHis');
$fileName = ''.$timestamp.'.png';
file_put_contents($fileName, $decodedData);
I'm not getting the data from a database it comes directly from my "signature pad" and then saving the image to folder. When I display my image via window.URL.createObjectURL(blob); the image is correct but the uploaded image only display a quarter to half of the image.
I have noticed that the images are always the same size (2KB) and my php settings for upload files and post size are both on 40MB.
Any thoughts on why my images are always the same size, thus uploading only maybe half the image?
Change your max_input_vars in your php.ini file to a larger number.
I'm trying to save my canvas image (generated by the user in the template) in my database. I've been through a lot of sources here, majority I've combined everything on it and got pretty much confused.
Steps that I'm trying to make:
Html form where provides different choices asked from the user (done)
Each time the user selects his/her choice, beside of it is the canvas that displays the image. (done)
A button that displays the summary of his choices and the canvas image generated through modal (done)
A button to Submit his order with the image in database using php and mysql No error! But it doesn't store my image
I don't need to download it, i just want it to directly store in my database once submitted
So where I'm stuck is in the STEP 4
I'll give a summary choice on my codes: (it works fine in my file, just giving you the outcome idea)
/*This retrieves my data my JS w/c is same file with my HTML: */
$('#review').click(function () {
$('#shape').html($('input[name="shape_design"]:checked').val());
$('#color').html($('input[name="color_design"]:checked').val());
//in this part, i am getting the image displayed in the canvas based on the user's choice
var canvasSource = document.getElementById('myCanvas');
var contextSource = canvasSource.getContext('2d');
var canvasShow = document.getElementById('show_canvas');
var contextShow = canvasShow.getContext('2d');
var image = contextSource.getImageData(0, 0, canvasSource.width, canvasSource.height);
contextShow.putImageData(image, 0, 0); });
});
$(function () { //this function converts the canvas to image, so it is now called as "Show Canvas" , it display well in my modal... not sure if its the right code
$("#submitBtn").bind("click", function () {
var base64 = $('#myCanvas')[0].toDataURL();
$("#show_canvas").attr("src", base64);
$("#show_canvas").show();
});
});
//After reviewing it, this part will perform to store it in the database.. which is quite I'm confused
$('#submitOrder').click(function(confirm){
swal({ //sweetalert style
title: "ORDER SENT", },
function(submit){
setTimeout(function(){
$('#showchoices').submit(); }, 500); //"showchoices" is the name of the Html form, it will proceed to ordersent.php
});
});
For my php which I'm not sure what I'm doing.
Ordersent.php
<? php
$shape_design = $_POST['shape_design'];
$color_design = $_POST['color_design'];
$upload_dir = "upload/"; //what does this do?
$myCanvas = $_POST['myCanvas']; //myCanvas is the name and id in my form
$myCanvas = str_replace('data:image/png;base64,', '', $myCanvas);
$myCanvas = str_replace(' ', '+', $myCanvas);
$data = base64_decode($myCanvas);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
$dbc = #mysql_connect('localhost' , 'root', '');
#mysql_select_db('order_tbl', $dbc);
$query1 = "INSERT INTO choices_tbl VALUES (NULL,'$shape_design','$color_design', '$myCanvas')";
if(#mysql_query($query1,$dbc))
{ Header("Location: /home.php"); }
else { print 'error!! '.mysql_error().''; }
?>
I tried following the instructions most of the tutorial, but it doesn't work on me.
I wanted to save it in my database using PATH , my my data type in my tables are
order_tbl
designID INT(6) NOT NULL ,
shape_design VARCHAR(20) ,
color_design VARCHAR(20) ,
myCanvas VARCHAR(150) ,
am I missing an attribute?
thanks for the help in advance! Thanks for bearing with me.
I want to convert image data that I get from server using Angular.js (for use in ionic-framework), I have use this code :
$http.post(link, {
token: token,
reservationCode: reservationCode
}).success(function (res){
$scope.image = btoa(unescape(encodeURIComponent(res)));
}).error(function (data) {
return false;
});
And use this code in my html :
<img src="data:image/png;base64,{{image}}">
But this error always show :
GET data:image/png;base64,{{image}} net::ERR_INVALID_URL
anybody can help ?
Though a late answer, but will be helpful for future readers:
What you should do is:
<img ng-src="data:image/png;base64,{{image}}">
That would mean that the browser will try to access it only when the data is loaded and will be taken care by AngularJS and hence you will not get that error anymore.
A working approach to base64 encoding of images is to use Canvas and toDataURL() method, but you need to load your image data from server to an Image istance (via src property). Here is an example:
function getBase64() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
// pay attention: image here contains complete base 64 data url, no need for "data:image/png;base64," header...
$scope.image = canvas.toDataURL();
if (!$scope.$$phase) $scope.$apply();
};
img.src = "http://.../myImagepng";
}
Preferably you could encode to base64 your image on the server side and return the response to the client already encoded.
For example in PHP:
$pathToImg = 'myfolder/myimage.png';
$type = pathinfo($pathToImg, PATHINFO_EXTENSION);
$data = file_get_contents($pathToImg);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
I have an HTML5 app that saves the canvas image to the server and then provides a link to that image that opens in a new window.
This works fine the first time I save it, but if I create and save a new image and then click on the link it displays the old image that was previously created.
Clicking on refresh will force it to display the new one, but I was wondering if there is a way to make sure it displays the correct image so that I don't have to refresh the page?
Below is what I am using to save the image.
<script>
function saveImageAs (imgOrURL) {
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
window.win = open (imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 500);
}
</script>
<script type="text/javascript">
//****************************************************************
// Save canvas content into image file. //
//****************************************************************
function saveViaAJAX()
{
document.getElementById('saveimage').style.visibility="hidden";
document.getElementById("debugFilenameConsole").innerHTML="Please wait while your image is been generated";
var testCanvas = document.getElementById('canvas');
var canvasData = testCanvas.toDataURL("image/jpg");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;
//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
ajax.open("POST",'savecanvas.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
//alert(ajax.responseText);
// Write out the filename.
document.getElementById("debugFilenameConsole").innerHTML="Saved as <a target='_blank' href='myimage.php'> MyImage.jpg"+ajax.responseText+"</a><br>Reload this page to start a new image or click on the link above to open the file.";
}
}
ajax.send(postData);
}
</script>
And the PHP
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);
//echo "unencodedData".$unencodedData;
// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( 'MyImage.jpg', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
header("Content-Type: image/jpg");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("content-disposition: attachment; filename=MyImage.jpg");
imagejpeg($img, null, 100);
?>
Because you are giving the image the same name and path, the browser is helpfully caching it for you.
Use a unique path to avoid this!
You can try
var random=new Date();
var random2=getTime();
var rand=random+random2;
imgOrURL = imgOrURL.src+'?rnd='+rand
or for PHP
$rand=rand();
MyImage.php?rand=<?=$rand?>
or
$image='MyImage.php?rand='.$rand.'';
For future use, to save headache. Add dates and times first because using md5 , sha1() or a rand() or JavaScript unique key can be a nightmare, example:
/// This is much cleaner
/11.1.2012/11.05/eachier93.jpg
/11.1.2012/11.05/4358390485/93.jpg
/11.1.2012/11.10/3249203489834/234234.jpg
/// then this
/files/342748234234234/234982348394/333535.jpg
/files/4535345345/234234234234/3332.jpg
/files/23423434324/023840348234/2343.jpg