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


HTML Canvas içeriğini ikili veri olarak okuma yolu var mı?

Şu anda bir giriş dosyası ve altındaki tuvali göstermek için şu HTML’ye sahibim:

<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>

Sonra, tuvalim doğru olarak ayarlamak için giriş dosyamı kurdum.

$('#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
            });
        };
    });
});

Düğmeye tıklandığında, verilerin ikili sunucuya aktarılması için şimdi ikili veriyi (Base64 kodlu) Canvas'dan almam gerekiyor ...

Sonuç olarak, kullanıcıya bir dosya seçme, kırpma / yeniden boyutlandırma yapma ve sonra da düzenlenmiş görüntünün sunucuya yükleneceği noktada bir düğmeyi tıklamanız gerektiğidir (sunucu tarafı yapamıyorum). sunucu tarafı sınırlamaları nedeniyle kırpma / yeniden boyutlandırma ...)

Herhangi bir yardım harika olurdu! Şerefe


57
2018-03-28 15:22


Menşei




Cevaplar:


canvas eleman sağlar toDataURL bir döndüren yöntem data: Belirli bir biçimde base64 kodlu görüntü verilerini içeren URL. Örneğin:

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

Dönüş değeri olmamasına rağmen sadece base64 kodlu ikili veri, sadece istediğiniz verileri almak için şemayı ve dosya türünü kırpmak için basit bir meseledir.

toDataURL Tarayıcı, tuvali farklı bir kaynaktan yüklenen herhangi bir veriye çizdiğinizi düşünürse başarısız olur, bu nedenle bu yaklaşım yalnızca görüntü dosyalarınız betiği bu işlemi gerçekleştiren HTML sayfasıyla aynı sunucudan yüklüyse çalışır .

Daha fazla bilgi için bakınız üzerindeki MDN dokümanları canvas API, üzerinde ayrıntıları içerir toDataURL, ve Wikipedia makalesi data: URI şemasıBu aramadan alacağınız URI biçiminin ayrıntılarını içerir.


110
2018-03-28 15:30





Tuvalini nasıl çizdiğini görmek

$("canvas").drawImage();

jQuery Canvas kullandığınız görünüyorjCanvasCaleb Evans tarafından. Ben aslında bu eklentiyi kullanıyorum ve tuval base64 görüntü dizesi almak için basit bir yolu var $('canvas').getCanvasImage();

İşte sizin için çalışan bir Fiddle: http://jsfiddle.net/e6nqzxpn/


0
2017-12-03 20:38



canvas.getCanvasImage bir işlev değil - Rajiv Sharma