iT邦幫忙

1

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

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

https://ithelp.ithome.com.tw/upload/images/20200714/20126597LpwDgfnDXC.jpg

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

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

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

看更多先前的討論...收起先前的討論...
送回後端用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版本可以在前端做運算,但是不論在前端或後端做,要自動辨識哪些區域要處理是最困難的部分。這些地方可以用人工代替的話,會比較可行。

2 個回答

0
咖咖拉
iT邦研究生 5 級 ‧ 2020-07-14 15:50:46

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

不然直接PS重畫

2
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

功能:

  1. 選擇一個jpg檔 (其他格式可以從code改),他會顯示在頁面
  2. 用滑鼠選擇要修改的區域
  3. 這個區域就會變成灰階

內部是用CamanJS把圖片選取的部分轉灰階。但由於CamanJS提供的renderFinished事件不是在他把像素更新到canvas後才觸發,所以更新回原圖改用setTimeout來做。

只是個概念驗證,考慮還不周全,不過可以拿來參考。

感謝你
不過我已經放棄了(把文字凸顯出來)

我現在是直接用glfx.js
套銳化

opencv
我有用過
filter2d 套 Sharpen kernel

[0,-1,0],
[-1,5,-1],
[0,-1,0]

但是基本上也是都是整張圖做處理
但是沒有那個強的銳化效果

fillano iT邦超人 1 級 ‧ 2020-07-17 15:59:43 檢舉

哈哈,我只是一時心血來潮,然後剛好有空XD

最近在考慮做完全前端處理的pptx播放器,方法類似,現在只做了zip檔案格式剖析功能...

我要發表回答

立即登入回答