이미지에 마크 업을 추가하려고합니다. 사용자는 텍스트, 그림 및 이미지를 추가 할 수 있습니다. 프런트 엔드에서 javascript를 사용하여이 작업을 수행하는 것이 가장 쉽다고 추측합니다. 내 질문은 최종 이미지를 저장하는 가장 쉬운 방법은 무엇입니까? 이미지를 자바 스크립트로 저장할 수 있습니까? 이미지를 직렬화하여 백엔드에 저장해야합니까? 이런 종류의 문제에 도움이되는 훌륭한 도서관이 있습니까? 매우 보편적 인 것처럼 보입니다.마크 업 이미지로 자바 스크립트 저장 및 저장
나는 이것이 열린 상태이지만, 자바 스크립트로 이미지를 조작하고 백엔드,이 경우 자바에 저장하는 데 도움이 매우 도움이 될 것입니다 알아요.
이미지를 HTML5 캔버스에로드하고 자바 스크립트를 사용하여 그 위에 그릴 수 있습니다. 사용자가 끝나면 canvas의 toDataURL() 메서드를 사용하여 원하는대로 보내거나 저장할 수있는 이미지의 bit64 인코딩 버전을 가져올 수 있습니다. 예제에서 64 비트 인코딩 된 문자열을 webservice 또는 api에 보내서 저장할 수 있습니다. 여기
나 자신을 만든 예입니다 http://yoerivandamme.com/html5/demos/licenseplate.html참고 내가이 예에서 KineticJS을 사용하고 있습니다,하지만 당신은 바닐라 자바 스크립트와 같은 일을 달성 할 수있다.
저는 자바 스크립트를 사용하여 번호판을 그렸습니다. 사용자 입력을 기반으로 텍스트를 추가하고 있습니다. 수동으로 그리는 대신 이미지를 쉽게로드 할 수 있습니다.
다른 예 :
//vanilla js, I advise to use a library like Kineticjs
//paint some things:
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
//after the painting is done get the image
var bit64ImageString = can.toDataURL();
서버에 이미지를 저장하려면, 사용 : http://www.briffett.net/squirrel/는
는
<canvas id="myCanvas">
</canvas>
는 다음 작업이 자바 스크립트를 사용이 HTML을 고려 Ajax를 호출하고 bit64ImageString을 서버로 보냅니다. 그 시점에서 당신이 원하는대로 할 수 있습니다 :)
자바 또는 자바 스크립트를 찾고 계십니까? 나는 re-tagged했다. .. –
나는 양쪽 다 묻고있다. 내가 다람쥐 예제는 내 질문에 가장 유사한 것 같아 – Lumpy