Tải lên hình ảnh canvas để hiển thị (api v3) với javascript

Question

Tôi đang tạo một thử nghiệm Chrome thú vị. Gương Mustache! http://sjoerddijkstra.nl/cam/ Tôi muốn sử dụng API Imgur V3 để tải hình ảnh từ canvas lên Imgur và sau đó hiển thị liên kết, nhưng tôi thực sự không biết làm cách nào. Tất cả các ví dụ làm việc tôi thấy đang sử dụng API V2 ...

tôi sử dụng canvas.toDataURL:

var dataURL = canvas.toDataURL("image/png"); 
return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 

Answer 1

Imgur tài liệu là kinda nghèo IMO nhưng sau khi yêu cầu xung quanh trong SO Tôi thấy điều này để làm việc:

try { 
    var img = document.getElementById('myCanvas').toDataURL('image/jpeg', 0.9).split(',')[1]; 
} catch(e) { 
    var img = document.getElementById('myCanvas').toDataURL().split(',')[1]; 
} 

$.ajax({ 
    url: 'https://api.imgur.com/3/image', 
    type: 'post', 
    headers: { 
     Authorization: 'Client-ID <CHANGE_THIS_TO_BE_YOUR_CLIENT_ID>' 
    }, 
    data: { 
     image: img 
    }, 
    dataType: 'json', 
    success: function(response) { 
     if(response.success) { 
      window.location = response.data.link; 
     } 
    } 
}); 

Thay thế <CHANGE_THIS_TO_BE_YOUR_CLIENT_ID> bằng id khách hàng bạn nhận được khi đăng ký ứng dụng here (Tôi đã chọn tùy chọn "sử dụng ẩn danh mà không có ủy quyền người dùng").