发表于 | 分类于 ， |
字数统计: 1.2k | 阅读时长 ≈ 6

选择多张图片从上到下排列合成一张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼长图</title>
</head>

<body>
    <input id="uploadInput" type="file" accept="image/*" multiple="multiple" style="display: none;">
    <label for="uploadInput" style="border: 1px solid #333; cursor: pointer; padding: 5px 20px;">
        点击选择图片
    </label>

    <div id="imageBox"></div>

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        // 拼出来的图片的宽度
        const width = 300;
        // 拼出来的图片的质量，0-1之间，越大质量越好
        const encoderOptions = 0.5;
        // 图片选择输入框
        const uploadInput = document.getElementById('uploadInput');
        // 图片展示框
        const imageBox = document.getElementById('imageBox');

        // 给图片选择输入框添加change监听事件
        uploadInput.addEventListener('change', event => {
            const files = Array.from(event.target.files); // 将图片文件对象转换为数组

            filesToInstances(files, instances => {
                drawImages(instances, finalImageUrl => {
                    imageBox.innerHTML = `<img src=${finalImageUrl}><a download href=${finalImageUrl}>点击下载</a>`;
                });
            });
        });

        /**
         * 根据图片文件拿到图片实例
         * @param files 图片文件对象数组
         * @param callback
         */
        const filesToInstances = (files, callback) => {
            const length = files.length; // 文件个数
            let instances = []; // 文件实例数组
            let finished = 0; // 转换成功个数

            // 遍历图片文件数组
            files.forEach((file, index) => {
                const reader = new FileReader();
                // 把文件读为 dataUrl
                reader.readAsDataURL(file);
                reader.onload = e => {
                    const image = new Image();
                    image.src = e.target.result; // 获取图片文件的base64数据
                    // 解决跨域
                    // image.setAttribute('crossOrigin', 'anonymous');   
                    // image.src = e.target.result + '?time=' + new Date().valueOf();
                    image.onload = () => {
                        // 图片实例化成功后存起来
                        instances[index] = image;
                        finished++;
                        if (finished === length) { // 如果全部完成转换，调用回调函数
                            callback(instances);
                        }
                    }
                }
            });
        }

        /**
         * 拼图
         * @param images 图片实例数组
         * @param callback
         */
        const drawImages = (images, callback) => {
            const heights = images.map(item => width / item.width * item.height); // 计算获取每个图片文件根据指定width后的高度
            const canvas = document.createElement('canvas'); // 创建canvas元素
            canvas.width = width; // canvas宽度
            canvas.height = heights.reduce((total, current) => total + current); // 计算heights数组元素相加后的总和为canvas的高度
            const context = canvas.getContext('2d'); // 创建渲染
            let y = 0; // canvas Y轴坐标

            // 遍历图片实例数组
            images.forEach((item, index) => {
                const height = heights[index];
                context.drawImage(item, 0, y, width, height);
                y += height; // Y轴坐标加上上一张图片高度
            });

            // canvas数据放到回调函数
            callback(canvas.toDataURL('image/jpeg', encoderOptions));
        }
    </script>
</body>

</html>
阅读全文 »

发表于 | 分类于 ， |
字数统计: 93 | 阅读时长 ≈ 1

On Laravel 5.8, you cannot use Log::useFiles() to create custom log files,after some digging around I found that I could add a channel to config/logging.php like this

1
2
3
4
5
'customlog' => [
            'driver' => 'single',
            'path' => storage_path('logs/custom.log'),
            'level' => 'info',
],
阅读全文 »

发表于 | 分类于 ， |
字数统计: 771 | 阅读时长 ≈ 3

Hexo的Next主题集成了多种评论系统，在这里介绍两种个人感觉还不错的评论系统：Valine和Gitment。

Valine 评论系统

使用 Valine 评论系统，这款系统不需要登录便可以登录，没有后端，Next 主题最新已经支持安装

  • 基于 Leancloud 的系统
  • 支持 MarkDown 语法
  • 无后端实现，快速高效
阅读全文 »

发表于 | 分类于 ， |
字数统计: 351 | 阅读时长 ≈ 1

我们在使用Laravel框架时，免不了要打印一下程序中SQL的执行情况

临时输出执行的 SQL 日志

1
2
3
4
5
DB::enableQueryLog();// 开启日志支持

// 程序中执行SQL的代码

dd(DB::getQueryLog());// 输出执行的 SQL 日志
阅读全文 »

发表于 | 分类于 ， |
字数统计: 129 | 阅读时长 ≈ 1

最近使用 phpstudy_pro 集成环境，php 版本为 7.2.9，laravel 框架开发，发现一个问题，就是调试的时候，设置的打印数据得刷新好几次才能正常，开始以为是laravel 框架缓存导致的，清理laravel缓存之后，BUT，还是得刷新几次。

阅读全文 »
0%