2009-12-03 13 views
16

내 친구와 나는 웹 상점을 만들 계획이 있습니다. 가게의 주요 특징 중 하나는 고객이 자신의 물건을 디자인 할 수있는 능력입니다. 내 친구는 polyvore website을 예로 듭니다.자바 스크립트 이미지 편집기 라이브러리

위 링크는 편집기 페이지를 가리 킵니다. polyvore에서 고객은 페이지의 왼쪽에있는 항목을 오른쪽에서 '캔버스'로 드래그 앤 드롭 할 수 있습니다. 이미지에는 크기 조정, 회전 및 이동을위한 간단한 핸들러가 있습니다.

이것은 우리가 달성하고 싶은 주요 기능입니다. 이러한 기능을 제공하는 무료 JavaScript 라이브러리가 있는지 알고 싶습니다. 목표는 온라인 Photoshop 응용 프로그램과 같은 것을 만들지 않기 때문에 우리는 너무 많은 사전 작업이 필요하지 않습니다. polyvore 편집기에는 필요한 대부분의 기능이 있습니다.

+0

참고로 jQuery 및 jQuery-UI를 사용하는 것이 더 좋습니다. 그러나 다른 프레임 워크에 대한 기회를 막지는 못합니다. 나는 계속 찾고있는 동안 나는 아직도 더 많은 답변을 기다리고있다. 캔버스를 사용하는 것도 고려해 볼 수 있습니다. 튜토리얼 링크가 좋으면 여기를 공유하여 무료 튜토리얼에 투표 해 보겠습니다. 감사합니다. –

+0

성공 했습니까? 나는 우리가 찾은 것 또는 결국 사용했던 것을 아는 데 관심이 있습니다. 나는 비슷한 앱을 개발 중이고 jQuery에 기대고 있지만 이미 완료된 것을 재 작업하는 것을 싫어한다. 고마워! – TomO

+0

안녕하세요. 프로젝트 자체가 보류되어 라이브러리를 다시 검색하지 않았습니다. 아래 답변에서 제안 된 라이브러리를 사용해보십시오. –

답변

6

Pixastic에는 Canvas를 사용하는 간단한 자바 스크립트 이미지 편집기가 있습니다.

+3

매우 낮고 간단한 자바 스크립트 이미지 편집기 : http://code.google.com/p/svg-edit/ (데모를보십시오) – Kartoch

+1

http : //editor.pixastic.com은 캔버스를 사용하지만 IE –

+1

에서는 지원되지 않지만 프로젝트는 취소되지만 pixastic는 유망한 것으로 보입니다. 어쩌면 나중에 다른 프로젝트에서 시도해 보겠습니다. –

1

완전한 기능을 갖춘 JavaScript 기반 프레임 워크 (예 : Cappuccino 또는 SproutCore)를 사용하여 앱을 개발하는 경우 이러한 종류의 간단한 이미지 조작이 간단해야합니다.

사이트 구현을 좀 더 유연하게하려면 jQuery UI 또는 Interface Elements과 같은 작은 라이브러리로 이동하십시오 (매우 불완전한 목록 - 유사한 라이브러리가 많이 있습니다).

0

이것은 완전한 대답은 아니지만 안내해야합니다. Ext-js에는 Ext.Resizable, http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable이라는 개체가 있습니다. 노드에 적용 할 수 있으며 크기를 조정할 핸들이 추가됩니다. 이것은 코어 (jsquery-like) 배포판에 존재하지 않습니다. 전체 배포판이 필요합니다.

이미지를 회전하는 것은 모든 브라우저에서 지원되지 않기 때문에 (웹킷은 CSS를 통해 회전 할 수 있기 때문에) 매우 복잡합니다. 제가 제안하는 것은 http://me.eae.net/projects/iecanvas/demo.html과 같은 크로스 브라우저 캔버스 라이브러리를 사용하여 캔버스에 그려진 이미지를 회전시킬 수 있다는 것입니다. 그러나 내가 언급 한 두 가지를 실제로 결합 할 수는 없습니다. 두 사람 모두 영감을 얻고 자신 만의 것을 내놓을 것을 제안합니다 (이미 다른 사람이 이미 도구를 찾지 않는 한).

1

당신은 암실를 사용할 수 있습니다. 웹에서 간단하고 강력한 이미지 편집기입니다. 아래 링크에서 찾을 수 있습니다. https://mattketmo.github.io/darkroomjs/

관련 문제