网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索 电影文章

文章热门排行随机文章推荐文章

js生成canvas二维码并实现下载到本地PC端

关注我吧
 2016/9/21 17:31:57 阅读次数:876

一、简述:

本着做手机端的二维码保存到本地的效果,但是没办法实现。只能在PC端实现,干脆写了下来,以便日后使用。

使用了html5的canvas标签,动态创建二维码,可以自己输入url,二维码的尺寸,然后生成自己的二维码。需要使用支持html5的浏览器方可。

效果图如下:

js生成canvas二维码并实现下载到本地PC端

二、实例代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>二维码生成器并下载-幸凡学习网</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .txt{border-bottom:1px solid #e6e6e6;background:#f1f1f1;line-height:50px;font-size:14px;}
        .content{padding:0 100px;font-size:14px;color:#666;}
        .mt20{margin-top:20px}
        .txt input{vertical-align:middle;height:28px;line-height:28px;margin:0 10px;}
        input#qrvalue{color:#666;border:1px solid #999;width:300px;padding:0 10px;margin:10px;}
        input#qrsize{width:60px;text-align:center;}
        input#creat{background:#666;color:#fff;border:none;padding:0 30px;height:30px;line-height:30px;}
        a.download{width:100px;text-align:center;display:block;color:#333;text-decoration:none;background:#efefef;border:1px solid #ccc;height:30px;line-height:30px;}
    </style>
</head>

<body>
    <div class="txt"><p class="content">请输入要生成的链接:<input type="text" id="qrvalue" value="http://www.86y.org" />生成尺寸:<input type="text" id="qrsize" value="100" />(宽或高)<input type="button" value="生成" id="creat" onclick="creatqr()" /></p></div>
    <div id="qrcodess" class="content mt20"></div>
    <div class="content mt20"><a href="javascript:;" class="download">下载二维码</a></div>
    <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        function creatqr() {
            var qrtxt = $("#qrvalue").val();
            var srsize = $("#qrsize").val();
            $("#qrcodess").html("");
            $('#qrcodess').qrcode({ width: srsize, height: srsize, text: qrtxt });
        }
        function exportCanvasAsPNG(canvas, fileName) {            
            var MIME_TYPE = "image/png";
            var dlLink = document.createElement('a');
            dlLink.download = fileName;
            dlLink.href = canvas.toDataURL("image/png");
            dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.href].join(':');
            document.body.appendChild(dlLink);
            dlLink.click();
            document.body.removeChild(dlLink);
        }

        $(function () {
            creatqr();

            $(".download").click(function () {
                exportCanvasAsPNG($("#qrcodess").find("canvas")[0], "qrcoder.png");
            });
        });
    </script>
</body>
</html>

更新一段.net下载图片的代码,也是支持PC端

using System;
using System.Collections.Generic;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class save_index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string imgUrl = "http://imgwx1.2345.com/dypcimg/img/e/44/sup132297.jpg";
        WebClient my = new WebClient();
        byte[] mybyte;
        mybyte = my.DownloadData(imgUrl);
        MemoryStream ms = new MemoryStream(mybyte);
        System.Drawing.Image img;
        img = System.Drawing.Image.FromStream(ms);
        string filepath = Server.MapPath("/upload/") + imgUrl.Substring(imgUrl.LastIndexOf('/') + 1);
        if (File.Exists(filepath)) File.Delete(filepath);
        img.Save(filepath, ImageFormat.Exif);   //保存  ImageFormat.Exif:自动获取文件格式
        //下面直接输出
        Response.ClearContent();
        Response.AddHeader("Content-Disposition","attachment;filename="+imgUrl.Substring(imgUrl.LastIndexOf('/') + 1));
        Response.ContentType = "image/" + ImageFormat.Exif;
        Response.BinaryWrite(mybyte);
        File.Delete(filepath);       
    }
   
}

三、结语

实例全用网络CDN资源,大家可以在线运行也可以查看浏览地址:http://www.86y.org/DEMO/qrcode/

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以点击链接加入群:【幸凡学习网技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=804【js生成canvas二维码并实现下载到本地PC端】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭