SVG Metin özelliği iki katına çıkıyor - HTML2CANVAS

İşte kodum ve JSFiddle 'a bağlantı.

HTML

<input type="button" id="export" value="Export"/>
     
Inventory
 

JS

$(document).ready(function(){
        $('#export').on('click', function() {       
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                },
            });
        });
});

Bir svg'yi html2canvas kütüphanesini kullanarak tuval görüntüsüne dönüştürmeye çalışıyorum. Örnekte, tuval görüntüsünü çıktıya ekliyorum. Metnin çarpıldığını açıkça görebilirsiniz. Herhangi biri bu sorunu çözmemi tavsiye edebilir mi?

Umarım sorum açıktır. Şimdiden teşekkürler.

19

7 cevap

Metin öğelerini iki kez oluşturan html2canvas'da bir sorun neden oldu.

Bu düzeltme ekini, bir html2canvas sürümüne bu çekme isteği eklenene kadar düzeltmek için uygulayın:

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};
6
katma

IDK tam olarak işe yaramazsa, ama sanırım, HTML2Canvas kütüphanesi. Becase, yazı tipi boyutu stil özelliğini kaldırdığımda, her şey yoluna girdi:

Inventory

Ve bu mükemmel bir iş:

Inventory

lol

1
katma

Neyi hedeflediğinize bağlı olarak, SVG'yi tuval üzerine boyamak için artık HTML2Canvas'a ihtiyacınız olmayabilir.

En azından Chrome'da, bu belirli SVG'yi doğrudan bir tuval üzerine doğrudan çekmek mümkündür. Örneğinizi kullanarak:

$(document).ready(function() {
    $('#export').on('click', function() {
       //TODO
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');
        var img = new Image();
        var svg = document.getElementById('aaa');
        var xml = (new XMLSerializer).serializeToString(svg);
        img.src = "data:image/svg+xml;charset=utf-8,"+xml;

        ctx.drawImage(img, 0, 0);

    });
});

http://jsfiddle.net/ncv56vwf/4/


Firefox ve IE11'de biraz daha iş gerektirebilir, ancak mümkün. İşte Chrome, Firefox ve IE11’de çalışan bir örnek:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, 600, 600, 0, 0, 600, 600)
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"

http://codepen.io/simonsarris/pen/rVOjby

Firefox'ta çalışması için SVG'nin width ve height niteliklerinin ayarlanmış olması gerekir.

For it to work in IE11 you MUST use all arguments to drawImage

1
katma
İlk sürüm de IE9 + ve FF için çalışmalı, charset = utf-8, yerine charset = utf8, yazın. Ayrıca IE'nin tuvali lekeleyeceğini de unutmayın, bu nedenle toDataURL veya toBlob veya getImageData kullanma olasılığı yoktur.
katma yazar Kaiido, kaynak
oh ve ctx.drawImage 'ı bir load olayına ve görüntüyü src olarak ayarlamadan önce xml'yi encodeURIComponent ' e sarmak isteyebilirsiniz. Geçerli bir svg'de tam bir gezinti için bu cevabı inceleyin çizimden önce ve FF ve IE9 ile çalışan kemanınız güncellendi
katma yazar Kaiido, kaynak

you have to download the font. You can use @import in your CSS as you can see in this fiddle :
http://jsfiddle.net/scraaappy/04wkvweo/ or @font-face (not tested), or use Google font api by adding <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> in your header (Tangerine as sample, but any font you want here : https://www.google.com/fonts/ (unfortunately, no Lucida Grande)

@degr: Lucida Grande'yi kaldırırsanız, işe yarar çünkü Lucida Grande bunu yapmaz (bu, pencerelerde Google chrome için geçerlidir). Html2canvas yalnızca varsayılan fontunuzla ilgilenebilir, aksi takdirde bunları indirmeniz gerekir. Bu nedenle, herhangi bir font belirtmediyseniz veya yalnızca tarayıcınız tarafından desteklenen fontları belirlediyseniz çalışır.

To see fonts supported by your browser, just adjust settings and somewhere in default fonts and encoding, you have a list box containing the list of all font supported which let you choose the default font you want to be displayed (or you can play with JavaScript as it's suggested here: list every font a user's browser can display) All the fonts listed will work. If not you have to use the trick above

1
katma

Düzeltmek için temiz bir yol bulamadım. Bu yüzden, aşağıdakilerle karşılaştım, başvurunuzu göstermek için ince ayarlamalar yapmanız gerekecek, ancak bir cazibe gibi çalışacak.

// Replace each SVG text with normal text
$('text').each(function(){

   //Get the offset
    var offset = $(this).offset();

   //Create new text
    $(this).parents('[data-role="canvas"]').append('
' + $(this)[0].textContent + '

'); //Remove the SVG text $(this)[0].textContent = ''; })

Temel olarak, herhangi bir TEXT öğesini bir P öğesi ve svg metinlerinin bağlamı ile değiştirir ve onu TEXT ofsetlerine göre konumlandırır. Gövde etiketinden önce P elementlerini yaratın ve mutlak hale getirin. (Onları bir sarmalayıcı içindeki bir div içine koyuyorum, bu yüzden -512 vs. var, bunu görmezden gelebilirsiniz)

Before: enter image description here

After: enter image description here

1
katma

Sorun HTML2Canvas'ın svg dosyalarını düzgün desteklememesidir (burada daha fazla açıklama https://github.com/niklasvh/html2canvas/sorunlar/95 ).

Hala HTML2Canvas'a ihtiyacınız varsa, ilk olarak SVG'yi Tuval'e dönüştürmek (bunu yapabilirsiniz canvg.js) sonra da HTML2Canvas'ı kullanmak, sonra geri döndürmektir. Bunu yapan kodun bir örneği yukarıdaki linkte bulunabilir.

1
katma
github.com/niklasvh/html2canvas/releases Yalnızca en yeni alfa sürümüne bakın. Göründüğü kadarıyla SVG Rendering'i destekliyor.
katma yazar Vignesh Gopalakrishnan, kaynak

Temelde bulduğum temelde Unicode (Lucida Sans Unicode) fontu, Chrome'da HTML2Canvas ile düzgün çalışmıyor ve başka bir şey destekleniyor. Bunun için font-Size küçük, küçük, büyük vb. şu anki probleminizi çözebilirsiniz, ancak bu şeyleri değiştirmeniz sizin için mümkün ise, o zaman bu problemden kaçınmanız mümkün olabilir.

0
katma