博客 (69)

获取

在 NuGet 中搜索 ZXing.Net

Demo

简单示例

var qr = new ZXing.QrCode.QRCodeWriter();
var matrix = qr.encode("http://xoyozo.net/", ZXing.BarcodeFormat.QR_CODE, 200, 200);
var writer = new ZXing.BarcodeWriter()
{
    Format = ZXing.BarcodeFormat.QR_CODE
};
Bitmap bitmap = writer.Write(matrix);

扩展示例

string content = "http://xoyozo.net/";

var hints = new Dictionary<ZXing.EncodeHintType, object>();
hints.Add(ZXing.EncodeHintType.ERROR_CORRECTION, ZXing.QrCode.Internal.ErrorCorrectionLevel.H); // 纠错级别
hints.Add(ZXing.EncodeHintType.CHARACTER_SET, Encoding.Default.WebName); // 编码：gb2312
hints.Add(ZXing.EncodeHintType.MARGIN, 0); // 出血码元数（标准为 4，美观为 2）

var qr = new ZXing.QrCode.QRCodeWriter();
var matrix = qr.encode(content, ZXing.BarcodeFormat.QR_CODE, 200, 200, hints);
var writer = new ZXing.BarcodeWriter()
{
    Format = ZXing.BarcodeFormat.QR_CODE,
    Renderer = new ZXing.Rendering.BitmapRenderer
    {
        Foreground = Color.Black, // 前景色（默认黑色）
        Background = Color.White, // 背景色（默认白色）
    },
};

Bitmap bitmap = writer.Write(matrix);

将 Bitmap 写入到流

Stream stream = new MemoryStream();
bitmap.Save(stream, ImageFormat.Png);

将 Bitmap 保存到磁盘

string path = "D:\wwwroot\upload\abc.png";
bitmap.Save(path, ImageFormat.Png);

更多

使用 ThoughtWorks.QRCode 生成二维码

对比 ThoughtWorks.QRCode 和 ZXing.Net

获取

在 NuGet 中搜索 ThoughtWorks.QRCode

Demo

简单示例

var qr = new ThoughtWorks.QRCode.Codec.QRCodeEncoder();
Bitmap bitmap = qr.Encode("http://xoyozo.net/");

扩展示例

string content = "http://xoyozo.net/";

var qr = new ThoughtWorks.QRCode.Codec.QRCodeEncoder
{
    // 纠错级别，L (7%)、M (15%)、Q (25%)、H (30%)
    QRCodeErrorCorrect = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ERROR_CORRECTION.H,
    // 码元尺寸（像素）
    QRCodeScale = 4,
    // 前景色（默认黑色）
    QRCodeForegroundColor = Color.Black,
    // 背景色（默认白色）
    QRCodeBackgroundColor = Color.White,
};

// 根据内容确定 Mode，参：http://en.wikipedia.org/wiki/QR_code#Storage
if (Regex.IsMatch(content, @"^\d+$"))
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.NUMERIC;
}
else if (Regex.IsMatch(content, @"^[0-9A-Z $%*+-./:]+$"))
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.ALPHA_NUMERIC;
}
else
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.BYTE;
}

Bitmap bitmap = qr.Encode(content, Encoding.Default); // 编码，简体中文系统默认为 gb2312

裁切掉多余的 1 像素

ThoughtWorks.QRCode 生成的四周没有留白的二维码图片，其右边和下边分别会多出 1 像素，使用以下方法来调整图片大小

// 创建一个新的图片（宽度和高度各缩小 1 像素）
Bitmap bitmap2 = new Bitmap(bitmap.Size.Width - 1, bitmap.Size.Height - 1);
// 以新图片来绘图
Graphics g2 = Graphics.FromImage(bitmap2);
// 新旧图片绘制到新图片中（左上角对齐）
g2.DrawImage(bitmap, 0, 0);

将 Bitmap 写入到流

Stream stream = new MemoryStream();
bitmap.Save(stream, ImageFormat.Png);

若已裁切 1 像素，请修改为 bitmap2

将 Bitmap 保存到磁盘

string path = "D:\wwwroot\upload\abc.png";
bitmap.Save(path, ImageFormat.Png);

若已裁切 1 像素，请修改为 bitmap2

更多

使用 ZXing.Net 生成二维码

对比 ThoughtWorks.QRCode 和 ZXing.Net

jquery.barrager.js 是一款优雅的网页弹幕插件，支持显示图片，文字以及超链接。支持速度、高度、颜色、数量等自定义。

使用方法参官方网站：http://yaseng.org/jquery.barrager.js/

jquery.barrager.min.js 会报错，改用 jquery.barrager.js（版本 1.1）

实战示例：https://xoyozo.net/Demo/DanMu

该示例重写了部分 CSS 样式。

注：info 属性支持 HTML，因此要自己过滤危险标签，建议仅保留 <img /> 标签

如果要显示在指定区域，可以使用 bottom 属性，例：

bottom: (Math.random() * (0.95 - 0.5) + 0.5) * $(window).height()

建议加 loading 锁，以适应网络不通畅的环境（ajax 时间超过定时间隔会导致请求到重复的数据）

跨域环境可以使用 JSONP 来实现，服务器端需设置 Access-Control-Allow-Origin 为 *。

Session 有多种存储模式，默认是 InProc，顾名思义是“在进程内”，即在 IIS 中，随网站重启而重启，网站发布后（或改动 .dll 文件）会导致应用重新运行，Session 清空。

Session 可以使用 StateServer 来保存，需要服务器开启 ASP.NET State Service 服务，此种方式要求保存在 Session 的信息必须序列化，然后从 Session 中获取的时候也要反序列化，这就导致性能有略微的损失。

Session 还可以配置为 SQLServer，将 Session 存储在数据库中，同样需要序列化。

当配置为 Custom 时，可以在使用 Memcached、Redis 等第三方缓存技术来实现 Session 的管理，本文不作讨论。

Off 模式即关闭 Session，这种方式如果要实现用户登录功能，就必须依赖 Cookie 等来实现。

下面针对常见的三种模式进行比较：

因此，如果你仅仅为了标题所述的“每次发布后丢失 Session”而烦恼，那么推荐使用 StateServer 模式来存储 Session。

注：

如果 Session 的 Key 是在应用启动时随机生成的话，使用 StateServer 和 SQLServer 还是会“丢失” Session。

这是对 Session 的配置，对 Cache 无效。

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时，固定表头为用户所注意的列提供了上下文。看下面图示你就明白了：

默认情况下，overflow 属性不适用于表格分组元素 thead, tbody , tfoot。你可以在下面的示例中看到：

示例

为了使其工作，

第一步是：设置 tbody 为 display:block ，以便我们可以应用 height 和 overflow 属性。

下一步将是：设置thead 中的 tr元素设置为 display:block。

所以最终的CSS会是：

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
}

完整示例

这样，创建表格非常简单而且富有语义，并且没有依赖 JavaScript 。

HTML5 Sortable 是一款使用原生 HTML5 drag 和 drop API 来对列表或网格进行排序的 jQuery 插件。

下载和使用：官网

步骤：

1、给 <ul /> 添加 sortable 样式类

2、引入 jquery.sortable.js

3、$('.sortable').sortable();

通过绑定 sortupdate 事件来获取排序后的 DOM 位置，示例：

$('.sortable').sortable().bind('sortupdate', function (event, ui) {
    var item = $(ui.item[0]);
    var prev = item.prev();

    $.post(window.location.pathname, {
        xdo: 'fn_sort',
        cid: item.data('cid'),
        prev: prev.data('cid') // 可能为 undefined
    }, function (json) {
        if (json.result.success) {
        } else {
            toastr['error'](json.result.info);
        }
    }, 'json');
});

AspNetPager 官网给出了示例：

即在引入 bootstrap.css 后添加以下样式：

.pagination a[disabled] { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; }
.pagination span.active { z-index: 2; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; }

给 AspNetPager 控件添加以下属性：

CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active"

然而，当页数超过 30 时（ShowBoxThreshold 的默认值）会显示 PageIndexBox，可以使之不显示：

ShowPageIndexBox="Never"

或者添加以下样式修饰它：

.pagination input[type=text] { width: 50px !important; display: inline-block; text-align:center; }
.pagination input[type=button] { margin-top: -3px; margin-left: 5px; }

并增加属性：

PageIndexBoxClass="form-control" SubmitButtonClass="btn btn-primary"

另外，我还添加了以下属性来适应我的项目：

UrlPaging="true" AlwaysShow="True" AlwaysShowFirstLastPageNumber="true" ShowFirstLast="false" NumericButtonCount="3"

示例：

<form action="javascript:fn_submit()">
  <div>
    手机号码：
    <input type="tel" required="required" pattern="1\d{10}" title="手机号码由以1开头的11位数字组成" />
  </div>
  <div>
    身份证号码：
    <input type="text" required="required" pattern="\d{17}[\dX]" title="身份证号码由18位数字或17位数字加字母X组成" />
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

<script>
  function fn_submit() {
    alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
  }
</script>

form 的 action 使用 javascript 调用 fn_submit 方法，在这个方法内可以使用 jQuery 的 ajax 来 POST 数据，当然还可以搭配使用 HTML5 的 FormData。这样相比于直接在 submit 按钮上写事件的好处是可以用到 HTML5 的表单验证功能，并且不会重载页面。

Vue 版本：

<form v-on:submit="fn_submit" method="dialog">
</form>

var app = new Vue({
    el: '#app',
    methods: {
        fn_submit: function () {
            alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
        }
    }
});

最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。

参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：

A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.

Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。

<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。

加了一些注释，便于理解，官方英文版。

(function (i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  // console.log(window['GoogleAnalyticsObject']) // 'ga'
  // console.log(i[r]) // undefined
  i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
    (i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
  },
  i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
  // console.log(i[r]) // window['ga'] 就是上面那个 function
  a = s.createElement(o), // 创建一个 script 元素
  m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
  a.async = 1; // 异步加载
  a.defer = 1; // 兼容旧浏览器（我自己加的）
  a.src = g;
  m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

过程是：

创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。

现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：

;(function () {
  console.log(ga.q);
})(window);

简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。

测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。

收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。