js将图片转字符图

最新推荐文章于 2024-05-17 13:52:13 发布

AI麥爾

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.4k

点赞数 5

文章标签： javascript 前端 c++

本文链接：https://blog.csdn.net/weixin_45435140/article/details/126759768

版权

该文正主要介绍如何获取 c++如何把一张图片打印到控制台中？中所需要的图片颜色数据。如果你不需要理解实现过程，只想要拿到数据，请看获取图片颜色数据步骤。

效果演示

在这里插入图片描述

思路

主要思路是这样的：

上传图片
将图片绘制到canvas中

// 获取dom
const inpFile = document.querySelector('#file') // 文件上传
const canvas = document.querySelector('#canvas') // canvas
const btnRun = document.querySelector('#run') // 生成字符图按钮
const divShow = document.querySelector('#show') // 展示区域
const txtArrData = document.querySelector('#arrData') // 图片颜色数据数组内容
const spanInfo = document.querySelector('#info') // 图片信息
// 初始化canvas
const canvasSize = 50 // 画布宽高
canvas.width = canvas.height = canvasSize // 设置画布宽高
const ctx = canvas.getContext('2d')
// 选中图片后
let imgWidth, imgHeight
inpFile.addEventListener('change', e => {
    const img = new Image() // 创建图片对象
    img.src = URL.createObjectURL(e.target.files[0]) // 拿到图片文件
    img.onload = () => {
        let scale = 0, width = img.width, height = img.height
        if (width >= height) { // 等比例缩放图片
            scale = canvasSize / width
        } else {
            scale = canvasSize / height
        }
        ctx.clearRect(0, 0, canvasSize, canvasSize) // 清除画布
        imgWidth = parseInt(width * scale) // 设置全局变量图片宽度
        imgHeight = parseInt(height * scale) // 设置全局变量图片高度
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight) // 将图片画到画布中
    }
})

用getImageData拿到图片像素点的rgb色
生成字符图的html文本，其中每一个像素点对应着一个span元素，并用像素点的rgb值设置span元素的color样式
将内容添加到页面中

// 生成字符图时
btnRun.addEventListener('click', () => {
    divShow.style.width = 20 * imgWidth + 'px' // 设置字符图展示区的宽度
    let html = '', arrData = '{', arr = []
    for (let i = 0; i < imgHeight; i++) { // 遍历行
        html += `<div>`
        arrData += `{`
        let _arr = []
        for (let j = 0; j < imgWidth; j++) { // 遍历列
            let [r, g, b] = ctx.getImageData(j, i, 1, 1).data // 获取1像素的颜色rgb值
            // 拼接一个内容为 0 的span元素，为了更完整的还原图片，一个像素重复两次
            html += `<span style="color: rgb(${r}, ${g}, ${b})">0</span><span style="color: rgb(${r}, ${g}, ${b})">0</span>`
            if (j === 0) {
                arrData += `${r}, ${g}, ${b}, ${r}, ${g}, ${b}`
            } else {
                arrData += `, ${r}, ${g}, ${b}, ${r}, ${g}, ${b}`
            }
            _arr.push(r, g, b, r, g, b)
        }
        if (i < imgHeight - 1) {
            arrData += `}, \n`
        } else {
            arrData += `} \n`
        }
        html += `</div>`
        arr.push(_arr)
    }
    console.log(arr)

    arrData += `};`
    txtArrData.value = arrData
    divShow.innerHTML = html
    spanInfo.innerHTML = `共 ${imgHeight} 行， ${imgWidth * 3 * 2} 列。`
    // txtArrData.select()
    // document.execCommand('copy')
    navigator.clipboard.writeText(arrData) // 将数组数据复制到剪贴板中
})

完整代码

在 index.html 中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转字符</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 8px;
        }

        canvas {
            border: 1px solid #000;
        }

        .show {
            display: flex;
            flex-direction: column;
            background-color: #000;
        }

        .show div {
            display: flex;
            flex-direction: row;
        }

        .show span {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="50" height="50"></canvas>
    <input type="file" id="file">
    <button id="run">生成字符图</button>
    <span id="info"></span>
    <div class="show" id="show"></div>
    <textarea id="arrData" cols="150" rows="50"></textarea>
    <script>
        // 获取dom
        const inpFile = document.querySelector('#file')
        const canvas = document.querySelector('#canvas')
        const btnRun = document.querySelector('#run')
        const divShow = document.querySelector('#show')
        const txtArrData = document.querySelector('#arrData')
        const spanInfo = document.querySelector('#info')
        // 初始化canvas
        const canvasSize = 50
        canvas.width = canvas.height = canvasSize
        const ctx = canvas.getContext('2d')
        // 选中图片后
        let imgWidth, imgHeight
        inpFile.addEventListener('change', e => {
            const img = new Image() // 创建图片对象
            img.src = URL.createObjectURL(e.target.files[0]) // 拿到图片文件
            img.onload = () => {
                let scale = 0, width = img.width, height = img.height
                if (width >= height) { // 等比例缩放图片
                    scale = canvasSize / width
                } else {
                    scale = canvasSize / height
                }
                ctx.clearRect(0, 0, canvasSize, canvasSize) // 清除画布
                imgWidth = parseInt(width * scale) // 设置全局变量图片宽度
                imgHeight = parseInt(height * scale) // 设置全局变量图片高度
                ctx.drawImage(img, 0, 0, imgWidth, imgHeight) // 将图片画到画布中
            }
        })
        // 生成字符图时
        btnRun.addEventListener('click', () => {
            divShow.style.width = 20 * imgWidth + 'px' // 设置字符图展示区的宽度
            let html = '', arrData = '{', arr = []
            for (let i = 0; i < imgHeight; i++) { // 遍历行
                html += `<div>`
                arrData += `{`
                let _arr = []
                for (let j = 0; j < imgWidth; j++) { // 遍历列
                    let [r, g, b] = ctx.getImageData(j, i, 1, 1).data // 获取1像素的颜色rgb值
                    html += `<span style="color: rgb(${r}, ${g}, ${b})">0</span><span style="color: rgb(${r}, ${g}, ${b})">0</span>` // 拼接一个内容为 0 的span元素
                    if (j === 0) {
                        arrData += `${r}, ${g}, ${b}, ${r}, ${g}, ${b}`
                    } else {
                        arrData += `, ${r}, ${g}, ${b}, ${r}, ${g}, ${b}`
                    }
                    _arr.push(r, g, b, r, g, b)
                }
                if (i < imgHeight - 1) {
                    arrData += `}, \n`
                } else {
                    arrData += `} \n`
                }
                html += `</div>`
                arr.push(_arr)
            }
            console.log(arr)

            arrData += `};`
            txtArrData.value = arrData
            divShow.innerHTML = html
            spanInfo.innerHTML = `共 ${imgHeight} 行， ${imgWidth * 3 * 2} 列。`
            // txtArrData.select()
            // document.execCommand('copy')
            navigator.clipboard.writeText(arrData) // 将数组数据复制到剪贴板中
        })
    </script>
</body>

</html>