# qt.base64-images-analyzer

**Repository Path**: zinface/qt.base64-images-analyzer

## Basic Information

- **Project Name**: qt.base64-images-analyzer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-18
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Base64图片分析工具

- 效果图

    ![alt text](assets/image.png)


- 数据格式

    ```
    data:image/png;base64,iVBORw0KGgoAAAANSUhEU....
    ```

- 灵感来源

    一个设计网页：https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

    进入浏览器调试模式，使用了以下步骤

    ```js
    // 网页中有许多 canvas 绘制的图片
    document.querySelectorAll('canvas').forEach((x)=>{console.log(x)})

    // 我发现每个都可以转成 base64 数据
    document.querySelectorAll('canvas').forEach((x)=>{console.log(x.toDataURL('image/png'))})

    // 我想将其制作成数据集
    data = ''
    document.querySelectorAll('canvas').forEach((x)=>{data += x.toDataURL('image/png') + '\n'})

    // 我需要一个灵活的对象进行包装
    blob = new Blob([data], {type: 'text/plain'})

    // 我需要一个简的操作进行创建 "下载" 的方式
    v = document.createElement('a')
    v.href = window.URL.createObjectURL(blob)
    v.download = 'data.txt'

    // 最后点击下载
    v.click()
    ```

    Chrome 控制台下可能会提示：请在下方输入"允许粘贴"，然后按 Enter 键允许粘贴。


- 提供标签操作用于复制到用户剪贴板上

    ```js
    // 在这个页面的所有小节上，为每个种类下增加一个显示 link 字符的小标签
    document.querySelector("#HMSymbols > div > main > div.main-list-wrap > div > div").getElementsByTagName('section').forEach(s => {
        let v = document.createElement('a');
        v.text = 'link';

        // 对标签添加 click 事件，当点击 link 时，就会收集这个小节下所有的 canvas 对象的 base64 数据
        v.addEventListener('click', () => {
            let data = '';
            s.getElementsByTagName('canvas').forEach(x => {
                data += x.toDataURL() + '\n';
            });

            // 并最终模拟出，由用户控制的剪贴板调用逻辑，将数据直接复制到用户的剪贴板上
            window.navigator.clipboard.writeText(data)
                .then(() => {
                    console.log('copied!')
                }).catch(err => {
                    console.error('fail:', err)
                });
        });
        s.appendChild(v)
    })
    ```