| Author |
 Topic  |
|
|
phoenixtaz13
Junior Member
129 Posts |
 Posted - 09 June 2015 : 00:02:00
|
Hi guys... good day to you all...
for days i've been trying to figure out how to implement the PHP codes to ASP codes.
in HTML file
function saveImage(){
var data = myCanvas.toDataURL();
var request = new XMLHttpRequest();
request.open('POST', 'save.php', true);
request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
request.send('img='+data);
}
and the html calls on this save.php file
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
is it possible for the save.php file implemented in ASP codes? if yes, what should i be looking into to make it work? can you guys show me some examples to implement it....
thanks... |
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 09 June 2015 : 12:43:44
|
Hi!... Good day to you.... :)
i want the image drawn in <canvas id="myCanvas"></canvas> to be saved in my server directly.... the php code i found is exactly what im looking for but its in php... :( is it possible to implement this in ASP?...
thanks.... :)
|
 |
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 09 June 2015 : 15:00:16
|
quote:
Originally posted by HuwR
try this http://stackoverflow.com/questions/12899590/how-to-save-canvas-image-using-classic-asp
Hi... thanks for the link...
where do i put this code in my html file?
$(document).ready(function(){
getBase64FromImageUrl('myCanvas');
function getBase64FromImageUrl(URL) {
var img = new Image();
img.src = URL;
img.onload = function () {
var canvas = document.createElement("myCanvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
//alert( dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
saveImageData(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
}
}
function saveImageData (image_data) {
$.post("saveImage.asp",
{imageData:image_data,submit:true})
.done(function(data, textStatus, jqXHR)
{
alert(data);
}).fail(function(jqXHR, textStatus, errorThrown)
{
alert(textStatus);
});
}
});
heres my html looks like
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<style type="text/css">
#save{
float:right;
margin-right:20px;
height: 30px;
padding: 8px;
background-color: #999;
}
#save;hover{
background-color:#0FF;
}
</style>
</head>
<body onLoad="InitThis();">
<Table width="100%">
<tr>
<td align="center">
<Table border="1">
<tr>
<td width="50px">
Line width : <select id="selWidth">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9" selected="selected">9</option>
<option value="11">11</option>
</select>
</td>
<td width="100px" height="140px" >
<canvas id="myCanvas" name="myCanvas" width="100" height="140" style="border:2px solid black"></canvas>
</td>
<td width="50px">
Color : <select id="selColor">
<option value="black">black</option>
<option value="blue" selected="selected">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
</td>
</tr>
</Table>
<button onClick="javascript:clearArea();return false;">Clear Area</button>
<button onClick="javascript:saveImage();return false;">Save Image1</button>
<script type="text/javascript" src="canvas.js"></script>
</td>
</tr>
</Table>
</body>
</html>
and saveImage.asp file
<%@ Language=VBScript %>
<% Option Explicit %>
<%
'### Source http://stackoverflow.com/questions/12899590/how-to-save-canvas-image-using-classic-asp
response.write(request("imageData"))
Function Base64Data2Stream(sData)
Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
Base64Data2Stream.Type = 1 'adTypeBinary
Base64Data2Stream.Open
With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
.dataType = "bin.base64"
.text = sData
Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
Base64Data2Stream.Position = 0
End With
End Function
Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))
'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read
'Write binary to File
CanvasStream.SaveToFile Server.Mappath("images/" & request("imageName")), 2 'adSaveCreateOverWrite
%>
and last canvas.js file
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('myCanvas').getContext("2d");
//ctx.src = 'cat_b.jpg';
//ctx.drawImage(ctx, 0, 0);
var image = new Image();
image.src = 'template/Tooth18.jpg';
$(image).load(function () {
ctx.drawImage(image, 0, 0);
});
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
thanks.... |
|
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 10 June 2015 : 12:11:29
|
i tried this
function btnSaveImage() {
var dataURL = myCanvas.toDataURL("image/png");
dataURL = dataURL.replace('data:image/png;base64,', '');
var areturn = $.ajax({
url: "saveImage.asp",
type: "POST",
data: '{ "imageData" : "' + dataURL + '" }',
dataType: "json",
beforeSend: function(x) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
}).done(function(result) {
console.log("Success Done!\n" + result);
}).always(function(data) {
console.log("Always:\n" + data.responseText);
});
}
i tried other <scripts> i found in google and i still keep getting htt/1.1 500 internal server error with saveImage.asp but if i use the PHP its working, no 500 error....
any ideas?.... |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 10 June 2015 : 13:15:00
|
im not familiar with PHP and i want to try it with my snitz forum.....
any ideas why asp codes is giving 500 error? you have asp example codes might work?... im thinking maybe the script is not passing the value to saveImage.asp coz alert('triggered the file') is not executing in saveImage.asp....
thanks....... |
|
|
|
phoenixtaz13
Junior Member
129 Posts |
|
|
Webbo
Average Member
United Kingdom
982 Posts |
Posted - 11 June 2015 : 02:25:42
|
Can you not put the php code into it's own php file and then add it to your forum code using an include ?
ie
%><!--#include file="myfile.php"--><% |
|
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 11 June 2015 : 04:55:21
|
Webbo,
actually i already did try what u suggested.... and from googling, it has something to do with cross-something(cant remember the exact term) and its something to do with IIS security features, thats why its giving a general 500 internal server error..... i tried all example scripts i could find in google, as long as i use ASP for decoding base64 and saving file in server it will give 500 error... as for PHP, even the simpliest code for decoding and saving files in server works.... but if u have ASP code samples i can try im willing to give it a shot, i still prefer using ASP... :) |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
|
|
phoenixtaz13
Junior Member
129 Posts |
Posted - 11 June 2015 : 17:04:45
|
Hi Huwr.. :) tried crossDomain: 'true',
in default.asp file
<head>
<title>HTML5 Canvas JavaScript Ajax Cross Domain</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript">
function btnSaveImage() {
// generate the image data
var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
crossDomain: 'true',
url: 'crossdomain.asp',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}
</script>
</head>
in crossdomain.asp file
<%@ Language=VBScript %>
<%
Dim strImageURL
Dim strImageURL
strImageURL = request("imageData")
'response.write(request("imageData"))
response.write(strImageURL)
response.write "<script>window.open('"& strImageURL &"', '_blank', 'location=0, menubar=0');</script>"
response.write (<script>alert('triggered')</script>)
' Function Base64Data2Stream(sData)
' Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
' Base64Data2Stream.Type = 1 'adTypeBinary
' Base64Data2Stream.Open
' With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
' .dataType = "bin.base64"
' .text = sData
' Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
' Base64Data2Stream.Position = 0
' End With
' End Function
'
' Dim CanvasStream
' Set CanvasStream = Base64Data2Stream(strImageURL)
' Write binary to Response Stream
' Response.BinaryWrite CanvasStream.Read
' Write binary to File
' CanvasStream.SaveToFile Server.Mappath("images/" & "picSave".png), 2 'adSaveCreateOverWrite
%>
i'm using google chrome, even in simple code window.open or alert to display the data wont work either... :(
the error im getting in google chrome:
POST http://aspwebtest/crossdomain/crossdomain.asp 500 (Internal Server Error) jquery.min.js:4
f.support.ajax.f.ajaxTransport.send @ jquery.min.js:4
f.extend.ajax @ jquery.min.js:4
btnSaveImage @ (index):18
onclick @ (index):91
all files are in http://aspwebtest/crossdomain/
What am i missing?... did i do it right?.... help... help... help pls....
|
|
|
| |
Topic |
|
PHP to ASP help
