The Forum has been Updated
The code has been upgraded to the latest .NET core version. Please check instructions in the Community Announcements about migrating your account.
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
and the html calls on this save.php 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...
for days i've been trying to figure out how to implement the PHP codes to ASP codes.
in HTML file
Code:
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
Code:
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...
Postet den
what exactly are you trying to achieve?
Postet den
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.... :)
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.... :)
Postet den
try this http://stackoverflow.com/questions/12899590/how-to-save-canvas-image-using-classic-asp
Postet den
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?
Code:
$(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
Code:
<!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
Code:
<%@ 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
Code:
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....
Postet den
i tried this
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?....
Code:
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?....