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);
}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.';
Originally posted by HuwR
try this http://stackoverflow.com/questions/12899590/how-to-save-canvas-image-using-classic-asp
$(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);
});
}
});<!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><%@ 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
%>
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);
}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);
});
}<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>
<%@ 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
%>
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