HTML - 使用Javascript / canvas和HTML将上传的图像拉入PHP

Please see below for the answer to my own question

I hope you can help.

I have been working on a HTML form which as an image, which is automatically re-sized when uploaded, by pre-defined parameters. I have listed the example code I have within this form at the moment. I don't think that the problem I am having is with the HTML code posted below, as on the HTML page everything works as expected, it is only when the PHP is invoked things don't go to plan.

HTML code:

  <input id="width" type="hidden" value="320" />
  <input id="height" type="hidden" />
  <input id="file" type="file" capture="camera"/>
  <br /><span id="message"></span><br />
  <div id="img"></div>

Script directly beneath HTML code:

(function (global, $width, $height, $file, $message, $img) {
// simple FileReader detection
if (!global.FileReader)
return $message.innerHTML = "FileReader API not supported"
;

// async callback, received the base 64 encoded resampled image
function resampled(data) {
$message.innerHTML = "Image Preview:";
($img.lastChild || $img.appendChild(new Image)
).src = data;
}

// async callback, fired when the image file has been loaded
function load(e) {
$message.innerHTML = "resampling ...";
//resample.js
Resample(
this.result,
this._width || null,
this._height || null,
resampled
);

}

// async callback, fired if the operation is aborted
function abort(e) {
$message.innerHTML = "operation aborted";
}

// async callback, fired if an error occur (i.e. security)
function error(e) {
$message.innerHTML = "Error: " + (this.result || e);
}

// listener for the input@file onchange
$file.addEventListener("change", function change() {
var
width = parseInt($width.value, 10),
height = parseInt($height.value, 10),
file
;
// no width and height specified
if (!width && !height) {
// reset the input simply swapping it
$file.parentNode.replaceChild(
file = $file.cloneNode(false),
$file
);
// remove the listener to avoid leaks, if any
$file.removeEventListener("change", change, false);
// reassign the $file DOM pointer with the new input text and add the change    listener
($file = file).addEventListener("change", change, false);
// notify user there was something wrong
$message.innerHTML = "please specify width or height";
} else if(
// there is a files property and this has a length greater than 0
($file.files || []).length &&
/^image\//.test((file = $file.files[0]).type)
) {
// reading action notification
$message.innerHTML = "reading ...";
// create a new object
file = new FileReader;
// assign directly events as example, Chrome does not inherit EventTarget   yet so addEventListener won't work as expected
file.onload = load;
file.onabort = abort;
file.onerror = error;
// cheap and easy place to store desired width and/or height
file._width = width;
file._height = height;
// time to read as base 64 encoded data te selected image
file.readAsDataURL($file.files[0]);
// it will notify onload when finished
} else if (file) {
// if file variable has been created during precedent checks, there is a file but the type is not the expected one wrong file type notification
$message.innerHTML = "please chose an image";} else {
// No File Attached!
$message.innerHTML = "No File Attached!";
}
}, false);
}(
// the global object
this,
// all required fields ...
document.getElementById("width"),
document.getElementById("height"),
document.getElementById("file"),
document.getElementById("message"),
document.getElementById("img")
));

Actual Javascript code:

var Resample = (function (canvas) {

// Resample function, accepts an image
// as url, base64 string, or Image/HTMLImgElement
// optional width or height, and a callback
// to invoke on operation complete
function Resample(img, width, height, onresample) {
var
// check the image type
load = typeof img == "string",
// Image pointer
i = load || img
;
// if string, a new Image is needed
if (load) {
i = new Image;
// with propers callbacks
i.onload = onload;
i.onerror = onerror;
}
// easy/cheap way to store info
i._onresample = onresample;
i._width = width;
i._height = height;
// if string, we trust the onload event
// otherwise we call onload directly
// with the image as callback context
load ? (i.src = img) : onload.call(img);
}

// just in case something goes wrong
function onerror() {
throw ("not found: " + this.src);
}

// called when the Image is ready
function onload() {
var
// minifier friendly
img = this,
// the desired width, if any
width = img._width,
// the desired height, if any
height = img._height,
// the callback
onresample = img._onresample
;
// if width and height are both specified
// the resample uses these pixels
// if width is specified but not the height
// the resample respects proportions
// accordingly with orginal size
// same is if there is a height, but no width
width == null && (width = round(img.width * height / img.height));
height == null && (height = round(img.height * width / img.width));
// remove (hopefully) stored info
delete img._onresample;
delete img._width;
delete img._height;
// when we reassign a canvas size
// this clears automatically
// the size should be exactly the same
// of the final image
// so that toDataURL ctx method
// will return the whole canvas as png
// without empty spaces or lines
canvas.width = width;
canvas.height = height;
// drawImage has different overloads
// in this case we need the following one ...
context.drawImage(
// original image
img,
// starting x point
0,
// starting y point
0,
// image width
img.width,
// image height
img.height,
// destination x point
0,
// destination y point
0,
// destination width
width,
// destination height
height
);
// retrieve the canvas content as
// base4 encoded PNG image
// and pass the result to the callback
onresample(canvas.toDataURL("image/png"));
}
var
// point one, use every time ...
context = canvas.getContext("2d"),
// local scope shortcut
round = Math.round
;

return Resample;

}(
// lucky us we don't even need to append
// and render anything on the screen
// let's keep this DOM node in RAM
// for all resizes we want
this.document.createElement("canvas"))
);

I'm happy with the above scripts, they could do with being slimmed down a little, but performance isn't key at the moment, only functionality. Now it may seem daft, but I do not know where to even begin with PHP to get this posting, I do have a PHP file, which is used to print fields from the HTML, as an example I have the following code for some other fields present in the form:

if($_SERVER['REQUEST_METHOD']=='POST') {
$address = test_input($_POST['address1']);
$address2 = test_input($_POST['address2']);
$address3 = test_input($_POST['address3']);
$cover = test_input($_POST['coverphoto']);
$consultantName = test_input($_POST['consultantName']);
$reportDate = test_input($_POST['reportDate']);
$reportDate = date_create($reportDate);

Would you be able to let me know the best way to get the above HTML code to post the image through to PHP? My previous attempts have left with just a blank space, as if no code was there in the first place. I have done some extensive research around this in the past couple of day, but just can't get my head around it!

Many thanks in advance.

dpjpo746884
dpjpo746884 所以,我假设Canvas是$_FILES参数。你有任何PHP与FilereaderAPI交互的例子吗?
4 年多之前 回复
donglian5309
donglian5309 尝试从PHP站点阅读有关文件上载处理的信息:php.net/manual/en/features.file-upload.php
4 年多之前 回复

1个回答

I am using a library called DOMPDF, which optimises the webpage upon processing.

I have created a Codepen to highlight my code, but you can also see the code in plain text below:

 <img id="cover-photo" src="#" alt="Cover Photo preview" height="300">
  <input id="cam-cover" type="file" capture="camera" accept="image/*"id="cameraInput" name="coverphoto">

The HTML text above, if on a mobile device opens the camera, takes a picture and then embeds the picture above the upload button.

The PHP code in the background, then pulls the image and places it into the PDF DOMPDF creates:

<?php>
$target_dir = "photos/";
$target_file = $target_dir . basename($_FILES["coverphoto"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["coverphoto"]["tmp_name"]);
if($check !== false) {
    $msg = "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    $msg = "File is not an image.";
    $uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
$msg = "Sorry, file already exists.";
$uploadOk = 0;
}
// Allow certain file formats
//if($imageFileType != 'jpg' && $imageFileType != 'jpeg' ) {
//echo "Sorry, only JPG, JPEG files are allowed.";
// $uploadOk = 0;
//}
// Check file size
if ($_FILES["coverphoto"]["size"] > 5242880) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
$msg = "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["coverphoto"]["tmp_name"], $target_file)) {
    $msg = "The file ". basename( $_FILES["coverphoto"]["name"]). " has been   uploaded.";
}
}
?>

The purpose of this code is to be used within a HTML form, for printing to a PDF, however, it can be adapted to other purposes.

My Codepen can be found here: https://codepen.io/russell664/pen/pyzByq

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问