Chúng tôi đã tạo thành công ứng dụng ngoại tuyến bằng HTML5. Những gì nó làm là lưu trữ dữ liệu trong indexedDB hoặc trong localStorage, khi trực tuyến, lưu trữ cục bộ và cơ sở dữ liệu trực tuyến sẽ được đồng bộ hóa. Mọi thứ đều ổn cho đến khi chúng tôi quyết định thêm chức năng để tải lên hình ảnh.Làm việc với hình ảnh trong ứng dụng ngoại tuyến HTML5?
1) Vì ứng dụng hoạt động ngoại tuyến, chúng tôi không thể tải lên hình ảnh trong máy chủ, chúng tôi sẽ đặt chúng ở đâu?
có thể Giải pháp:
- khi ngoại tuyến, lưu đường dẫn, khi người dùng được trực tuyến, tải lên các hình ảnh bằng cách tạo ra các yếu tố đầu vào và gán đường dẫn đến thuộc tính giá trị của nó. Vấn đề với cách tiếp cận này là chúng tôi không thể thay đổi thuộc tính giá trị của phần tử đầu vào và chúng tôi không thể tải lên đường dẫn đầy đủ của hình ảnh. Có vẻ như giải pháp này là không thực sự có thể.
- lưu hình ảnh trong indexedDB hoặc localStorage, điều này có khả thi không?
2) Nếu chúng tôi lưu thành công hình ảnh trong indexedDB hoặc localStorage, chúng ta sẽ tải nó lên như thế nào khi người dùng trực tuyến?
có thể Giải pháp:
- WebSocket - Tôi đã không chạm này được nêu ra.
- Flash - nó có hoạt động trên iPhone không? Chắc là không.
3) Nếu chúng tôi lưu thành công hình ảnh trong indexedDB hoặc localStorage, chúng ta sẽ hiển thị nó như thế nào trên trang? Các phần tử hình ảnh sử dụng thuộc tính src để xác định hình ảnh nào sẽ hiển thị, có phương pháp nào khác như sử dụng hình ảnh nhị phân không?
Nếu bạn phải đối mặt với tình huống tương tự trước đây, bạn đã làm gì để đạt được mục tiêu của mình?
Chuyển đổi hình ảnh thành chuỗi base64 và lưu trữ chúng, sau đó bạn có thể tải chúng lên bằng Ajax hoặc bất kỳ thứ gì bạn thích và bạn có thể đặt chuỗi base64 trong _src_ attr của phần tử img –