HTML5 Canvas'dan ikili (base64) verileri alma (readAsBinaryString)

Question

HTML Canvas içeriğini ikili veri olarak okuma yolu var mı? Sonra kurulum doğru hangi tuval ayarlamak için benim Girdi dosyası çalışıyor ettik

<p><button id="myButton" type="button">Get Image Content</button></p> 
<p>Input:<input id="fileInput" type="file"/></p> 
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> 

: Ben bunun altında bir giriş dosyası ve tuval göstermek için aşağıdaki HTML var Şu anda

$('#fileInput').on('change', function() { 
    $.each(this.files, function() { 
     var image = new Image(); 
      image.src = window.URL.createObjectURL(this); 

     image.onload = function() { 
      $("canvas").drawImage({ 
       source: image, 
       x: 50, y: 50, 
       width: 100, 
       fromCenter: false 
      }); 
     }; 
    }); 
}); 

Şimdi

Sonuçta ihtiyacım olduğunu ... o sunucusuna veri itmek edeceğiz böylece butonuna tıklandığında Tuval dan (Base64 kodlanmış) ikili veri almak gerekir için kullanıcıya bir dosya seçme, kırpma/yeniden boyutlandırma sağlama ve sonra düzenlenen görüntünün sunucuya yükleneceği bir düğmeyi tıklatma (sunucu tarafı nedeniyle sunucu tarafı kırpma/yeniden boyutlandırma yapamıyorum) sınırlamalar ...)

Herhangi bir yardım harika olurdu!

Answer 1

canvas öğesi, belirli bir biçimde base64 kodlu görüntü verilerini içeren bir data: URL'si döndüren bir toDataURL yöntemini sağlar. Örneğin: Dönüş değeri ikili veri kodlanmamış sadece base64 olmasına rağmen

var jpegUrl = canvas.toDataURL("image/jpeg"); 
var pngUrl = canvas.toDataURL(); // PNG is the default 

, bu düzeni ve yalnızca istediğiniz verileri almak için dosya türünü keserek basit bir mesele.

tarayıcı tuvale farklı kökenli yüklenen tüm verileri çizdim düşünürse toDataURL yöntem başarısız olur, bu nedenle bu yaklaşım yalnızca resim dosyalarını HTML sayfası ile aynı sunucudan yüklenir eğer çalışacaktır komut dosyası bu işlemi gerçekleştiriyor.

Daha fazla bilgi için, toDataURL ve the Wikipedia article on the data: URI scheme ile the Wikipedia article on the data: URI scheme arasındaki ayrıntıları içeren the MDN docs on the canvas API numaralı telefona bakın ve bu çağrıdan alacağınız URI biçiminin ayrıntılarını içerir. Eğer Caleb Evans tarafından jQuery Tuval (jCanvas) kullanan görünüyor

$("canvas").drawImage();

ile tuval çizmek nasıl görünce

Answer 2

. Aslında o eklenti kullanmak ve burada $('canvas').getCanvasImage();

ile tuval base64 görüntü dizesini almak için basit bir yol vardır sizin için çalışan bir Fiddle var: http://jsfiddle.net/e6nqzxpn/