« »

Làm cách nào để chuyển một ảnh sang chế độ đen trắng? Đơn giản là chúng ta dùng một bộ lọc của Photoshop. Nhưng nếu muốn chuyển trực tiếp trên trang web thì làm sao? Cũng đơn giản là dùng một bộ lọc, bởi Adobe đã phát hành công cụ Photoshop trực tuyến để chỉnh sửa ảnh đơn giản, hoặc dùng bất kì công cụ chỉnh sửa ảnh trực tuyến khác.

Nhưng đây không phải là đề tài mà [email protected] muốn đề cập. Chủ đề mà [email protected] muốn nói đến là một trình chuyển đổi ảnh sang chế độ đen trắng đơn giản dùng JavaScript. Bạn hãy xem thử hiệu ứng này để biết cách nó hoạt động ra sao.

Nhãn: chuyển đổi ảnh, trắng đen, chế độ đen trắng, bộ lọc, Photoshop, Adobe, công cụ Photoshop trực tuyến, chỉnh sửa ảnh trực tuyến, trình chuyển đổi

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
Files
JavaScript
HTML
In

Copy All x2

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#toggleDesaturate').click(function(){
            var imgObj = document.getElementById('image');
            
            if($.browser.msie){
                grayscaleImageIE(imgObj);
            } else {
                imgObj.src = grayscaleImage(imgObj);
            }           
        });
    });

    function grayscaleImageIE(imgObj)
    {
        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
    }

    function grayscaleImage(imgObj)
    {
        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');
        
        var imgW = imgObj.width;
        var imgH = imgObj.height;
        canvas.width = imgW;
        canvas.height = imgH;
        
        canvasContext.drawImage(imgObj, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
        
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }
        
        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }
</script>

Copy All x2

<p>Click the button below the image to desaturate it.</p>
        
        <div>
            <p>
                <strong>Original image:</strong><br/>
                <img src="nature-1.jpg" alt="" />

            </p>           
            <p>
                <strong>Image which will be desaturated:</strong><br/>
	            <img src="nature-1.jpg" alt="" id="image" />
            </p>           
        </div>
        <form><button id="toggleDesaturate" type="button">Desaturate Image</button></form>

Lời bình (0)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ứng dụng AI Video.com
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản

chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn

Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI

chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn

Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ

GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án

iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới

Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la

Cool Domains for Sale!

ChainTutor.com chatGPT2.fun JavaScriptBank.com system.money Dall-E-OpenAI.com CryptoKD.com war.money gomymobi.com MetaTru.com gomymobi.com lend.services CreditCard.rip GrokUN.com AI-Trading-Bot.com index.services pornID.net ABP3.com ApexBTC.com gomy.mobi CTRCoin.com javascriptON.com chatGPTaz.com XMQV.com eChainBank.com ZWVQ.com chatGPT4.win AIvideo-app.com gomy.mobi hearf.com Card.rip ChatTotal.com

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

19/11/2010
Mufti Ali [more]
8,752
0
0
0
0.04 KBytes

Chuyển đổi ảnh sang trắng đen với JavaScript - JID: 2487 - Ngôn ngữ: tiếng Việt

0/5 0 lượt đánh giá / 8,752 lượt xem / 0 lời bình 19/11/2010 ...Chuyển đổi ảnh sang trắng đen với JavaScript - JID: 2487 - Chuyển đổi ảnh sang trắng đen với JavaScript - Ngôn ngữ: tiếng Việt

Hãy là thành viên đầu tiên làm điều này

hoamoclan2703