HTML5에서 프로그래밍 방식으로 이미지를 저장할 수 있습니까?

HTML5에서 텍스트 데이터를 로컬 데이터베이스에 저장할 수 있으며 SQL을 사용하여이를 수행 할 수도 있습니다. (http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)HTML5에서 프로그래밍 방식으로 이미지를 저장할 수 있습니까?

이미지를 제외한 모든 항목을 오프라인으로 캐시하는 iPhone의 MObile Safari 용으로 작성한 앱이 있습니다. 이미지는 여전히 서버에서 다운로드해야하며 캐시 된 상태를 유지하는 방법을 알지 못합니다. 이상적으로는 localStorage 데이터베이스에 저장하는 것이 좋습니다.

캔버스에 이미지를 쓰고 그 이미지를 텍스트로 직렬화하려는 생각이 들었습니다 ... 어떤 아이디어입니까? 이 작업을 수행하는 더 쉬운 방법이 있습니까?

이상적으로, 나는 HTML과 JavaScript, 네이티브 앱/objective-C없이이 모든 것을하고 싶습니다.

출처

2009-06-18 JayCrossler

html5에서 응용 프로그램 캐시를 살펴보십시오. 기본적으로 정확히 원하는대로 수행됩니다 (완전히 오프라인 웹 응용 프로그램을 지원하려는 경우에도 사용하려는 것입니다).

또는 이미지를 캔바스로 가져온 다음 canvas.toDataURL()을 사용하여 이미지에 대한 데이터 URL을 가져올 수 있습니다. 그런 다음 이미지를 일반 데이터베이스 또는 오프라인 저장소 api에 저장할 수 있습니다.

출처

2009-06-18 01:09:26 olliej

, 당신은 매니페스트를 사용하여 의미합니까? 매니 페스트가 잘 작동하고 있지만 (http://wecreategames.com/blog/?p=210), 세션 중에 동적 이미지를 풀고 나중에 오프라인으로 사용할 수있게하려는 경우 검색 한 후에 다른 응용 프로그램 캐시가 어떤 의미 일지 모르겠습니다. 감사! – JayCrossler

그것이 내가 의미했던 것입니다. 필요한 다른 이미지를 다운로드하려면 상황에 따라 다릅니다. 모든 이미지의 위치를 제어하면 응용 프로그램 캐시 매니페스트 항목이 접두사로 간주되므로 매니페스트의 'http://example.com/images'는 이미지 아래에로드가 발생합니다 (예 : 'http : // example .com/foo.jpeg '는 나중에로드 할 수 있도록 앱 캐시에 저장됩니다. 이미지가있는 위치를 제어하지 않으면 canvas + toDataURL 트릭을해야합니다. – olliej

매우 근사합니다. 나는 매니페스트 스펙을 다시 읽을 것이고, 나는 그것이 효과가 있었는지 몰랐다. 이미지가 HTML과 동일한 도메인에서 나오는지 확인해야하지만 작업 할 것을 제안한 toDataURL 트릭도 있습니다. http://wecreategames.com/blog/?p=219 – JayCrossler

도 참조 : http://www.w3.org/TR/offline-webapps/

출처

2010-04-06 10:04:37 mb21

당신은 Data UI scheme HTML5의 데이터베이스를 사용하여 이미지를 저장할 수 있습니다.

출처

2010-07-24 23:06:24 Andrew

모바일 Gmail에서 Google이 수행하는 작업을 수행하고 데이터 URL로 구현할 수 있습니다. 즉, 다음 항목은 외부 페이지가 아니므로 cache.manifest에 포함 된 경우 페이지의 일부로 캐시됩니다. 다음 중 하나를

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

또는 :

<style type="text/css"> 
.Jd{background:#fff;width:100%;border-width:7px;-webkit-box-sizing:border-box;-webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUlJREFUeNpi/P//P4O+VwcfAwODGxDLATGITSr4BMSPgHjXxW0Vnxj1PNtFmBgZU/79/38MKHgBqoAoADQATEMdZQA0xwpozlwWEUFu7zfvvx4ACp5gIBOAXAekDgEN/yEqzOPD9P3nHwWoC6kBLnz99kue6eu3n4xAzg8Civ8jYXwu/vXt+y8GJgYagBFuKAuOSCEUabD0CYsgxmHifVjWQwYwb+KSJ2go0ABGAuHISMiCkZ5OBfm5mN9//MaBr1BBDjvkSMMSH2z8vBzMLI4Wqjzrdl7UA4qdwqOYkUhHGjhbqfOwxAaafjh0+q7fm3dfQK49B8RfSPUu0FIeIGUkIsTjBjKPEVhHyQO93zV96ZFXR8/c+/zkxYdfpBoqIyHAZm2ixJsZbSMGDM4ykKEgcREgzgRibSAWIiNu3gHxVSCeDsRvAAIMAK29e2M9JZVZAAAAAElFTkSuQmCCCg==") 9 7 8 7} 
</style>

자세한 내용은 여기를 주제로 읽기 : http://www.websiteoptimization.com/speed/tweak/inline-images/ 응용 프로그램 캐시

출처

2011-01-24 13:44:42 Junto

HTML5에서 프로그래밍 방식으로 이미지를 저장할 수 있습니까?

답변

관련 문제