Frage Canvas Drawing App

muecke · 5 Juli 2015

Hallo miteinander,

ich bin mir nicht sicher wo das Thema rein gehört glaube aber das das zu JavaScript gehört daher versuche ich es hier.

Ich möchte die Möglichkeit einer Unterschrift Abgabe auf meiner Webseite anbieten (soll später auf mobilen Geräten laufen)

Jetzt hab ich das hier empfohlen bekommen: http://htmlpreview.github.io/?https...nvas-drawing-app/master/index_javascript.html

Das ist mal der Hammer. also habe ich mich schlau gemacht das geht scheinbar über das so genannte "Canvas Drawing App" wobei hier über ein JavaScript noch was gemacht wird.

Ich habe mich dies bezüglich versucht schlau zu machen Hier:

Leider ist mein Englisch genauso gut wie mein JavaScript Verständnis.
Ich müsste es eigentlich verstanden haben ist nicht all so viel, habe auch alles schön mitgeschrieben, jedoch geht das bei mir mal so überhaupt nicht :-( und ich finde den / die Fehler nicht.

Vielleicht kann mag jemand von euch mir dabei etwas weiter helfen? oder hat mir eine Deutsche Erklärungsseite dazu, ich habe keine gefunden :-(

das ist der Code den ich mit geschrieben haben:

index.html

HTML:

<!doctype html>
<html>
  <head>
  <title>Unterschrift</title>
  </head>

<body style = 'margin: 10px'>
   <canvas id='canvas'>
     Sorry, .... danke.
   </canvas>
   <script src='mein.js'></script>
</body>
</html>

mein.js

Javascript:

var canvas  = document.getElementByID('canvas');
var context = canvas.getContext('2d');

var radius = 10;

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

ver putPoint = function(e){
   context.beginPath();
   context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
   context.fill();
}

canvas.addEventListener('mousedown', putPoint);

ich bin für jede Hilfe dankbar.
Gruß Mücke

muecke · 6 Juli 2015

ich habe jetzt das Beispiel das mir gezeigt wurde zerlegt bekommen :-)

und habe das in meine Mobile Seite mit eingebaut. und es geht auch :-)

HTML:

<script language="javascript" type="text/javascript" src="js/Unterschrift.js"></script>
<link rel="stylesheet" href="css/Unterschrift.css">

<a id="new" class="navbtn" onclick="newCanvas()">New</a>
<div class="title">Unterschreiben</div>

.........
<div id="content"><p style="text-align:center">Loading Canvas...</p></div>

Der Code wird an zwei unterschiedlichen Stellen in der index.php geladen, so das später wieder eine vollständige index.html bei raus kommt.

CSS:

.navbtn {
  cursor:        pointer;
  float:         left;
  padding:        6px 10px;
  font-weight:      bold;
  line-height:      18px;
  font-size:        14px;
  color:          #eee;
  text-shadow:      0px -1px #000;
  border:        solid 1px #111;
  border-radius:      4px;
  background-color:    #404040;
  box-shadow:      0 0 1px 1px #555,inset 0 1px 0 0 #666;   
}
.navbtn-hover, .navbtn:active {
  color:         #222;
  text-shadow:      0px 1px #aaa;
  background-color:    #aaa;
  box-shadow:      0 0 1px 1px #444,inset 0 1px 0 0 #ccc;   
}

#content{
  position:        absolute;
/*  top:          44px; */
  top:          0px;
  left:          0px;
  right:          0px;
/*  bottom:        46px; */
  bottom:        1px;
  overflow:       hidden;
  background-color:   #ddd;
}
#canvas{
  cursor:         crosshair ;
  background-color:   #fff;
}

Javascript:

var ctx, color = "#000";   

document.addEventListener( "DOMContentLoaded", function(){

   // setup a new canvas for drawing wait for device init
  setTimeout(function(){
    newCanvas();
  }, 1000);

}, false );

// function to setup a new canvas for drawing
function newCanvas(){
   //define and resize canvas
  document.getElementById("content").style.height = window.innerHeight-90;
  var canvas = '<canvas id="canvas" width="'+window.innerWidth+'" height="'+(window.innerHeight-90)+'"></canvas>';
   document.getElementById("content").innerHTML = canvas;
   
  // setup canvas
   ctx=document.getElementById("canvas").getContext("2d");
   ctx.strokeStyle = color;
   ctx.lineWidth = 1;   
   
   // setup to trigger drawing on mouse or touch
  drawTouch();
  drawPointer();
   drawMouse();
}
   
function selectColor(el){
  for(var i=0;i<document.getElementsByClassName("palette").length;i++){
  document.getElementsByClassName("palette")[i].style.borderColor = "#777";
  document.getElementsByClassName("palette")[i].style.borderStyle = "solid";
  }
  el.style.borderColor = "#fff";
  el.style.borderStyle = "dashed";
  color = window.getComputedStyle(el).backgroundColor;
  ctx.beginPath();
  ctx.strokeStyle = color;
}

// prototype to   start drawing on touch using canvas moveTo and lineTo
var drawTouch = function() {
   var start = function(e) {
     ctx.beginPath();
     x = e.changedTouches[0].pageX;
     y = e.changedTouches[0].pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     e.preventDefault();
     x = e.changedTouches[0].pageX;
     y = e.changedTouches[0].pageY-44;
     ctx.lineTo(x,y);
     ctx.stroke();
   };
  document.getElementById("canvas").addEventListener("touchstart", start, false);
   document.getElementById("canvas").addEventListener("touchmove", move, false);
};
   
// prototype to   start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
var drawPointer = function() {
   var start = function(e) {
  e = e.originalEvent;
     ctx.beginPath();
     x = e.pageX;
     y = e.pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     e.preventDefault();
  e = e.originalEvent;
     x = e.pageX;
     y = e.pageY-44;
     ctx.lineTo(x,y);
     ctx.stroke();
  };
  document.getElementById("canvas").addEventListener("MSPointerDown", start, false);
   document.getElementById("canvas").addEventListener("MSPointerMove", move, false);
};   

// prototype to   start drawing on mouse using canvas moveTo and lineTo
var drawMouse = function() {
   var clicked = 0;
   var start = function(e) {
     clicked = 1;
     ctx.beginPath();
     x = e.pageX;
     y = e.pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     if(clicked){
       x = e.pageX;
       y = e.pageY-44;
       ctx.lineTo(x,y);
       ctx.stroke();
     }
   };
   var stop = function(e) {
     clicked = 0;
   };
  document.getElementById("canvas").addEventListener("mousedown", start, false);
   document.getElementById("canvas").addEventListener("mousemove", move, false);
   document.addEventListener("mouseup", stop, false);
};

Jetzt suche ich noch eine Möglichkeit das Bild dann auf dem Server zu sichern / Speichern.

Hat mir da jemand einen Tipp?

Gruß

nookie · 6 Juli 2015

Code:

var canvas = document.getElementById("canvas");
var url  = canvas.toDataURL();

muecke · 6 Juli 2015

Wenn ich dich richtig verstanden habe.

Zeile 1: gibt an auf was zugegriffen werden soll.
Zeile 2: gibt an das die URL in die Variable URL gespeichert werden soll.

Das bedeutet das ich eine Aktion Ausführen muss.

1. Auf einen Knopf Drücken
2. URL Lesen
3. URL per Formular versenden
4. Formular auslesen und Bild aus der URL Sichern

?? ist mein Gedankengang richtig?
oder bin ich auf dem Holzweg?

nookie · 6 Juli 2015

muecke schrieb:
Wenn ich dich richtig verstanden habe.

Zeile 1: gibt an auf was zugegriffen werden soll.
Zeile 2: gibt an das die URL in die Variable URL gespeichert werden soll.

Das bedeutet das ich eine Aktion Ausführen muss.

1. Auf einen Knopf Drücken
2. URL Lesen
3. URL per Formular versenden
4. Formular auslesen und Bild aus der URL Sichern

?? ist mein Gedankengang richtig?
oder bin ich auf dem Holzweg?

http://jsfiddle.net/hpnLy0dy/

Reicht das für dich?

muecke · 6 Juli 2015

Ich glaube ich wies was du mir damit sagen möchtest, jedoch wies ich nicht wie ich das machen muss.

Du hast mir jetzt einen Weg gezeigt wie ich ein Bild Downloaden kann.
in dem ich wo drauf Klicke.

Jedoch habe ich die URL doch erst im Java Script, --> Oh ja das könnte das Element sein das dann herunter geladen wird.

Hmm, ... ich möchte es jedoch nicht herunter Laden sondern auf dem Server Speichern.

Ich schaue mal ob ich was hin bekomme und melde mich dann noch mal.

Ist alles noch sehr verwindend für mich, da ich kein JavaScript kann.

nookie · 6 Juli 2015

muecke schrieb:
Ich glaube ich wies was du mir damit sagen möchtest, jedoch wies ich nicht wie ich das machen muss.

Du hast mir jetzt einen Weg gezeigt wie ich ein Bild Downloaden kann.
in dem ich wo drauf Klicke.

Jedoch habe ich die URL doch erst im Java Script, --> Oh ja das könnte das Element sein das dann herunter geladen wird.

Hmm, ... ich möchte es jedoch nicht herunter Laden sondern auf dem Server Speichern.

Ich schaue mal ob ich was hin bekomme und melde mich dann noch mal.

Ist alles noch sehr verwindend für mich, da ich kein JavaScript kann.

Ist ja nicht schlimm, musst dir halt nur Zeit zum lernen lassen.

Hier ist die Lösung deines Problems:
http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server

muecke · 6 Juli 2015

OK, ich habe es nun hin bekommen das ich das Bild herunter Laden kann :-)
Das ist schon mal ein Vorschritt.

HTML:

<a  id="download"  class="header-button right" onclick="UrlCanvas()" download="CanvasDemo.png">Speichern</a>

Javascript:

// Bild Speichern / Download !!!!!
function download() {
   var canvas = document.getElementById("canvas");
   var url  = canvas.toDataURL();
  this.href = url;
}

function UrlCanvas() {
   document.getElementById('download').addEventListener('click', download, false);   
  }

Jetzt bekomme ich das ganze Als Downloade angeboten.
Hmm, jetzt Stelle ich mir gerade die Frage wie ich das auf dem Server Speichere.

mache ich das über ein Formular?
Verstecktes Formularfeld "Bild Datei" und dort ist dann (download="CanvasDemo.png") hinterlegt.
und wenn ich dann auf Speichern Klicke Das das Formular versendet wird das Bild mit versendet und ich kann
das dann per PHP auf dem Server sichern.

Klingt Logisch, doch bei mir klingt viel Logisch und ist Müll.

muecke · 6 Juli 2015

Ok, das bringt mich nicht so weiter wie ich mir das erhofft habe.
leider kann ich kein Englisch und mit der Übersetzung von Google ist das auch nicht gerade viel leichter geworden zu verstehen.
:-(

Also das mit dem Downloade klappt ja :)
hatte gedacht das ich das dann auch in ein Formular Packen kann, *hmm war nicht ganz so, schade*

Mit dem was du mir dann noch Verlinkt hast komme ich nicht so richtig klar, ich verstehe nicht was da wo mit was zusammen gehört und was da wo wie auf was zugreift. *Mandarin verstehe ich gerade genau soviel*

Ich bin mal so gemein und veröffentliche meinen Code JAVA / HTML :

Unterschrift.js

Javascript:

var ctx, color = "#000";  

document.addEventListener( "DOMContentLoaded", function(){

   // setup a new canvas for drawing wait for device init
  setTimeout(function(){
    newCanvas();
  }, 1000);

}, false );

// function to setup a new canvas for drawing
function newCanvas(){
   //define and resize canvas
  document.getElementById("content").style.height = window.innerHeight-90;
  var canvas = '<canvas id="canvas" width="'+window.innerWidth+'" height="'+(window.innerHeight-90)+'"></canvas>';
   document.getElementById("content").innerHTML = canvas;
  
  // setup canvas
   ctx=document.getElementById("canvas").getContext("2d");
   ctx.strokeStyle = color;
   ctx.lineWidth = 1;  
  
   // setup to trigger drawing on mouse or touch
  drawTouch();
  drawPointer();
   drawMouse();
}

// prototype to   start drawing on touch using canvas moveTo and lineTo
var drawTouch = function() {
   var start = function(e) {
     ctx.beginPath();
     x = e.changedTouches[0].pageX;
     y = e.changedTouches[0].pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     e.preventDefault();
     x = e.changedTouches[0].pageX;
     y = e.changedTouches[0].pageY-44;
     ctx.lineTo(x,y);
     ctx.stroke();
   };
  document.getElementById("canvas").addEventListener("touchstart", start, false);
   document.getElementById("canvas").addEventListener("touchmove", move, false);
};
  
// prototype to   start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
var drawPointer = function() {
   var start = function(e) {
  e = e.originalEvent;
     ctx.beginPath();
     x = e.pageX;
     y = e.pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     e.preventDefault();
  e = e.originalEvent;
     x = e.pageX;
     y = e.pageY-44;
     ctx.lineTo(x,y);
     ctx.stroke();
  };
  document.getElementById("canvas").addEventListener("MSPointerDown", start, false);
   document.getElementById("canvas").addEventListener("MSPointerMove", move, false);
};  

// prototype to   start drawing on mouse using canvas moveTo and lineTo
var drawMouse = function() {
   var clicked = 0;
   var start = function(e) {
     clicked = 1;
     ctx.beginPath();
     x = e.pageX;
     y = e.pageY-44;
     ctx.moveTo(x,y);
   };
   var move = function(e) {
     if(clicked){
       x = e.pageX;
       y = e.pageY-44;
       ctx.lineTo(x,y);
       ctx.stroke();
     }
   };
   var stop = function(e) {
     clicked = 0;
   };
  document.getElementById("canvas").addEventListener("mousedown", start, false);
   document.getElementById("canvas").addEventListener("mousemove", move, false);
   document.addEventListener("mouseup", stop, false);
};



// ********************************************************************************
// ********************************************************************************

// Bild Speichern / Download !!!!!
function download() {
   var canvas = document.getElementById("canvas");
   var url  = canvas.toDataURL();
  this.href = url;
}

function UrlCanvas() {
   document.getElementById('download').addEventListener('click', download, false);  
  }

// ********************************************************************************
// ********************************************************************************

index.html

HTML:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>Test für Unterschrift</title>

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/mobil.css">
  <link rel="stylesheet" href="css/style.html">
</head>

<body ontouchstart="">
   <div class="demo">

    <form class="app" action="#" method="post">

    <header class="header">
  <h1 class="header-title">
    <script language="javascript" type="text/javascript" src="css/Unterschrift.js"></script>
<link rel="stylesheet" href="css/Unterschrift.css">

<a id="new" class="header-button left" onclick="newCanvas()">New</a>
<a id="download" class="header-button right" onclick="UrlCanvas()" download="CanvasDemo.png">Speichern_JS</a>

<input class="header-button right" name="Speichern" value="Speichern" type="submit">

<div class="title">Unterschreiben</div>

    </h1>
  </header>

  <section class="container"><div style="" id="content"><canvas id="canvas" width="1135" height="814"></canvas></div></section>

    <nav class="footer">
<a href="?action=Home" class="footer-link "> <span class="icon-home"></span>  Eingabe  </a>
<a href="?action=Cverview" class="footer-link "> <span class="icon-overview"><span class="info-counter">30</span></span> Übersicht </a>
<a href="?action=Account" class="footer-link "> <span class="icon-Account"></span>  Account  </a>
<a href="?action=Verifizieren" class="footer-link "> <span class="icon-Verifizieren"></span>  Verifizieren</a>
<a href="?action=Impressum" class="footer-link "> <span class="icon-overview"></span>  Impressum</a></nav>

    </form> <!-- "app with-subheader" -->
   </div> <!-- demo -->


</body></html>

Wie gesagt, mit dem Link von dir komme ich nicht ganz Klar, sch.....

Irgend wie muss ich im Bereich vom JavaScript

function UrlCanvas() {

hier muss wenn ich das richtig verstanden habe das Speichern auf dem Server mit eingebaut werden.
die Frage ist nur wie.
Denn wenn ich das Gespeichert habe benötige ich ja auch den Datei Namen um denn dann in die Datenbank zu schreiben.

hast du mir noch einen Tipp?

nookie · 6 Juli 2015

Du solltest dir dringend Englischkenntnisse aneignen. Das ist unumgänglich in der Programmierung.

muecke · 6 Juli 2015

Ja das ist richtig.
z.B. komme ich damit nicht zurecht, bzw. kann es nicht nachstellen.

ich glaube das soll Post #28 Sein auf der Seite http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server

I played with this two weeks ago, it's very simple. The only problem is that all the tutorials just talk about saving the image locally. This is how I did it:

1) I set up a form so I can use a POST method.
2) When the user is done drawing, he can click the "Save" button.
3) When the button is clicked I take the image data and put it into a hidden field. After that I submit the form.

Javascript:

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();

4) When the form is submited I have this small php script:

PHP:

<?php
$upload_dir = somehow_get_upload_dir();//implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,','', $img);
$img = str_replace(' ','+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);?>

Ich verstehe was der User da sagt, und wie das gehen soll glaube ich auch, ich bekomme es aber nicht umgesetzt.

das wäre mein HTML Code:

HTML:

 <form id="form1" action="script.php">
  <input  type="hidden" id="my_hidden" name="Image" value="">
  <button type="submit">absenden</button>
</form>

Jedoch klappt das nicht :-(

Ich komme nicht dahinter wie ich das mit dem JavaScript machen muss soll.
muss das noch mal in eine Funktion? udn die muss ich im HTML auch noch mal angeben?

Frage Canvas Drawing App

muecke

Mitglied

muecke

Mitglied

nookie

I did it all for the nookie

muecke

Mitglied

nookie

I did it all for the nookie

muecke

Mitglied

nookie

I did it all for the nookie

muecke

Mitglied

muecke

Mitglied

nookie

I did it all for the nookie

muecke

Mitglied

Neueste Beiträge