function doc.save width jspdf - php

In fact we generate from an HTML file administrative documents for each customer.
On the other hand this pdf generated will be saved to a specific folder on the server to be sent to the customer concerned.
Can I serve the backup path by doc.save order?
My code:
function createpdf() {
var canvasToImage = function(canvas){
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.src = dataURL;
return img;
};
var a4 =[595.28,2000];
var canvasShiftImage = function(oldCanvas,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ return oldCanvas; }
var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
var img = canvasToImage(oldCanvas);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
return newCanvas;
};
var canvasToImageSuccess = function(canvas){
var pdf = new jsPDF('p','px','letter'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;
while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png',0, 0, pdfPageWidth, 0, null, 'NONE');
totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor );
if(totalPdfHeight < htmlPageHeight){
pdf.addPage();
}
safetyNet++;
}
pdf.save('<?php echo $mavariable?>.pdf');
};
html2canvas($('main')[0], {
onrendered: function(canvas){
canvasToImageSuccess(canvas);
}
});
}

I guess you want to send the PDF in the mail attachment. For from client side code make a request to server with the generated PDF's (by jsPDF) base64 string format.
var pdfData = pdf.output();
You can post PDF data (base64) to server there again you have convert base64 string to PDF then save it to any temporary path if you want. Thereby you can mail it the PDF.
https://stackoverflow.com/a/35684594/2090459

Related

Saving datauri to png file using PHP - creates empty png file

I have been trying a dozen ways to save a dataurl generated from an svg to my server. This code seems like it should be working based on other threads I've read here but for some reason it just creates a .png file with 0kb. I went ahead and just copy/pasted the dataurl right into my script to avoid any data being sent to php issues right now, I just want to see the php create the image correctly. Here's my code:
$img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAAGQCAYAAACatauzAAAgAElEQVR4Xuy9C5Bd1XkuuPY5p1+ipW61QOiBUSMhB0dcJGI8uTUxVy1V2amZugO4Mjck4IzEVPCYZKYQju+ti2OwYrA9Vbk2eG4lUGqqJBkJhkx5eNzM1MSuWC2TVDnXsvUA2TJCUguQEBJqdevZj3POnv/f56zuv0+fx36svfdaa/+rSjRSr73W2t+/9t7f+p+O4MYIMAKMACPACDACjIAmCDiarIOXwQgwAowAI8AIMAKMgGBiwpuAEWAEGAFGgBFgBLRBgImJNqLghTACjAAjwAgwAowAE5OE98DA9u29or34KAB/YM+DD7+e8PQ8HSPACDACjAAjoDUCTEwSFM/A7m3rcsIZcoXoqU476gjnNVe4rzFJSVAQPBUjwAgwAoyAtggwMUlQNBt2De4Ar55Ndy+8QVwrlcRbV8bciVLJkwH8Z0wId0/Zzb0m8lN7h/74keEEl8ZTMQKMACPACDACWiDAxCRBMUhicv+SFeKunj5v5rcvj4nDl0bFsWuXxYWpSbqaA64jhhzUpjzwpb0JLpOnYgQYAUaAEWAEUkOAiUmC0A+8/Fy/Uy6c6GtrF4+vXDNn5tMT18Sxq5c8snL86uXp37M2JUEh8VSMACPACDACqSKQSWKycfe2V13H6XVdMSRyxZ1Jmk3qaU3q7YBr5RKQlMuNtCngm+IOlYVzwHHcIdaopPoM8eSMACPACDACChHIHDGRWguJIWojysIdGHrwSwei4jrw0gv3Cddd6zhiABxcD+RcID/C3Vwdd9Qtiy+IQnG4mdak0RqkNgXJCv5/jdkHL6uYfoBsuZOFvUMPPTQa9X74ekaAEWAEGAFGIGkEskdMdm/bDJEw29EBdSGYVN44ewowd4fdybY7o37MN+weHILB1lMh4hz4xzPNAHHY88DDG/xqTZptBiQmFZJytfrzWm33A0COXoN7e10F6Up6Y/J8jAAjwAgwAtlEIHPERJKCx/pvE8s6uoCYfCDevHDO0zhAyO6dUbYBmIiedYXz6JruHnEY/ERw/C/fvNob8jvHDgs0z7i54i34d9Sa4O9xHaoaEhX0UcG5UatCmheWXEbT1VT+9agETNV6eRxGgBFgBBgBRqAWgewRk93bTnTkCyuevvWO6Xvfceq49zFHjYY7UfhC2A835CnxtDGfW7TEi7IZh5Dgz/QsEj8fO18hCq7YueeLD29GIYB2BbQZ4t4vf2K1WDWvW/nORBJ0+NLYtDPtOPydNE+bwv4pymHnARkBRoARYAQiIpApYiL9S1YCEXgECIFs+BFHclKNhDkAPhobwpATzOqaay+d7Mg53fPyhdzI7PBfT1siHW037hrcAj4hzyCJ+fz1SyOKsfXlSIzeroYlc8RPa7y4ByPACDACjEA6CGSLmBCNRj0y8MqHJ8W+iyMoiQPgqPrY0J88PBRULOgA6...j/bZbdmX23g8nv8GSJ7ZsQ3ZHlk6Ep0rW9snCcckDs0DcHSQjueyQrtUSk3vxZJoBMTOLckTx2Yghs3P3CWEc+N3/zspUOm3ASgz3URJWTtzMKXs29tifqCgWQhhcxMVEnFFonqgOcZO8Ds7M0Z047hjsOZMR3vQyzWXyfMTFRt994pBQR2LhrcIvriGdwCehohj4maWScTRECI6ZGNfe3jx/21soaLiNE5i2SEpOsfixVSgvxxGehnn9VbTHBWrMOal3w2bG5MTGxWboZu7dqNeStcNteMre7Fy4Wn7t+CZsKNNoHnMNEI2EEWAoN8WZiEgC4kF2pHxYOITWLMlU+RvvcDoneMDkltqVAVJoVFpTm07gOA2iq+gVkysWf6LhbS5zQwffwpVFP+/NpqC3UqggiE5OQG4cv0xcBCCfeDN7wSFBW4AP8+4uWOly+XA950crPd0NJedRscdMfAdsrC+soAUpOHgGTDtbl8aqmV808tWtu5K9VWzcsjO/KP10455EO2iQBQQ0OJkSTfmNIlh4n2ZzpMy+vb5XskomJjjuS1xQZAQwfzrUXt8BT/BgYaxfgw/KHEJqaRXttZDAVDsA5TBSCmeBQVG5cbyoZ4KmTuJwRE3m1wWHrOiggWFs9vVHo/fPvH/VMcdjw+g64fnlHl4OhyfhexFxPzUxD1Cem9s7xOsiy7VVcbopKDZnCAyOQLVhDfZMUE5Nk9hjPkhICXn6TtuKz8ERuwiUgMcFTuu022pTgbjntjlPHvagEbGwSaAmXNh1M+1BoA1yEhSDx2DPykdh3ccSdKpe9D/9NULn9f1p2y7T/HPb5LkS5YYI3jG7DRJKYMkH619X6dEmtRu2ykKBgdWR6rexDn9l6tyMLHOKctWRJ9scaQ/+6Z5FXjVk+/zjn5yBkul52XNP2G2d+jbDRs3wpZosF886zgIHnf4IP4T2Ll7P/ScKbgqqnMbSbCWLCAgg5nWm1S0LepraXoTmk8t6am4yQykbeAPpwYEp8TNwmtSWo6fo5/B2JQSOCgtfjM/kZeD+iqebYtcvi9bMfeBoRJBD43sSGBOTnF897Vdtv7pon/vvrl3uHPlwL1imjrTbzdq0mqDbhHF77/2+0YTJok+Kow2gRAg7L5gQw/v8PaqCA15/YCYqB15+MnqVBi9DGNBN6SNcPoAzH6FZh+oQ5NWwZare9UsPPQ8kM0OLkg8DRlQffv2J1NrbTekENlrvfPhNsqMAMpFZHArRWBTQKA2rUIAPItBIveGHsU+CZL7vfvgBLD4VyYnTEZCjllkHsVtD2YuAiskbY+hNcQ4qD2AtDzmmgAgl0ERwQ/AEO+7KAenCjYGiEAKxhQqtdHUMjFAa/K0EjGaDRhktfP/7/BV33AYqzBGklvMcnwE6rBY3MYBtNocXFjaDGFOh6Cvj0D45FvaMNk8Gf7kZdOBoCoyEwGgKjITAaAqMhMIhCAAC+P4HZvnVG3QAAAABJRU5ErkJggg==";
$filedata = substr($img, strpos($img,",")+1);
file_put_contents("testfile2.png", base64_decode($filedata));
echo "file created";
Here's the jquery code that's generating the data. I just copy it from the alert to test in this script:
$("#testclick").click(function() {
var svg = document.getElementById("map").innerHTML; // or whatever you call it
//alert(svg);
$('#load-target').html(svg);
var canvas = $('#load-target svg')[0];
try {
svgAsDataUri(canvas, null, function(uri) {
var image = new Image();
image.src = uri;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.download = name;
alert(canvas.toDataURL('image/png'));
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
}
//alert(uri);
$.post("http://www.srqnews.com/maps/create.php",
{
type:"PNG",
datauri:uri
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
} catch(err) {
alert(err.message);
}
});

Trying to save canvas data to server [duplicate]

I'm working on a generative art project where I would like to allow users to save the resulting images from an algorithm. The general idea is:
Create an image on an HTML5 Canvas using a generative algorithm
When the image is completed, allow users to save the canvas as an image file to the server
Allow the user to either download the image or add it to a gallery of pieces of produced using the algorithm.
However, I’m stuck on the second step. After some help from Google, I found this blog post, which seemed to be exactly what I wanted:
Which led to the JavaScript code:
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST", "testSave.php", false);
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.setRequestHeader("Content-Type", "application/upload");
ajax.send("imgData=" + canvasData);
}
and corresponding PHP (testSave.php):
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$unencodedData = base64_decode($filteredData);
$fp = fopen('/path/to/file.png', 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
}
?>
But this doesn’t seem to do anything at all.
More Googling turns up this blog post which is based off of the previous tutorial. Not very different, but perhaps worth a try:
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);
file_put_contents($file, base64_decode($uri));
echo $file;
This one creates a file (yay) but it’s corrupted and doesn’t seem to contain anything. It also appears to be empty (file size of 0).
Is there anything really obvious that I’m doing wrong? The path where I’m storing my file is writable, so that isn’t an issue, but nothing seems to be happening and I’m not really sure how to debug this.
Edit
Following Salvidor Dali’s link I changed the AJAX request to be:
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var xmlHttpReq = false;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.send("imgData=" + canvasData);
}
And now the image file is created and isn’t empty! It seems as if the content type matters and that changing it to x-www-form-urlencoded allowed the image data to be sent.
The console returns the (rather large) string of base64 code and the datafile is ~140 kB. However, I still can’t open it and it seems to not be formatted as an image.
Here is an example of how to achieve what you need:
Draw something (taken from canvas tutorial)
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
Convert canvas image to URL format (base64)
// script
var dataURL = canvas.toDataURL();
Send it to your server via Ajax
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
// If you want the file to be visible in the browser
// - please modify the callback in javascript. All you
// need is to return the url to the file, you just saved
// and than put the image in your browser.
});
Save base64 on your server as an image (here is how to do this in PHP, the same ideas is in every language. Server side in PHP can be found here):
I played with this two weeks ago, it's very simple. The only problem is that all the tutorials just talk about saving the image locally. This is how I did it:
1) I set up a form so I can use a POST method.
2) When the user is done drawing, he can click the "Save" button.
3) When the button is clicked I take the image data and put it into a hidden field. After that I submit the form.
document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();
4) When the form is submited I have this small php script:
<?php
$upload_dir = somehow_get_upload_dir(); //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>
I think you should convert the image to base64 and then to Blob and send it to the server. When you use base64 images, a lot of lines will be sent to server. With blob, it's only the file.
You can use this code bellow:
function dataURLtoBlob(dataURL) {
let array, binary, i, len;
binary = atob(dataURL.split(',')[1]);
array = [];
i = 0;
len = binary.length;
while (i < len) {
array.push(binary.charCodeAt(i));
i++;
}
return new Blob([new Uint8Array(array)], {
type: 'image/png'
});
};
And canvas code here:
const canvas = document.getElementById('canvas');
const file = dataURLtoBlob( canvas.toDataURL() );
After that you can use ajax with Form:
const fd = new FormData;
fd.append('image', file);
$.ajax({
type: 'POST',
url: '/url-to-save',
data: fd,
processData: false,
contentType: false
});
The code in CoffeeScript syntax:
dataURLtoBlob = (dataURL) ->
# Decode the dataURL
binary = atob(dataURL.split(',')[1])
# Create 8-bit unsigned array
array = []
i = 0
while i < binary.length
array.push binary.charCodeAt(i)
i++
# Return our Blob object
new Blob([ new Uint8Array(array) ], type: 'image/png')
And canvas code here:
canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())
After that you can use ajax with Form:
fd = new FormData
# Append our Canvas image file to the form data
fd.append 'image', file
$.ajax
type: 'POST'
url: '/url-to-save'
data: fd
processData: false
contentType: false
Send canvas image to PHP:
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
Here's PHP script:
photo_upload.php
<?php
$data = $_POST['photo'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");
file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
die;
?>
I've worked on something similar.
Had to convert canvas Base64-encoded image to Uint8Array Blob.
function b64ToUint8Array(b64Image) {
var img = atob(b64Image.split(',')[1]);
var img_buffer = [];
var i = 0;
while (i < img.length) {
img_buffer.push(img.charCodeAt(i));
i++;
}
return new Uint8Array(img_buffer);
}
var b64Image = canvas.toDataURL('image/jpeg');
var u8Image = b64ToUint8Array(b64Image);
var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);
If you want to save data that is derived from a Javascript canvas.toDataURL() function, you have to convert blanks into plusses. If you do not do that, the decoded data is corrupted:
<?php
$encodedData = str_replace(' ','+',$encodedData);
$decocedData = base64_decode($encodedData);
?>
http://php.net/manual/ro/function.base64-decode.php
In addition to Salvador Dali's answer:
on the server side don't forget that the data comes in base64 string format. It's important because in some programming languages you need to explisitely say that this string should be regarded as bytes not simple Unicode string.
Otherwise decoding won't work: the image will be saved but it will be an unreadable file.
I just made an imageCrop and Upload feature with
https://www.npmjs.com/package/react-image-crop
to get the ImagePreview ( the cropped image rendering in a canvas)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95);
I prefer sending data in blob with content type image/jpeg rather than toDataURL ( a huge base64 string`
My implementation for uploading to Azure Blob using SAS URL
axios.post(azure_sas_url, image_in_blob, {
headers: {
'x-ms-blob-type': 'BlockBlob',
'Content-Type': 'image/jpeg'
}
})

uploading image and php POST method in windows phone

this is my first post. please be kind :)
i'm trying to get picture from media library (in WP 7), upload it using httpwebrequest, and save it to folder in the server. i succeed to convert the image to string of byte (but i suspect there are something wrong here), send the string using POST, and retrieve it in my php web page.
Everything seems to be working well, but when i convert the string of byte to jpeg (using imagecreatefromstring function) it always come up empty picture. here is my code in C# and php. I'm sorry for my English if it's not perfect (or far from perfect) :)
this is my c# code along with some comments
public partial class MainPage : PhoneApplicationPage
{
string uploadUri = #"http://192.168.138.1/meeshot/upload.php"; //php web page for retrieve and saving file in the server
string requestImageName = "picture"; //variable name for post ---- >$_POST['picture']
string postdata; //byte data generate using BitmapToByte function
// Constructor
public MainPage()
{
InitializeComponent();
}
PhotoChooserTask selectphoto = null;
Image image1 = new Image ();
private void button1_Click(object sender, RoutedEventArgs e) //user choosing photo from media library
{
selectphoto = new PhotoChooserTask();
selectphoto.Completed += new EventHandler<PhotoResult>(selectphoto_Completed);
selectphoto.Show();
}
void selectphoto_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BinaryReader reader = new BinaryReader(e.ChosenPhoto);
image1.Source = new BitmapImage(new Uri(e.OriginalFileName));
HttpWebRequest req = HttpWebRequest.Create(
new Uri(this.uploadUri)) as HttpWebRequest;
postdata = BitmapToByte(image1); //convert image to byte. My suspisicion there is something wrong here
req.Method = "POST";
req.ContentType = "application/x-www-form-urlencoded";
req.BeginGetRequestStream(HttpWebRequestButton2_RequestCallback, req);
}
}
private void HttpWebRequestButton2_RequestCallback(IAsyncResult result)
{
var req = result.AsyncState as HttpWebRequest;
using (var requestStream = req.EndGetRequestStream(result))
{
using (StreamWriter writer = new StreamWriter(requestStream))
{
writer.Write(requestImageName+"="+this.postdata); //writing "picture=bytedata"
writer.Flush();
}
}
req.BeginGetResponse(HttpWebRequestButton_Callback, req);
}
private void HttpWebRequestButton_Callback(IAsyncResult result)
{
var req = result.AsyncState as HttpWebRequest;
var resp = req.EndGetResponse(result);
var strm = resp.GetResponseStream();
var reader = new StreamReader(strm);
this.Dispatcher.BeginInvoke(() => {
this.DownloadedText.Text = reader.ReadToEnd(); //the web page will print byte data that has been sent using httpwebrequest. i can see that byte data has benn sent sucessfuly.
this.DownloadedText.Visibility = System.Windows.Visibility.Visible;
});
}
private Stream ImageToStream(Image image1)
{
WriteableBitmap wb = new WriteableBitmap(400, 400);
wb.Render(image1, new TranslateTransform { X = 400, Y = 400 });
wb.Invalidate();
Stream myStream = new MemoryStream();
wb.SaveJpeg(myStream, 400, 400, 0, 70);
return myStream;
}
private string BitmapToByte(Image image) //i suspect there is something wrong here
{
Stream photoStream = ImageToStream(image);
BitmapImage bimg = new BitmapImage();
bimg.SetSource(photoStream); //photoStream is a stream containing data for a photo
byte[] bytearray = null;
using (MemoryStream ms = new MemoryStream())
{
WriteableBitmap wbitmp = new WriteableBitmap(bimg);
wbitmp.SaveJpeg(ms, wbitmp.PixelWidth, wbitmp.PixelHeight, 0, 100);
ms.Seek(0, SeekOrigin.Begin);
bytearray = ms.GetBuffer();
}
string str = Convert.ToBase64String(bytearray);
return str;
}
and this is my code in php web page
if(isset($_REQUEST['picture'])) //check
{
$myFile = "picture.jpg";
$fh = fopen($myFile, 'wb') or die("can't open file");
$stringData = $_REQUEST['picture']."<br>";
$im = imagecreatefromstring($stringData);
if ($im) {
imagejpeg($im);
fwrite($fh, $im);
imagedestroy($im);
}
fclose($fh);
echo $stringData;
}
Please look at my question here: Photo upload with parameters to a PHP page
And my solution here: http://nediml.wordpress.com/2012/05/10/uploading-files-to-remote-server-with-multiple-parameters/

Save image from Flash, send it to PHP and return a URL string to Flash

I use this code to convert an image to a BitmapData and store a JPG in a ByteArray.
import com.adobe.images.JPGEncoder;
var jpgSource:BitmapData = new BitmapData (img_mc.width, img_mc.height);
jpgSource.draw(img_mc);
var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
// here we need some code to send the bytearray but I lack enough knowledge to do it by myself
Now, I want to do the following:
1. send the ByteArray to PHP;
2. PHP must store a physical image_id.jpg on server;
3. then PHP must return the URL of the image to Flash;
Is this possible? How?
The first lines of PHP could be:
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// get bytearray
$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
// but I don't know how to save the image on disk and how to return the URL of the //image
}
Thanks!
the as3 part:
import com.adobe.images.JPGEncoder;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequestHeader;
import flash.net.URLRequest;
var jpgSource:BitmapData = new BitmapData(img_mc.width,img_mc.height);
jpgSource.draw(img_mc);
var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
//set the request's header,method and data
var header:URLRequestHeader = new URLRequestHeader("Content-type","application/octet-stream");
var loader:URLLoader = new URLLoader();
//sends jpg bytes to saveJPG.php script
var myRequest:URLRequest = new URLRequest("saveJPG.php");
myRequest.requestHeaders.push(header);
myRequest.method = URLRequestMethod.POST;
myRequest.data = jpgStream;
loader.load(myRequest);
//fire complete event;
loader.addEventListener(Event.COMPLETE,saved);
function saved(e:Event)
{
//trace the image file name
trace(loader.data);
}
the php (saveJPG.php) part:
if ( isset ( $GLOBALS["HTTP_RAW_POST_DATA"] )) {
//the image file name
$fileName = 'img.jpg';
// get the binary stream
$im = $GLOBALS["HTTP_RAW_POST_DATA"];
//write it
$fp = fopen($fileName, 'wb');
fwrite($fp, $im);
fclose($fp);
//echo the fileName;
echo $fileName;
} else echo 'result=An error occured.';

IE8 and reading XML via AJAX

I have a store locator, built using Google Maps, PHP/Mysql and jQuery here:
http://tinyurl.com/4w8nwwp
Everything is dandy in FF, Safari,Chrome and Opera.
IE7, 8 cannot read the XML that is dynamically generated by parse_location.php
The AJAX code:
function reloadMap(map, dataString) {
markersArray = [];
var infoWindow = new google.maps.InfoWindow({content: "loading...", maxWidth:100});
var storeListHtml = '<h2>Name <span style="margin-left:252px;">Address</span></h2><ul>';
$.ajax({
type: "GET",
url: "parse_location.php",
data: dataString,
success: function(text){
count = -1;
$(text).find("list").each(function()
{
count++;
if(count == 0)
{
var burnsvilleMN = new google.maps.LatLng($(this).attr("lat"),$(this).attr("lng"));
map.panTo(burnsvilleMN);
}
var store = [$(this).attr("name"), $(this).attr("address"), $(this).attr("lat"), $(this).attr("lng"), count];
var name = $(this).attr("name");
var address = $(this).attr("address");
var point = new google.maps.LatLng($(this).attr("lat"),$(this).attr("lng"));
var html = "<span class='info'><b>" + name + "</b> <br/>" + address + "</span>";
var image = new google.maps.MarkerImage('images/icon_dot2.png');
var shadow = new google.maps.MarkerImage('images/icon_dot_shadow.png');
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
shadow:shadow
//shadow: icon.shadow
});
//markersArray.push(marker);
storeListHtml += "<li class='store'><a href='javascript:myclick("+count+")'><div class='store-name'>"+name+"</div><div class='store-add'> "+address+"</div></a></li>";
bindInfoWindow(marker, map, infoWindow, html);
});
storeListHtml += '</ul>';
$("#store-list").html(storeListHtml);
}
});
}
As you can see, this involves calling parse_location.php, getting the XML generated by this code:
// uncommenting the following line causes ff, safari et al to not show anything.
// header('Content-Type: text/xml; charset=UTF-8');
$responce = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
$responce .= "<location>\n";
$city = $_GET['city'];
$category = $_GET['category'];
[SQL Query here ]
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result))
{
$responce .= "<list name=\"".$row["name"]."\"
address=\"".$row["street_address"]." ".$row["city"]." ".$row["state"].", ".$row["zip"]."\"
lat=\"".$row["lat"]."\"
lng=\"".$row["lng"]."\" />";
}
$responce .= "</location>";
$responce8 = utf8_encode($responce);
echo $responce8;
Any pointers???
Rishi
Add a Content-Type header to your php code like this:
header('Content-Type: text/xml'); // Try "application/xml" too
Also, adding another IE-specific header might help:
header('X-Content-Type-Options: nosniff');
You need to do this before outputting anything else of course, since they are headers.

Categories