Hello,
While trying to use php to insert a .png-image into an HTML page, the image gets corrupted and several lines of nonsense characters are displayed. This issue has been discussed before here, but not enough to help me.
In general terms, I make use of an HTML form. The user fills in two fields, the x and the y field. Another field displays the angle that those two coordinates would form. And php displays and existing .png file and adds an arrow to it to graphically demonstrate the same angle.
No generic php works, no doubt because of headers being sent twice. Using a separate file for the php does not seem to be an option, because the php has to pick up info from the form to correctly manipulate the image.
The HTML, partly translated, is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Determining heart axis</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="en" />
<link rel="stylesheet" type="text/css" href="hartas.css" title="default" />
<script src="hartas.js" type="text/javascript"></script>
</head>
<body text="#000000" bgcolor="#ffffff" link="#0000ff"
alink="#0000ff" vlink="#0000ff">
<div id="innerbody">
<h1 id="kop">Hartas</h1>
<h2 id="tekst" class="left">Determining heart axis</h2>
<h3>Input: Leads I and II</h3>
<p>Netto value of QRS in mm.</p>
<p>Positive mm minus negative mm.</p>
<p>Negative values begin with a "-"</p>
<form id="beter2coords" name="beter2coords" action="">
<fieldset>
<legend>I and II in decimal form in, eg "5.5".</legend>
<label for="enter_beterX">Net millimeters Lead I</label>
<input type="text" id="enter_beterX" name="enter_beterX" /><br />
<label for="enter_beterL">Net millimeters Lead II</label>
<input type="text" id="enter_beterL" name="enter_beterL" />
<input type="button" name="beterCoords" id="beterCoords" value="enter"
action="hartas.js" return="false" onclick="beter_value()" />
</fieldset>
</form>
<h3>Input: Leads I and aVF</h3>
<p>Net value QRS in mm.</p>
<p>Positive mm minus negative mm.</p>
<p>Negative values begin with a "-"</p>
<form id="enter2coords" name="enter2coords" action="">
<fieldset>
<legend>Enter values leads I en aVF in decimal form, eg "5.5".</legend>
<label for="enter_X">Net millimeters Lead I</label>
<input type="text" id="enter_X" name="enter_X" /><br />
<label for="enter_Y">Net millimeters Lead aVF</label>
<input type="text" id="enter_Y" name="enter_Y" />
<input type="button" name="enterCoords" id="enterCoords" value="enter"
action="hartas.js" return="false" onclick="determine_value()" />
</fieldset>
</form>
<h3>Results</h3>
<form id="result" name="result" action="">
<fieldset>
<legend>The angle in degrees.</legend>
<label for="hoek">The angle: </label>
<input type="text" id="hoek" name="hoek" value="" />
</fieldset>
</form>
<form id="as" name="as" action="">
<fieldset>
<legend>The heart axis.</legend>
<label for="hartas">Quadrant:</label>
<input type="text" id="hartas" name="hartas" value="" />
</fieldset>
</form>
<img id="axispix" src="axis1.png" alt="Heart axis" width="300px" height="300px" />
</div>
</body>
</html>
It's the
<img id="axispix" src="axis1.png" alt="Heart axis" width="300px" height="300px" />
that I want to replace with an image picked up by php.
Any ideas how to do this correctly? Even generic code such as:
<?php
function LoadPNG($imgname)
{
$im = @imagecreatefrompng($imgname); /* Attempt to open */
if (!$im) { /* See if it failed */
$im = imagecreatetruecolor(150, 30); /* Create a blank image */
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an errmsg */
imagestring($im, 1, 5, 5, "Error loading $imgname", $tc);
}
return $im;
}
header("Content-Type: image/png");
$img = LoadPNG("bogus.image");
imagepng($img);
?>
isn't working. And if you can help me further and tell me how to paste the red arrow on the image after filling in the form, I'd appreciate that even more. At the moment I'm using JavaScript:
function determine_value(){
var coords = document.forms["enter2coords"];
var X = document.forms["enter2coords"]["enter_X"].value;
var Y = document.forms["enter2coords"]["enter_Y"].value;
var Angle_degrees = Math.atan2(Y, X) / ((2 * Math.PI) / 360);
document.forms["result"]["hoek"].value = Angle_degrees.toFixed(2);
document.forms["beter2coords"]["enter_beterX"].value = "";
document.forms["beter2coords"]["enter_beterL"].value = "";
document.forms["as"]["hartas"].value = "";
if ((Angle_degrees >= -30) && (Angle_degrees <= 120) ){
document.forms["as"]["hartas"].value = "normaal";
}
else if ((Angle_degrees > 120) && (Angle_degrees <= 180) ){
document.forms["as"]["hartas"].value = "rechts";
}
else if ((Angle_degrees < -30) && (Angle_degrees > -90) ){
document.forms["as"]["hartas"].value = "links";
}
else if ((Angle_degrees < -90) && (Angle_degrees >= -180) ){
document.forms["as"]["hartas"].value = "extreem rechts";
}
else {
document.forms["as"]["hartas"].value = "onbepaald";
}
}
function beter_value(){
var betercoords = document.forms["beter2coords"];
var beterX = document.forms["beter2coords"]["enter_beterX"].value;
var beterL = document.forms["beter2coords"]["enter_beterL"].value;
var beterY = (beterX - (2 * beterL)) / (-1 * (Math.tan(Math.PI / 3)))
var Angle_degrees2 = Math.atan2(beterY, beterX) / ((2 * Math.PI) / 360);
document.forms["result"]["hoek"].value = Angle_degrees2.toFixed(2);
document.forms["enter2coords"]["enter_X"].value = "";
document.forms["enter2coords"]["enter_Y"].value = "";
document.forms["as"]["hartas"].value = "";
if ((Angle_degrees2 >= -30) && (Angle_degrees2 <= 120) ){
document.forms["as"]["hartas"].value = "normaal";
}
else if ((Angle_degrees2 > 120) && (Angle_degrees2 <= 180) ){
document.forms["as"]["hartas"].value = "rechts";
}
else if ((Angle_degrees2 < -30) && (Angle_degrees2 > -90) ){
document.forms["as"]["hartas"].value = "links";
}
else if ((Angle_degrees2 < -90) && (Angle_degrees2 >= -180) ){
document.forms["as"]["hartas"].value = "extreem rechts";
}
else {
document.forms["as"]["hartas"].value = "onbepaald";
}
}
function roundTo(base, precision)
{
var m = Math.pow(10, precision);
var a = Math.round(base * m) / m;
return a;
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
But if I ever get the php graphic working, even minimally, it will probably make more sense to do the math using php, too
You can look at it for yourself at:
http:www.hymenoptera.nl/hartfunctie/hartas.html
The language is Dutch.
Thank you,
Roy G Biv
