boton guardar img

monsalve1221 · #1 (**permalink**) 09/11/2015, 12:58

Resulta que tengo este codigo que ganera una img Qr, lo que quiero es agregarla un boton que descarge la img que se genera luego, he intentado de muchas formas pero no lo he logrado, creo que poner la css y el js del Qr no es nesesario, ayuda por favor

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>QR Offline by Monsa</title>
    <meta charset="utf-8" />
    <meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/default.css" media="all" />
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" />
    <link rel="stylesheet" href="css/fixed-navigation.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    
    <script src="js/default.js"></script>
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
 
    </script>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body onload="initialize()">
    <div id="pagewidth">
    <!--    <header id="header">
            <div class="center">
                <nav id="mainNav">
                    <ul>
                        <li class="active"><a href="#pagewidth"><span>gallery</span></a></li>
                        <li><a href="#twoColumnLayout"><span>2 columns</span></a></li>
                        <li><a href="#threeColumnLayout"><span>3 columns</span></a></li>
                        <li><a href="#boxes"><span>boxes</span></a></li>
                        <li><a href="#testiomonialsTab"><span>testimonials</span></a></li>
                        <li><a href="#contactUs"><span>contact us</span></a></li>
                    </ul>
                </nav>
            </div>
        </header> -->
        <div id="content">
            <section class="row">
                <div class="center">
                    <h1>Genera tu codigo Qr</h1>
                    <strong class="subHeading">Introduce el texto</strong>
                    <div class="gallery">
                    <script type="text/javascript" src="js/qrcode.js"></script>
<script>                    
function limpiar()
 
 
{
 
 
   document.getElementById("qr").innerHTML="";
   document.getElementById("msg").innerHTML="";
 
 
}</script>
 
                    
                    
                    <div data-role="content">
        <form>
            <center>
                <textarea name="msg"></textarea><br> 
<div class="buttons">
                        <a type="button" value="Generar" onclick="update_qrcode()"class="btn btnGreen"><span>Generar</span></a>
                <!--        <span><em>or</em></span> -->
                        
                        <input class="btn btnBlue" type="reset" value="Limpiar Pantalla" onclick="limpiar()"">
                        
                    </div>
            </center>
        </form>
            <center>
            <br><p>
<div id="qr">
 
</div>
 
</div>
</center>
 
                    </div>
                
                
                
                </div>
            </section>
        
            
            
        
            
        </div>
        <footer id="footer">
            <div class="center">
                <span class="copy">Diseñado por <a href="#"><br>Diego Monsalve</a></span>
                Redes Sociales <br><a href="#">Facebook</a> y <a href="#">Twitter</a>
            </div>
        </footer>
    </div>
</body>
</html>

AngelKrak · #2 (**permalink**) 09/11/2015, 16:21

por que no usas la Etiqueta de Download de HTML5? lo que se bajara sera lo que este dentro de la etiqueta href

Ejemplo:

Código HTML:

Ver original<a href="http://www.w3schools.com/images/colorpicker.gif" download>

Info:
http://www.w3schools.com/tags/att_a_download.asp