Force dán kiện để mã hóa hình ảnh trong base64

Question

Bối cảnh:

Tôi đang phát triển một ứng dụng web HTML5 cho công ty của tôi mà về cơ bản là một Text Editor Giàu (tương tự như Google Docs) lưu trữ thông tin trong một cơ sở dữ liệu.

Chúng tôi đang sử dụng CKEditor 3 làm trình chỉnh sửa richtext và Jquery để hoàn thành việc này.

Chúng tôi đã chọn Chrome của Google làm trình duyệt ưa thích.

Ứng dụng của chúng tôi hiện đang trong giai đoạn thử nghiệm alpha, có một nhóm gồm 18 người thử nghiệm (là những người tương tự sẽ sử dụng ứng dụng này). Những người này là không đồng nhất, nhưng hầu như tất cả trong số họ có kỹ năng máy tính cơ bản, chủ yếu là giới hạn MS Word và MS Excel.

.

Vấn đề:

Hầu hết người dùng của chúng tôi vẫn sử dụng từ để xây dựng tài liệu, chủ yếu là do khả năng của nó tạo ra các biểu đồ phong phú. Khi họ sao chép/dán nội dung đã tạo vào Chrome, hình ảnh được dán dưới dạng liên kết tới tệp cục bộ (được hệ điều hành tạo tự động, trong thư mục người dùng/*/temp). Điều này có nghĩa là máy chủ không thể truy cập các tệp này và các tài liệu kết quả (các tệp PDF được tạo) không chứa các hình ảnh.

.

Câu hỏi

Làm thế nào tôi có thể buộc hình ảnh dán được mã hóa trong base64, tương tự như những gì xảy ra trong Firefox?

.

Ghi chú

Nếu nó có thể "upload" lên máy chủ một hình ảnh tham chiếu như src = "file: // c: \ cái gì đó", rằng sẽ giải quyết vấn đề của tôi như tôi base64 có thể mã hóa hình ảnh mà sau này . Chúng tôi không thể chuyển sang firefox vì nó không giải quyết được hoàn toàn vấn đề của chúng tôi (nếu hình ảnh được "dán" cùng với văn bản, firefox không mã hóa base64) và tăng các vấn đề khác như thanh cuộn ngang xuất hiện khi văn bản quá dài để vừa với văn bản.

Answer 1

Có và không, tôi tin.

Có thể chặn sự kiện dán và tìm nạp hình ảnh được dán dưới dạng tệp, sau đó sử dụng FileReader để đọc tệp dưới dạng URI dữ liệu (PNG được mã hóa 64 cơ sở). Tuy nhiên, Word dường như gửi tham chiếu đến tệp cục bộ, tạo ra một ngoại lệ bảo mật (ít nhất là trên Chrome) do yêu cầu tên miền chéo (http://... và file:///...). Theo như tôi lo ngại, không có cách nào để lấy nội dung thực tế của các tệp cục bộ đó và nội dung là không phải là được gửi dưới dạng dữ liệu khay nhớ tạm.

Nếu bạn sao chép hình ảnh "thuần túy" (ví dụ: không sơn), bạn có thể lấy dữ liệu mã hóa cơ bản 64 như sau: http://jsfiddle.net/pimvdb/zTAuR/. Hoặc nối hình ảnh dưới dạng PNG được mã hóa 64 trong div: http://jsfiddle.net/pimvdb/zTAuR/2/.

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};