Вопрос:

JavaScript: загрузить файл изображения и нарисовать его на холсте

javascript html5 canvas image-uploading

23463 просмотра

2 ответа

2010 Репутация автора

Я работаю в веб-приложении для рисования изображений. Я использую элемент CANVAS и 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;
}

Там нет авторских прав

Автор: Aloso Источник Размещён: 07.03.2014 04:33

Ответы (2)


25 плюса

136892 Репутация автора

Решение

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>  

Автор: Roko C. Buljan Размещён: 07.03.2014 04:48

3 плюса

306 Репутация автора

<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>
Автор: Ferose Размещён: 28.08.2014 08:43
Вопросы из категории :
32x32