canvas 图片处理

最新推荐文章于 2024-07-14 12:56:18 发布

web修理工

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量79

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/121020436

版权

javascript 前端 es6

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏


<!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>Document</title>
</head>

<body>
    canvas 参考的api https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
    <script>
        // 加载龙的图片
        let img = new Image();
        img.crossOrigin = "";
        img.src = "http://127.0.0.1:3000/";
        img.onload = () => {
            console.log(img.width);

            // 把图片绘制到canvas里
            const draw = () => {
                const canvas = document.createElement("canvas");
                canvas.width = img.width || 300;
                canvas.height = img.height;
                const ctx = canvas.getContext("2d");

                ctx.drawImage(img, 0, 0, img.width, img.height);


                ctx.fillStyle = 'green';
                ctx.fillRect(img.width / 2, img.width / 2, 10, 10);

                // 导出图片
                let image = new Image();
                image.src = canvas.toDataURL("image/png")
                image.onload = function () {
                    document.body.appendChild(image)
                }

                // 获取像素数据
                const imgData = ctx.getImageData(0, 0, img.width, img.height).data;
                // 拼接字符
                join(imgData);

            };
            draw();
        };

        // 把像素数据拼接成字符
        const join = (data) => {
            let gap = 10;
            let str = "";
            for (let h = 0; h < img.height; h += gap) {
                str += "\n";
                for (let w = 0; w < img.width; w += gap) {
                    str += " "; // 因为字符的高度普遍都比其宽度大，所以额外添加一个空字符平衡一下，否则最终的图形会感觉被拉高了
                    let pos = (h * img.width + w) * 4;
                    let r = data[pos];
                    let g = data[pos + 1];
                    let b = data[pos + 2];
                    // rgb转换成yuv格式，根据y（亮度）来判断显示什么字符
                    let y = r * 0.299 + g * 0.578 + b * 0.114;
                    if (y >= 190) {
                        // 浅色
                        str += "*";
                    } else {
                        // 深色
                        str += "#";
                    }
                }
            }
            console.log(str);
        };
    </script>
</body>

</html>

网路图片


var http = require("http");
//文件处理
var fs = require("fs");
// req 路由监听空 res 上下文函数
var server = http.createServer((req, res) => {
  // 公共请求头
  res.writeHead(200, {
    // "Content-Type": "text/html;chaset=UTF-8",
    "Content-Type": "image/png",
    //设置允许跨域的域名，*代表允许任意域名跨域
    "Access-Control-Allow-Origin": "*",
  });

  // 路由监控
  if (req.url == "/fang") {
    res.end("fang");
  } else if (req.url == "/yuan") {
    res.end("yuan");
  } else {
    // res.end("404");
    // res.end("<a href='/fang'>fang</a><br><a href='yuan'>yuan</a>");
    // fs.readFile(path,’binary’, function (err, file) { })的参数多了一个’binary’，以二进制流的方式读取。
    // res.write(file,’binary’); response也以二进制流的方式向浏览器输出。
    fs.readFile("./sprite.png", "binary", function (err, file) {
      if (err) {
        console.log(err);
        return;
      } else {
        res.write(file, "binary");
        res.end();
      }
    });
  }
});
server.listen(3000, "127.0.0.1", (res) => {
  console.log("http://127.0.0.1:3000/");
});

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas 图片处理

<!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" /> <titl.
复制链接

扫一扫