BẬT dữ liệu base64 JavaScript/jQuery

Question

Tôi đang làm việc trên một trang web cho phép người dùng chỉnh sửa ảnh (trong trình duyệt) và sau đó tải chúng lên. Để chỉnh sửa hình ảnh trong trình duyệt, tôi sử dụng một số thư viện JavaScript hoạt động với hình ảnh trong base64. Do đó, để POST hình ảnh lên máy chủ của tôi, không thể sử dụng biểu mẫu đơn giản với đầu vào tệp. Giá trị của đầu vào bị ẩn được đặt thành chuỗi base64 của hình ảnh đã chỉnh sửa và đã được POST. Vui lòng xem ví dụ sau, ví dụ ngắn.

http://pastebin.com/PrfWaS3D

Rõ ràng, điều này được rất nhiều tước xuống, nhưng nó chứa các vấn đề tôi đang chạy vào. Trong POSTING một GIF động 3MB, mất 6,5 phút. Trong thời gian đó, máy tính của tôi gần như hoàn toàn bị đóng băng/không phản hồi. (Lưu ý: Điều này hoạt động hoàn toàn hoàn toàn đối với hình ảnh nhỏ)

Có thể là sự cố hệ điều hành/trình duyệt, (Google Chrome mới nhất trên Ubuntu) nhưng tôi nghi ngờ điều đó. Nếu tôi đặt đầu vào tệp đó bên trong biểu mẫu và xóa dữ liệu base64-ing, (tức là - một POST chuẩn của một tệp) nó sẽ diễn ra trong khoảng một giây.

So sánh 6,5 phút đến 1 giây. Tôi phải làm điều gì đó sai. Tôi làm gì sai ở đây? Tôi nên làm gì thay vào đó? Tôi khá mới để phát triển web, vì vậy tôi là một chút trong bóng tối. Tôi biết rằng base64 có một số thứ như tăng kích thước 1.3x, nhưng rõ ràng thời gian tải lên ở đây không phải là tỷ lệ với 1.3x. Tôi đã thực hiện một chút về console.logging và

var base64 = reader.result; 

mất khoảng một giây. Vì vậy, tôi không nghĩ rằng nút cổ chai là có. Nút cổ chai phải được tải lên. Nhưng tại sao? Tại sao đầu vào tệp biểu mẫu do đó nhanh hơn nhiều so với đầu vào ẩn biểu mẫu với base64?

Tôi xin lỗi vì bài đăng dài, nhưng một lần nữa, tôi mới phát triển web và không thực sự hiểu vấn đề của mình, vì vậy khó có thể súc tích trong khi nhận tất cả thông tin.

Cảm ơn

Answer 1

Vì bạn đang sử dụng API JS hơi hiện đại dù sao, nó có thể là tốt hơn để sử dụng:

• URL.createObjectURL() để tạo ra một URL từ một Blob (nhanh hơn nhiều và inspectable hơn dữ liệu URL)
• btoa() để base64 mã hóa một chuỗi (không cần thiết nữa)
• FormData để tạo ra một yêu cầu POST
• XHR2 để gửi nó đến máy chủ (bao gồm cả tiến trình ngay cả!)

Vì vậy, một cái gì đó như thế này:

1. tập tin Nhận:
   file = input.files[0]
2. Chuyển đổi để gõ mảng, làm ảo thuật, chuyển đổi trở lại Blob:
   blob = <magic here>
3. Tạo POST:
   fd = new FormData; fd.append('file', blob, 'image.png');
4. Tải lên:
   xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

<form action="1.php" method="post"> 
    <input type="text" id="txt" name="txt"> 
    <input type="submit" value="submit" > 
</form> 


function convertToDataURLviaCanvas(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 
convertToDataURLviaCanvas('1.jpg', function(base64Img){ 
    console.log(base64Img); 
    document.getElementById('txt').value= base64Img; 
}); 

1.php

echo '<img src="'.$_POST['txt'].'" />';