Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.
Solved
Need help in Posting pasted image to PHP via Javascript
Posted on 2016-09-10
I'm a total Javascript-illiterate, but I need your help in modifying the following code so that it can
I'd much appreciate it if you could help....
- allow users to paste their clipboard image (via Chrome), and
- upload the image along with other user input to my PHP script via POST.
I'd much appreciate it if you could help....
<!DOCTYPE html>
<html>
<head>
<title>Paste-able Canvas</title>
<script type="text/javascript">
function enablePasteForCanvas(canvas) {
var pasteEvent = function(e) {
(function() {
var i;
// Search image data in the clipboard
var items = e.clipboardData.items;
var imageItem = null;
for(i = 0; i < items.length; i++) {
if(items[i].type.indexOf("image/") != -1) {
imageItem = items[i];
break;
}
}
if(! imageItem) {
console.log("clipboard does not contain an image.");
return;
}
//convert: clipboardData.items -> Blob -> Image
var blob = imageItem.getAsFile();
var blobUrl = window.URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
//Draw the image on canvas
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
};
img.src = blobUrl;
}());
e.preventDefault();
};
canvas.addEventListener("focus", function(e){
document.addEventListener("paste", pasteEvent, false);
}, false);
canvas.addEventListener("blur", function(e){
document.removeEventListener("paste", pasteEvent, false);
}, false);
}
window.addEventListener("load",function(e){
enablePasteForCanvas(document.getElementById("my_canvas"));
}, false);
</script>
</head>
<body>
<h2>Paste an image below</h2>(use Cntl + V)
<br><br>Browswer: Chrome only.<br>
<table border=1 width=640><tr><td>
<canvas id="my_canvas" width="640" height="280" tabindex="2"></canvas>
</table>
<br><br>
<form type=POST action=drag.php>
Text: <input type=textbox name=text_1 width=10><br><br>
Color: <input type=radio name=radio_1 value=blue> Blue
<input type=radio name=radio_1 value=red> Red <br><br><br>
<input type=submit name=submit value=submit>
</form>
</body>
</html>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
2
6 Comments
Active today
You need to do to things
1. Add a hidden input to your form to store the data in
2. Either in your paste event handler or onsubmit handler put the contents of the canvas into the control
The following sample adds an onsubmit handler to add the image on submit
HTML
1. Add a hidden input to your form to store the data in
2. Either in your paste event handler or onsubmit handler put the contents of the canvas into the control
The following sample adds an onsubmit handler to add the image on submit
HTML
<h2>Paste an image below</h2>(use Cntl + V)
<br><br>Browswer: Chrome only.<br>
<div style="margin: 0 auto">
<canvas id="my_canvas" width="640" height="280" tabindex="2"></canvas>
</div>
<form method="POST" action="reflect.php" onsubmit="canvastoimage()">
<input type="hidden" id="canvasimg" name="canvasimg" />
<input class="btn btn-default" type="submit" />
</form>
...
function canvastoimage()
{
var canvas = document.getElementById('my_canvas');
document.getElementById('canvasimg').value = canvas.toDataURL();
}
<?php
echo "POST\n";
echo "<pre>" . print_r($_POST, true) . "</pre>";
if (isset($_POST['canvasimg'])) {
$img = $_POST['canvasimg'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('images/canvasimg.png', $data);
if (exif_imagetype('images/canvasimg.png') != IMAGETYPE_PNG) {
unlink('images/canvasimg.png');
}
else {
echo '<img src="images/canvasimg.png" />';
}
}
This is a very cool idea, but I wonder about the efficacy of an application that doesn't work for the majority of browsers. It might be worth triggering some kind of alternate event to prompt / redirect the client to save the clipboard if a non-Chrome browser encounters the application. I don't know how to do that -- just a thought...
https://upload.wikimedia.org/wikipedia/commons/e/e9/Web-browser_usage_on_Wikimedia.png
https://upload.wikimedia.org/wikipedia/commons/e/e9/Web-browser_usage_on_Wikimedia.png
Dear Julian,
I'm blown away by your codes (including the php script) !!
Thank you so much!
...but going hidden inputs would make it a two-step process (requiring two pages)...
I apologize for being greedy while I'm being helped so much, is there any way that we could send the image and the user texts (via <input> tags) at the same time...?
And Ray, thank you for the stats, too! That's a good point, and thank you again, Julian, for adding the filter too!
I'm blown away by your codes (including the php script) !!
Thank you so much!
...but going hidden inputs would make it a two-step process (requiring two pages)...
I apologize for being greedy while I'm being helped so much, is there any way that we could send the image and the user texts (via <input> tags) at the same time...?
And Ray, thank you for the stats, too! That's a good point, and thank you again, Julian, for adding the filter too!
Active today
I don't understand why you need two pages?
Just add the other inputs to the same form.
Just add the other inputs to the same form.
<form method="POST" action="t1569.php" onsubmit="canvastoimage()">
<input type="hidden" id="canvasimg" name="canvasimg" />
Text: <input type=textbox name=text_1 width=10><br><br>
Color: <input type=radio name=radio_1 value=blue> Blue
<input type=radio name=radio_1 value=red> Red <br><br><br>
<input class="btn btn-default" type="submit" />
</form>
Sorry Julian,
I must have misunderstood what you meant.
Wow....
Thank you so much for your quick help.
You have no idea how thankful I am to you after having pulled out my hair over this for a week and almost gave up.
Thank you SO MUCH, Julian!
Elpmet
I must have misunderstood what you meant.
Wow....
Thank you so much for your quick help.
You have no idea how thankful I am to you after having pulled out my hair over this for a week and almost gave up.
Thank you SO MUCH, Julian!
Elpmet
Featured Post
Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Introduction
This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html). It addresses one of the most common problems that plague beginning PHP develop…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month11 days, 17 hours left to enroll
730 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.