使用opencv.js将图片转成线条

1.想把一张图片去掉彩色，只保留其线条轮廓

2.OpenCV简介：pen Source Computer Vision Library。OpenCV是一个（开源）发行的跨平台计算机视觉库，可以运行在Linux、Windows和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。

3.本篇文章写了一个demo，简单介绍，选择图片，使其转化为线条图

首先引入<script src='https://docs.opencv.org/4.5.5/opencv.js'></script>

                function getCannyEdges(imagePath) {
                    return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.src = imagePath;
                    img.onload = function () {
                    const imageInput = cv.imread(img);

                    // 将图像转换为灰度图像
                    const gray = new cv.Mat();
                    cv.cvtColor(imageInput, gray, cv.COLOR_RGBA2GRAY);
                    
                    // 应用平滑滤波器
                    // const smoothed = new cv.Mat();
                    // cv.medianBlur(gray, smoothed, 5);  // 中值滤波器，内核大小为3

                    // 使用Canny边缘检测算法
                    const edges = new cv.Mat();
                    cv.Canny(gray, edges, 50, 150);

                    // 创建透明背景图像
                    const transparentOutput = new cv.Mat(imageInput.rows, imageInput.cols, cv.CV_8UC4);
                    transparentOutput.setTo([0, 0, 0, 0]);  // 设置完全透明的背景

                    // 将黑色边缘线条叠加到透明背景上
                    for (let i = 0; i < edges.rows; i++) {
                        for (let j = 0; j < edges.cols; j++) {
                        const edgePixel = edges.ucharPtr(i, j);
                        const outputPixel = transparentOutput.ucharPtr(i, j);
                        if (edgePixel[0] === 255) {  // 黑色边缘线条
                            outputPixel[0] = 0;      // 设置线条为黑色
                            outputPixel[1] = 0;
                            outputPixel[2] = 0;
                            outputPixel[3] = 255;    // 设置不透明度为255，完全不透明
                        }
                        }
                    }

                    // 放大一倍
                    const outputWidth = transparentOutput.cols * 1;
                    const outputHeight = transparentOutput.rows * 1;
                    const enlargedOutput = new cv.Mat();
                    cv.resize(transparentOutput, enlargedOutput, new cv.Size(outputWidth, outputHeight), 0, 0, cv.INTER_LINEAR);

                    // 在Canvas上显示边缘检测结果
                    const canvas = document.createElement('canvas');
                    canvas.width = transparentOutput.cols;
                    canvas.height = transparentOutput.rows;

                    // 将透明背景图像复制到Canvas中
                    cv.imshow(canvas, enlargedOutput);

                    // 释放内存
                    imageInput.delete();
                    gray.delete();
                    edges.delete();
                    transparentOutput.delete();
                    enlargedOutput.delete();

                    // 获取Canvas中的ImageData并返回
                    const ctx = canvas.getContext('2d');
                    ctx.scale(2, 2)
                    const outputData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    resolve(outputData);
                    };

                    img.onerror = reject;
                    // img.src = imagePath;
                });
            }

            var fileDoc = document.getElementById('file'),
            previewImg = document.querySelector('img');
            fileDoc.addEventListener('change', function(e) {
                var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.addEventListener('load',function() {
                    previewImg.src = reader.result;
                    getCannyEdges(reader.result)
                    .then((outputData) => {
                        // 在Canvas上显示或保存边缘检测结果
                        const canvas = document.createElement('canvas');
                        canvas.width = outputData.width;
                        canvas.height = outputData.height;
                        const ctx = canvas.getContext('2d');
                        ctx.putImageData(outputData, 0, 0);
                        const image = canvas.toDataURL("image/png")
                        var img = document.createElement("img");
                        img.src = image;
                        document.body.appendChild(img);
                    })
                    .catch((error) => {
                        console.error(error);
                    });
                }, false)
            })

使用OpenCV还可以对图片进行其他转化，比如图片置灰，旋转，抠图等