2020/4/5 4月

C# 读取照片的 EXIF 信息

nuget 安装组件：MetadataExtractor

从文件流读取文件信息：

public IActionResult UploadFile([FromForm(Name = "[]")]IFormFile file)
{
    var md = ImageMetadataReader.ReadMetadata(file.OpenReadStream());
    var dic = new Dictionary<string, string>();
    foreach (var m in md)
    {
        foreach (var t in m.Tags)
        {
            dic.Add(m.Name + " - " + t.Name, t.Description);
        }
    }
    return Ok(dic);
}

结果演示：

从结果中可以看到计算的尺寸、拍摄设备、拍摄时间等信息。

MetadataExtractor 是一个简单而轻便的库，用于从图像和视频文件中读取元数据。

MetadataExtractor 从 JPEG、TIFF、WebP、PSD、PNG、BMP、GIF、ICO、PCX 和相机 RAW 文件读取 Exif、IPTC、XMP、ICC、Photoshop、WebP、PNG、BMP、GIF、ICO、PCX 元数据。

此外，还支持 MOV 和相关的 QuickTime 视频格式，例如 MP4、M4V、3G2、3GP。

相机制造商特定的支持包括爱克发，佳能，卡西欧，DJI，爱普生，富士胶片，柯达，京瓷，徕卡，美能达，尼康，奥林巴斯，松下，宾得，Recononyx，三洋，Sigma / Foveon 和索尼型号。

阅读全文

2020/4/1 4月

使用 rem 单位进行响应式手机版网页开发（方便地从设计稿换算尺寸、自适应不同手机屏幕）

使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。

rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。

一般的手机浏览器的默认字体大小为 16px。即：

:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */

也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5‬rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。

为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。

以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。

根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。

实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。

为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：

约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；
使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；
计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。

这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。

完整代码（jQuery 版）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; }
        .whole { background-color: #D84C40; width: 10rem; /* 即 designsWidth ÷ px2rem */ }
        .half { background-color: #3296FA; width: 5rem; /* 即 designsWidth ÷ px2rem 的商的一半 */ }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        // [函数] 重置尺寸
        function fn_resize() {
            // 期望的“设计稿 px 值与 CSS rem 值的比”
            var px2rem = 100;
            // 设计稿宽度（px）
            var designsWidth = 1000;
            // 限制 #app 的最大宽度为设计稿宽度
            $('#app').css('max-width', designsWidth);
            // 重置 :root 的 font-size
            $(':root').css('font-size', px2rem * $('#app').width() / designsWidth);
        }
        // 页面加载完成后重置尺寸
        $(fn_resize);
        // 改变窗口大小时重置尺寸
        $(window).resize(fn_resize);
    </script>
</body>
</html>

完整代码（Vue 版）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; }
        .whole { background-color: #D84C40; width: 10rem; /* 即 designsWidth ÷ px2rem 的商 */ }
        .half { background-color: #3296FA; width: 5rem; /* 即 designsWidth ÷ px2rem 的商的一半 */ }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app" v-bind:style="{ maxWidth: designsWidth + 'px' }">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
        <div>appWidth: {{ appWidth }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 期望的“设计稿 px 值与 CSS rem 值的比”
                px2rem: 100,
                // 设计稿宽度（px）
                designsWidth: 1000,
                // #app 的 width
                appWidth: 0, // 勿改
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                }
            },
            methods: {
                fn_resize() {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                }
            }
        });
    </script>
</body>
</html>

示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。

示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。

阅读全文

2020/3/11 3月

宝塔面板 SSL 无法登录怎么办？

执行以下命令关闭面板 SSL 并重启宝塔面板：

rm -f /www/server/panel/data/ssl.pl && /etc/init.d/bt restart

阅读全文

2020/3/4 3月

Date Range Picker（一款 jQuery 插件，支持日期范围、时间范围选择）

引用

jQuery、moment.js、daterangepicker

例子

$('.x_dates').daterangepicker({
    "timePicker": false, // 是否显示时间
    //"dateLimit": {
    //    "days": 7 // 可选中的最大区间（天）
    //},
    "ranges": { // 快捷栏
        "今天": [moment(), moment()],
        "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        "最近 7 天": [moment().subtract(6, 'days'), moment()],
        "最近 30 天": [moment().subtract(29, 'days'), moment()],
        "本月": [moment().startOf('month'), moment().endOf('month')],
        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: daterangepicker_startDate, // moment(),
    endDate: daterangepicker_endDate, // moment(),
    autoUpdateInput: true,
    "locale": {
        "direction": "ltr",
        "format": "YYYY-MM-DD", // YYYY-MM-DD HH:mm
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "自定义",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    }
}, function (start, end, label) {
    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    fn_daterangepicker_changed(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
});

官网（含配置工具）

http://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

配置工具

下载的包中的 demo.html

Demo

https://awio.iljmp.com/5/drpdemo

阅读全文

2020/2/28 2月

ASP.NET 的 ActionResult

返回状态	ASP.NET MVC	ASP.NET Core	ASP.NET Web API
200 视图	return View();		-
200 带模型的视图	return View(Model);		-
200 空内容	return new EmptyResult();		return Ok();
200 文本	return Content(string);		return Ok(string); return Content(string);
200 JSON	return Json(object);		return Json(T); // 强制 JSON return Ok(T); // 请求时可指定 Content-Type
200 文件	return File();
301 永久跳转	return RedirectPermanent(); return RedirectToActionPermanent(); return RedirectToRoutePermanent();
302 临时跳转	return Redirect(); return RedirectToAction(); return RedirectToRoute();
400 错误的请求			return BadRequest(msg);
401 未授权	return new HttpUnauthorizedResult();		return Unauthorized();
404 找不到文件或目录	return HttpNotFound();		return NotFound();
直接指定状态码	return new HttpStatusCodeResult(HttpStatusCode.*);