javascript: Bilddatei hochladen und in eine Leinwand zeichnen

Ich arbeite an einer Webanwendung zum Malen von Bildern. Ich benutze ein CANVAS-Element und Javascript, um darauf zu zeichnen, aber ich habe ein Problem: Wie kann ich ein Bild vom PC des Benutzers laden und es auf der Leinwand zeichnen? Ich möchte es nicht auf dem Server speichern, nur auf der Webseite! Hierjavascript: Bilddatei hochladen und in eine Leinwand zeichnen

ist eine verkürzte Version des Codes (der vollständige Code wäre zu lang):

HTML:

Open file: <input type="file" id="fileUpload" accept="image/*" /><br /> 
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;"> 
    Please open this website on a browser with javascript and html5 support. 
</canvas>

javascript:

var x = 0; 
var y = 0; 
var clicked = false; 

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

context.strokeStyle = "black"; 
context.lineCap = "round"; 

canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false); 

takePicture.onchange = function (event) { 
    var files = event.target.files, 
    file; 
    if (files && files.length > 0) { 
    file = files[0]; 
    processImage(file); 
    } 
}; 

function processImage(file) { 
    var reader = new FileReader(); 
    reader.readAsDataUrl(file) 
    reader.onload = function(e) { 
    var img = new Image(); 
    img.onload = function() { 
     context.drawImage(img, 100,100) 
    } 
    img.src = e.target.result; 
    } 
} 

    // functions for drawing (works perfectly well) 
function getMousePos(canvas, e) { 
    var rect = canvas.getBoundingClientRect(); 
    x = evt.clientX - rect.left; 
    y = evt.clientY - rect.top; 
} 

function startLine() { 
    context.moveTo(x,y); 
    context.beginPath(); 
    clicked = true; 
} 

function keepLine() { 
    if(clicked) { 
    context.lineTo(x,y); 
    context.stroke(); 
    context.moveTo(x,y); 
    } 
} 

function drawLine() { 
    context.lineTo(x,y); 
    context.stroke(); 
    clicked = false; 
}

Es gibt kein Copyright

Quelle

2014-03-07 Aloso

Geht das nicht schon mit Ihrem Code? JavaScript hat keinen Lesezugriff auf das Dateisystem (aus Sicherheitsgründen). Der Benutzer muss ihm explizit eine Datei geben, normalerweise geschieht dies über '' – Halcyon

http://stackoverflow.com/questions/17710147/jquery-js-get-input-file-image- in-base64-codiert? lq = 1 –

Ich habe es versucht, aber es hat nicht funktioniert: Das Bild wird nicht auf der Leinwand angezeigt. Das einzige, was passiert ist, dass Firebug sagt mir: TypeError: reader.readAsDataUrl ist keine Funktion – Aloso

function el(id){return document.getElementById(id);} // Get elem by ID 
 

 
var canvas = el("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 
function readImage() { 
 
    if (this.files && this.files[0]) { 
 
     var FR= new FileReader(); 
 
     FR.onload = function(e) { 
 
      var img = new Image(); 
 
      img.addEventListener("load", function() { 
 
      context.drawImage(img, 0, 0); 
 
      }); 
 
      img.src = e.target.result; 
 
     };  
 
     FR.readAsDataURL(this.files[0]); 
 
    } 
 
} 
 

 
el("fileUpload").addEventListener("change", readImage, false);

<input type='file' id="fileUpload" /> 
 
<canvas id="canvas" width="900" height="600"></canvas>

Quelle

2014-03-07 16:48:59

vielen Dank! Es klappt! – Aloso

@Roko C. Bitte sagen Sie mir, wie Sie dieses Bild in Leinwand ziehen. –

@varunsharma meinst du ** Drag + Drop ** vom Desktop auf Canvas? –

<html> 
<head> 
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
window.addEvent('load', function() { 
var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var c = document.getElementById('myCanvas'); 
var ctx = c.getContext('2d'); 


function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      c.width = img.width; 
      c.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

});//]]> 


</script> 
</head> 

<body> 
<div style="background:#990; width:100%; padding:20px; "> 
<label>Image File:</label><br/> 
<input type="file" id="imageLoader" name="imageLoader"/> 
</div> 

<canvas id="myCanvas" ></canvas> 
</body> 
</html>

Quelle

2014-08-28 20:43:27 Ferose

javascript: Bilddatei hochladen und in eine Leinwand zeichnen

Antwort

Verwandte Themen