현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

Javascript(ECMAscript)로 이미지 포멧/사이즈 변경이 가능한가요?

aqwerf의 이미지
글쓴이: aqwerf / 작성시간: 화, 2007/02/13 - 4:02오후

안녕하세요.

웹서버가 내장된 임베디드 단말기인데, 사용자가 웹 브라우저를 이용하여 이미지를 올릴 때 format을 변경하고, resizing을 해서 저장해 두어야 합니다.
문제는 파일 크기가 작은 경우에는 단말에서 컨버팅이 가능하지만, 단말기 자체의 메모리 용량이 작기 때문에 큰 이미지의 경우 방법이 없다는 것입니다. 그래서 웹브라우저 상에서 이와 같은 일을 처리하는 것을 생각중인데요...

따로 PC용 프로그램을 만들지 않고, Javascript(ECMAscript)를 이용하여 다음과 같은 기능의 수행이 가능한가요?
- PC에 있는 그림 파일을 사용자가 파일선택창에서 선택하면 웹서버에 보내지 않고 바로 브라우저 화면에 표시 하기
(파일을 웹서버에 올리기전 미리보기 같은 기능이겠죠)
- 화면에 표시된 그림의 크기를 원하는 size로 줄이기
- 줄인 그림의 pixel 단위 칼라값이나 BMP등의 형태로 바꾸어 웹서버에 전송하기

이런 기능을 자바스크립트만 사용하여서도 구현이 가능한가요?

Forums: 
프로그래밍 QnA
익명사용자의 이미지

글쓴이: 익명사용자 / 작성시간: 화, 2007/02/13 - 4:26오후

정확한 답은 아닙니다. phpschool.com에서 물어보시는게 빠를수도 있는데요,
제가 알고있는한 자바스크립트로는 클라이언트의 어떤 장치도 접근할 수 없는걸로 알고 있습니다.
만약 그런것이 가능했다면 컴퓨터 포맷하는 자스등등이 날고 기었을테니까요. 최소한의 이미지 크기 알아오는 것도 불가능하다고
알고 있습니다.

aqwerf의 이미지

글쓴이: aqwerf / 작성시간: 화, 2007/02/13 - 5:02오후

phpschool에도 물어봐야 겠군요. ^^

자바스크립트로 클라이언트 장치를 임의로 접근하려는 것은 아니고, 파일열기창에서 파일을 선택한 경우 이와 같은 처리를 하려고 합니다.

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

글쓴이: 7339989b62a014c... / 작성시간: 화, 2007/02/13 - 5:05오후

그게 결국 클라이언트 장치에 접근하는 것이지요.
물론 ActiveX 등을 사용하면 되기야 하겠지만, 클라이언트 상에서 할 수 있는 방법은 없지 싶네요.

hey의 이미지

글쓴이: hey / 작성시간: 화, 2007/02/13 - 6:19오후

임베디드 웹 서버가 아니라 다른 서버로 보냈다가 리사이징 된 이미지를 돌려받아서 그걸 임베디드 서버로 보내면 되지 않을까요? ^^
(넌센스 대답인가 .... )

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


hey의 이미지

글쓴이: hey / 작성시간: 화, 2007/02/13 - 6:22오후

로컬 이미지 파일을 읽을 수는 있지 않나요? 이미지 소스를 'file://' 경로로 해서 읽어들인 다음에 수정해서 base64 등으로 인코딩 해서 서버에 보내면 되지 않을까 하는 웃긴 생각을 잠깐.. ^^ ; 이미지 파일을 바이너리로 읽을 수가 없나 ;;

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


bootmeta의 이미지

글쓴이: bootmeta / 작성시간: 수, 2007/02/14 - 2:35오후

샛길로 좀 간 느낌이지만 혹시 client가 플래쉬를 쓴다면 해결방법이 있지 않을까하는 생각이 듭니다.

bootmeta의 이미지

글쓴이: bootmeta / 작성시간: 수, 2007/02/14 - 2:36오후

잡 생각이라고 생각해주세요. ^^;

송효진의 이미지

글쓴이: 송효진 / 작성시간: 수, 2007/02/14 - 2:39오후

미리보기 가능합니다.
input type="file" 의 value 값을 img src 에 넣어주면 보이죠.
스크립트로 크기변경은 img 태그의 크기변경정도 밖에 안됩니다.
파일의 내용을 읽을 수 없기 때문에 변환하는것을 작성할 수도 없습니다.

emerge money

https://xenosi.de/

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

글쓴이: 7339989b62a014c... / 작성시간: 수, 2007/02/14 - 9:41오후

파이어폭스에서는 로컬 이미지 파일을 표시하는 것조차 되지 않더군요. (참고로 저는 FF 2.0.0.1을 사용합니다.)

hey의 이미지

글쓴이: hey / 작성시간: 수, 2007/02/14 - 9:56오후

그럼 역시 다른 서버로 보내는 방법밖엔 ... ^^ ;

이미지 관련 Open API를 제공하는 서비스가 있으면 어떨까요? 돈이 안 되니 쓸모가 없으려나?

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.