下载

直访问 保存

https://docs.opencv.org/4.5.1/opencv.js

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello OpenCV.js</title>
        <style type="text/css">
            .inputoutput{
                float: left;
                margin: 10px;
            }
        </style>
        <script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
        <script async src="js_canny.js"  type="text/javascript"></script>
    </head>
    <body>
        <h2>Hello OpenCV.js</h2>
        <p id="status">OpenCV.js is loading...</p>
        <div>
            <div class="inputoutput">
                <img id="imageSrc" alt="No Image" />
                <div class="caption">
                    imageSrc
                    <input type="file" id="fileInput" name="file" />
                </div>
            </div>
            <div class="inputoutput">
                <canvas id="canvasOutput" ></canvas>
                <div class="caption">canvasOutput</div>
            </div>
        </div>
        
        
    </body>
</html>

js

let imgElement = document.getElementById('imageSrc');

let inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', (e) => {
    imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);


imgElement.onload = function() {
    let mat = cv.imread(imgElement);
    mat = face2(mat, 4, 3);
    cv.imshow('canvasOutput', mat);
    mat.delete();
};

function onOpenCvReady() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}

function face2(image, value1, value2)
{
    let src = cv.imread(imgElement);
    let dst = new cv.Mat();
    cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0);
    // You can try more different parameters
    cv.Canny(src, dst, 50, 100, 3, false);
    cv.imshow('canvasOutput', dst);
    src.delete(); dst.delete();

}
# javascript # 前端 # 开发语言
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

程序员必学！大模型五大核心技术(MCP/Agent/RAG/RPA/A2A)全解析（收藏版）

avatar 讯飞AI开发者社区
cover

38_多模态模型：CLIP的视觉-语言对齐_深度解析

avatar 讯飞AI开发者社区

自然语言处理（NLP）基础

苹果”可以指一种水果，也可能指Apple 公司；“我今天早上没吃饭”中的“没”是否表示“完全没有”需要结合上下文。NLP 的任务就是让计算机能够“读懂”这些文字和语音，抽取其中的语义信息，从而与人类进行自然交流。简单来说，NLP 是计算机科学、人工智能与语言学的交叉学科。自然语言处理（NLP）让计算机能够理解和生成自然语言，是人工智能最贴近人类日常生活的技术之一。随着深度学习和大模型的发展，NLP

avatar 讯飞AI开发者社区