前端做影像處理?文字銳化?

javascript 影像處理

samdrivert 2020-07-14 15:36:12 ‧ 1806 瀏覽

分享至

具體目標是希望可以把
寫在紙上的鉛筆筆跡加深
比如是這樣的圖片

不過我不會造輪胎...
我目前試過
glfx.js和camanjs
調整sharpen
確實筆跡會變清楚

但是如果調很大讓自盡量清楚
整個畫面都會變化很大

有沒有可能在調整時讓文字外的區域
變化不要那麼大?

看更多先前的討論...收起先前的討論...

japhenchen iT邦超人 1 級 ‧ 2020-07-14 16:50:20 檢舉

送回後端用OpenCV/GDI+做文字銳化，再回傳至頁面呈現

froce iT邦大師 1 級 ‧ 2020-07-14 21:53:38 檢舉

先讓他變黑白，去雜點。

player iT邦大師 1 級 ‧ 2020-07-15 10:48:09 檢舉

javascript做影像處理?
這難度有點高耶
orz

fillano iT邦超人 1 級 ‧ 2020-07-15 11:05:05 檢舉

做出一個[選區域]的功能，然後把選擇的區域拷貝到新的canvas，做銳利化，然後拷貝回來。

fillano iT邦超人 1 級 ‧ 2020-07-15 11:07:56 檢舉

opencv有javascript版本可以在前端做運算，但是不論在前端或後端做，要自動辨識哪些區域要處理是最困難的部分。這些地方可以用人工代替的話，會比較可行。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

咖咖拉

iT邦好手 1 級 ‧ 2020-07-14 15:50:46

全部用HTML重打
比用甚麼文字銳化好多了吧

不然直接PS重畫

回應
分享
檢舉

登入發表回應

fillano

iT邦超人 1 級 ‧ 2020-07-17 10:19:39

<!doctype html>
<html>
    <head>
        <style>
            #marker {
                display: none;
                top: 0px;
                left: 0px;
                position: absolute;
                border: 2px dotted black;
                background-color: rgba(255,255,255,0.5);
                z-index: 1000;
            }
        </style>
    </head>
    <body>
        <div id="marker">&nbsp;</div>
        <div class="tool"><input type="file" id="file"/></div>
        <hr size="1" width="100%" />
        <div id="panel"></div>
        <hr size="1" width="100%" />
        <div id="working"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
        <script>
            document.getElementById('file').onchange = function(e) {
                if(this.files.length > 0) {
                    if(this.files[0].name.indexOf('.jpg') > 0) {
                        let fr = new FileReader();
                        fr.onload = function(e) {
                            let img = new Image();
                            img.onload = function(e) {
                                let elm = document.createElement('canvas');
                                let ctx = elm.getContext('2d');
                                elm.width = img.width;
                                elm.height = img.height;
                                document.getElementById('panel').append(elm);
                                ctx.drawImage(img, 0, 0);
                                let lock = false;
                                let marker = document.getElementById('marker');
                                let startX = 0;
                                let startY = 0;
                                let stopX = 0;
                                let stopY = 0;
                                let offsetX = 0;
                                let offsetY = 0;
                                elm.onmousedown = function(e) {
                                    e.preventDefault();
                                    lock = true;
                                    startX = e.pageX - 1;
                                    startY = e.pageY - 1;
                                    offsetX = e.offsetX - 1;
                                    offsetY = e.offsetY - 1;
                                    marker.style.left = startX + 'px';
                                    marker.style.top = startY + 'px';
                                    marker.style.width = '0px';
                                    marker.style.height = '0px';
                                    marker.style.display = 'block';
                                    return false;
                                };
                                elm.onmousemove = function(e) {
                                    e.preventDefault();
                                    if(lock) {
                                        marker.style.width = e.pageX - startX + 'px';
                                        marker.style.height = e.pageY - startY + 'px';
                                    }
                                    return false;
                                }
                                document.body.onmouseup = function(e) {
                                    e.preventDefault();
                                    stopX = e.pageX + 1;
                                    stopY = e.pageY + 1;
                                    let _w = stopX - startX;
                                    let _h = stopY - startY;
                                    lock = false;
                                    marker.style.display = 'none';
                                    let t = document.createElement('canvas');
                                    t.id = 'clip';
                                    t.width = _w;
                                    t.height = _h;
                                    let tg = document.getElementById('working');
                                    tg.innerHTML = '';
                                    tg.append(t);
                                    let tctx = t.getContext('2d');
                                    let imgData = ctx.getImageData(offsetX, offsetY, _w, _h);
                                    tctx.putImageData(imgData, 0, 0);
                                    Caman('#clip', function() {
                                        //將選取部分灰階
                                        this.greyscale().render();
                                        setTimeout(function() {
                                            let _im = tctx.getImageData(0, 0, _w, _h);
                                            ctx.putImageData(_im, offsetX, offsetY);
                                        }, 100);
                                    });
                                }
                            };
                            img.src = fr.result;
                        }
                        fr.readAsDataURL(this.files[0]);
                    }
                }
            }
        </script>
    </body>
</html>

https://codepen.io/hsu-ping-feng/pen/vYLVzPQ

功能：