질문1) 위에처럼 html 을 구성할 경우 li 에 있는 이미지와 하단 선사이에(ul에 지정) 약 4px 정도 공백이 생깁니다.

li 에 직접 height 를 주면 해결되긴 한데 height 를 주지 않고 border-bottom 이 딱 붙게 할 수 있는 방법이 있을까요?

 

답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)

이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는

<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.

 

질문2) 위의 li 태그에서 style 을 삭제하고 스타일에 img {vertical-align: middle;}

을 추가하면 li에 들어있는 이미지가 border-bottom위로 1px 내려 옵니다.

ul에 height 를 지정하면 정상적으로 보이나 파폭에서 1px 띄어져서 보이네요.

어떤 방법으로 해결할 수 있을까요?

 

답변2) 질문 2번 문제는 vertical-align 문제가 아닌거 같습니다.

일단 li 태그에 float: left;가 됨으로써 ul의 높이값이 사라지기 때문에 검은색 선이 위로 올라가게 됩니다.

하지만 IE에서는 정상으로 나오죠. IE 버그입니다.

 

그럼 해결 방안을 드리자면

아래와 같은 소스가 될듯 싶네요.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title> new document </title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul, li, dl, dt, dd {list-style: none;}
ul {width: 500px; border-bottom: 2px #000000 solid; overflow: auto; height: 100%;}
ul li { float: left;border: 1px solid #f18;}
ul li img {vertical-align: top;border: 0;}
</style>
<body>
<ul>
 <li><img src="test.gif"  /></li>
 <li><img src="test.gif" /></li>
</ul>
</body>
</html>

 

 

질문 1은 영문의 아래첨자의 의한 문제이고

질문 2번은 CSS의 float 속성의 의한 것입니다.

자세한 설명을 하자면 단순히 이 소스를 가지고 이해 시켜드리기가 어렵네요.

답변 주시면 자세한 설명 해 드리겠습니다.

HTML 및 CSS속성은 http://trio.co.kr/ 찾아보심 될듯 싶습니다

Posted by Finebe
,



스캔을 뜬 책을 하나 구했는데 이것을 텍스트로 전환하면 보기 더 편하지 않을까 해서,

그 방법에 대해 여러가지로 찾아보게 되었다. 역시나 나의 고민은 새로운게 아니였다.

수많은 프로그램과 사이트가 제공되고 있었다. 그 내용에 대한 정리를 해본다.

 

이미지에서 텍스트를 출력하는 기술은 OCR(Optional Character Recongnition) 이라고 한다.

이런 기능을 제공하는 무료프로그램과 사이트는 많이 있다.

 

한국인이 만든 무료 OCR 프로그램 사이트 :

http://home.megapass.co.kr/~woosjung/Product_JOCR.html

http://softi.co.uk/freeocr.htm

위에서 제시한 사이트는 프로그램을 다운받아서 사용하지만 네이버에서 제공하는 OCR

웹상에서 기능을 사용할수 있다. 개인적으로 제일 편리하고 좋은 것 같다.

http://t.lab.naver.com/ocr/

이미지 올리기 버튼을 클릭하여 파일을 올리면 이미지 적합성 여부와 인식률에 대한 정보가

나오게된다

이미지 문자 인식실행을 하게 되면 아래 화면과 같이 추출한 문자열이 텍스트 박스에 나오게된다

그리고 텍스트 파일로 저장할수 있다

MS Office 2003 에서 제공하는 텍스트 전환기능

Microsoft Office Document Imaging 실행한다

프로그램이 실행되면 스캔한 이미지나 확장자가 tiff, tif, mid 이미지 파일을 연다.

그러면 왼쪽에 축소된 이미지와 오른쪽에 확대된 이미지를 볼수 있을것이다

다음은 이미지에 들어있는 텍스트를 추출해본다.

도구 > OCR을 사용하여 텍스트 인식을 클릭한다

만약 설치 되지 않았으면 자동으로 설치해준다. 다 되었으면 드래그를 해보자. 텍스트 추출이

된 것은 그림과 같이 선택이 될것이다. 이것을 복사해서 쓰면되고 word 를 생성해서 보내고

싶다면 도구 > Word 로 텍스트 보내기 메뉴를 선택한뒤 창에 정보를 입력하고 저장하면된다

아래 그림은 워드로 추출한 내용인데 원본그림과 비교해보면 글자에 언더바가 있는부분은

추출을 못했다. 이 부분은 인식을 하지 못하나 보다

MS Office 2007 에서 제공하는 텍스트 전환기능

별도의 플러그인만 설치해주면 바로 PPT 파일 등을 다른이름으로 저장할 때 PDF 형태로 변환이 하다. 플러그인을 설치하기 위해서는 아래 주소에 가서 다운받는다.

http://www.microsoft.com/downloads/details.aspx?FamilyID=4D951911-3E7E-4AE6-B059-A2E79ED87041&displaylang=en&Hash=VM5qPiVObmsfUbk6fuPsgQfCSxW8qbU6M2cV4ht1%2bRWrQpeafeNQIpDuqlJV5GqeknkrT7yJ4yFv9AHX5IEDhQ%3d%3d



최고의 OCR 성능으로 이름 있는 러시아 ABBYY사에서 한글을 포함한 전세계 186개 언어를 인식할 수 있는 OCR 소프트웨어인 FineReader 10 Professional Edition을 국내 총판 협력사인 디오텍을 통해 출시했습니다. 시험판 다운로드는 http://abbyy.co.kr/data/abbyy/product/finereader.asp 입니다.


출처: http://mainia.tistory.com/439 좋은 정보감사합니다.
Posted by Finebe
,


여러개의 이미지 업로드할 수 있는 소스입니다.
참고사이트는
http://codeigniter.com/forums/viewthread/80610/
http://codeigniter.com/forums/viewthread/129011/

Controller

 
class Upload extends Controller {

    function Upload()
    {
        parent::Controller();
        $this->load->helper(array('form','url','file'));
        
    
    }
    
    function index()
    {
        
        $this->load->view('upload/upload_index'); //Upload Form
        
    }

    function picupload()
    {
        //Load Model
        $this->load->model('Process_image');

        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']    = '2048'; //2 meg


        $this->load->library('upload');

        foreach($_FILES as $key => $value)
        {
            if( ! empty($key['name']))
            {
                $this->upload->initialize($config);
        
                if ( ! $this->upload->do_upload($key))
                {
                    $errors[] = $this->upload->display_errors();
                    
                }    
                else
                {

                    $this->Process_image->process_pic();

                }
             }
        
        }
        
        
        $data['success'] = 'Thank You, Files Upladed!';

        $this->load->view('upload/upload_pictures', $data); //Picture Upload View

        
        
        
    } 


Model
class Process_image extends Model {
    
    function Process_image()
    {
        parent::Model();
        
        $this->load->library('image_lib');
        //Generate random Activation code
        
        function generate_code($length = 10){
    
                if ($length <= 0)
                {
                    return false;
                }
            
                $code = "";
                $chars = "abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
                srand((double)microtime() * 1000000);
                for ($i = 0; $i < $length; $i++)
                {
                    $code = $code . substr($chars, rand() % strlen($chars), 1);
                }
                return $code;
            
                }

    }

function process_pic()
    {   
        //Connect to database
        $this->load->database();
        
        //Get File Data Info
        $uploads = array($this->upload->data());
        
        $this->load->library('image_lib');

        //Move Files To User Folder
        foreach($uploads as $key[] => $value)
        {
            
                        //Gen Random code for new file name
            $randomcode = generate_code(12);
            
            $newimagename = $randomcode.$value['file_ext'];
            
            //Creat Thumbnail
            $config['image_library'] = 'GD2';
            $config['source_image'] = $value['full_path'];
            $config['create_thumb'] = TRUE;
            $config['thumb_marker'] = '_tn';
            $config['master_dim'] = 'width';
            $config['quality'] = 75;
            $config['maintain_ratio'] = TRUE;
            $config['width'] = 175;
            $config['height'] = 175;
            $config['new_image'] = '/pictures/'.$newimagename;

            //$this->image_lib->clear();
            $this->image_lib->initialize($config);
            //$this->load->library('image_lib', $config);
            $this->image_lib->resize();
            
            //Move Uploaded Files with NEW Random name
            rename($value['full_path'],'/pictures/'.$newimagename);
            
            //Make Some Variables for Database
            $imagename = $newimagename;
            $thumbnail = $randomcode.'_tn'.$value['file_ext'];
            $filesize = $value['file_size'];
            $width = $value['image_width'];
            $height = $value['image_height'];
            $timestamp = time();
            
            //Add Pic Info To Database
            $this->db->set('imagename', $imagename);
            $this->db->set('thumbnail', $thumbnail);
            $this->db->set('filesize', $filesize);
            $this->db->set('width', $width);
            $this->db->set('height', $height);
            $this->db->set('timestamp', $timestamp);
            
            //Insert Info Into Database
            $this->db->insert('pictures');

        }
        
        
        
    }


View


Table
CREATE TABLE IF NOT EXISTS `img_pictures` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `imagename` varchar(100) NOT NULL,
  `thumbnail` varchar(100) DEFAULT NULL,
  `folder` varchar(255) DEFAULT NULL,
  `filesize` int(11) NOT NULL,
  `width` int(11) NOT NULL,
  `height` int(11) NOT NULL,
  `thumb_width` int(11) DEFAULT NULL,
  `thumb_height` int(11) DEFAULT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 
Posted by Finebe
,