How can I open an image from my computer and move it inside my canvas on a web page?

Question

How can I open an image from my computer and move it inside my canvas on a web page?

Navigation

#1 by (2 votes)

1

I am trying to open an image from my pc to show it on my canvas that I create on my website, but I can not find an example that can guide me to do this, I really do not know if I can if someone can help me please. Here I leave part of the code that I implement. I hope you have given me to understand and thank you.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><title>La web</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>



<body background="fondo.gif">
<div id="container">   <!-- Start of Page Header -->
<div id="page_header">
<div id="page_heading">
<h1><span>ejemplo1</span></h1>
</div>


<div class="clearthis">&nbsp;</div>
<h1 align="center">La web</h1>

</div>
<!-- End of Page Header --><!-- Start of Page Menu -->
<div id="page_menu">
<ul>
<li><a href="/home/jun/Escritorio">Abrir imagen</a></li>
<!--<input type="button" value="Abrir Imagen " onclick="borraCnv2Width()" />-->

<li><a href="http://www.freewebsitetemplates.com/">Información</a></li>
<li><a href="http://www.freewebsitetemplates.com/"</a></li>
<li><a href="http://www.freewebsitetemplates.com/"> </a></li>
<li><a href="http://www.freewebsitetemplates.com/"> </a></li>
<li class="last"><a href="http://www.freewebsitetemplates.com/"> </a></li>
</ul>
</div>

<!-- comienza el canvaz generado para mostrar la imagen-->
<script>
window.onload=function()
{
    animacion_con_canvas();

}
function animacion_con_canvas()
    {
     var mi_canvas=document.getElementById("canvas");

     var contexto=mi_canvas.getContext("2d")

     var img_re=new Imagen();

     img_re.scr="/home/jun/Escritorio/";

     img_re.addEventListener('load',mostrar_imagen, false);

     function mostrar_imagen()
     {
         contexto.drawIage(img_re,409,60);
     }
    }

</script>
</body>
<canvas id="canvas" width="450" height="260" style="border:3px solid #ccc;"></canvas>  <!-- canvas generado -->
<tr>
    <td>  </td>
    <td><img src="images/examen.jpg" width="250px" height="250px"/></td>
</tr>
<br>
<br>
<blockquote>
<blockquote>
    <p align="left">
        <em>
    <strong>INFO...</strong>
    <br>
    <br>
    <big>INFO</big>
    <br>   
    <br>   
    <br>   
    <strong>MÁS INFO</strong>
    <br>
   <big>INFOOOOO </big>
    </em>
    </p>
</blockquote>
</blockquote>
<br>
<br>
<br>
<br>
<br>
<br>
<div  id="copyright"> <strong>Copyright&copy; 2018 Todos los derechos reservados</strong></div>
</html>

javascript html5

asked by Airam 23.11.2018 в 05:54

source

1 answer

Store name and file path uploaded in php Persist a variable

score 2 · Accepted Answer

A simpler way to draw an image on a canvas:

function drawImage() {
  var ctx = document.getElementById('canvas').getContext("2d"),
    img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0, 500, 500);
  };
  img.src = "https://cdn2.thecatapi.com/images/1he.jpg";
}

drawImage()

<canvas id="canvas" width="500" height="500"></canvas>

Updating the answer to what you need using readAsDataURL should look like this:

var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


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

<label>Imagen:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="canvas"></canvas>

The readAsDataURL method is used to read the content of Blob or File specified. When the reading operation is completed, the readyState becomes DONE , and the loadend is released.

At that time, the result attribute contains the information as a URL representing the information in the file as a string of characters encoded in base64 .