javascript：上传图像文件并将其绘制到画布中

我在用于绘制图像的Web应用程序中工作。我使用CANVAS元素和JavaScript来绘制它，但是我遇到了一个问题：如何从用户的PC加载图像并将其绘制在画布上？我不想将它保存在服务器上，只能在网页上保存！javascript：上传图像文件并将其绘制到画布中

下面是代码的缩写版本（完整的代码就太长了）：

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; 
}

有没有版权

来源

2014-03-07 Aloso

不是你的代码已经这样做了吗？ JavaScript没有文件系统读取权限（由于安全考虑）。用户必须明确地给它一个文件，通常这是通过''完成的。' – Halcyon

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

我试过了，但没有奏效：图像没有出现在画布上。唯一发生的事情是，萤火虫告诉我：TypeError：reader.readAsDataUrl不是函数 – 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>

来源

2014-03-07 16:48:59

非常感谢！有用！ – Aloso

@Roko C.请告诉我如何在画布中拖动这些图像。 –

@varunsharma你的意思是**从桌面拖放到桌布上？ –

<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>

来源

2014-08-28 20:43:27 Ferose

javascript：上传图像文件并将其绘制到画布中

回答

相关问题