Question

请参阅下面的问题解答

我希望你能提供帮助。

我一直在处理一个HTML表单，它作为一个图像，在上传时通过预定义的参数自动重新调整大小。我已经列出了此表单中的示例代码。我不认为我遇到的问题是下面发布的HTML代码，因为在HTML页面上一切都按预期工作，只有当PHP被调用时，事情才会进行计划。

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>

直接在HTML代码下面的脚本：

(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")
));

实际的Javascript代码：

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"))
);

我对上面的脚本感到满意，他们可以做一点精简，但目前性能不是关键，只有功能。现在它可能看起来很愚蠢，但我不知道从哪里开始用PHP来发布这个帖子，我确实有一个PHP文件，用于从HTML打印字段，作为一个例子，我有以下代码用于其他一些字段中存在的字段：

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);

您是否可以告诉我将上述HTML代码发布到PHP的最佳方法？我以前的尝试只留下了一个空白区域，好像首先没有代码。在过去的几天里，我对此进行了一些广泛的研究，但是我无法理解它！

非常感谢提前。

Answer 1

我正在使用一个名为DOMPDF的库，它在处理时优化网页。

我创建了一个Codepen来突出显示我的代码，但您也可以在下面的纯文本中看到代码：

 <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">

上面的HTML文字，如果在移动设备上打开相机，会拍照，然后将图片嵌入上传按钮上方。

PHP代码在后台，然后拉出图像并将其放入PDF DOMPDF创建：

<?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.";
}
}
?>

此代码的目的是在HTML表单中使用，以便打印到PDF，但是，它可以适用于其他目的。

我可以在此处找到我的Codepen：https://codepen.io/russell664/pen/pyzByq

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

1 个答案: