Transformationen werden noch nicht unterstützt.

114 #184 #209

Es gibt einen Workaround - nicht schön, aber trotzdem (funktioniert für PNG- und JPG-Bilder). Grundlogik: gedrehte Bilder finden, ihre Position ersetzen und PHP-Funktionalität bereitstellen.

Schritt 1: Integrieren Sie die jQuery-Funktion, die CSS-Transformationsunterstützung bietet.

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle < 0 ? angle+360 : angle;
   };
}(jQuery));

Schritt 2: Ersetzen Sie die Position der gedrehten Bilder durch die PHP-URL (schließen Sie dies vor dem html2canvas-Rendering ein).

$("img").each(function(){
    rot = $(this).rotationDegrees();
    if (rot != 0)
        $(this).attr("src", "/rotateimg.php?rotate=" + rot + "&loc=" + $(this).attr("src"));
});

Schritt 3: Erstellen Sie rotationimg.php, die die Rotationsfunktionalität bietet

<?php
$loc = $_GET['loc'];
$rot = -$_GET['rotate'];
$path = "/web/images/path"; // $_SERVER['DOCUMENT_ROOT'] ?
$source = NULL;

if (substr($loc, -3) == "png")
    $source = imagecreatefrompng($path . $loc);
else if (substr($loc, -3) == "jpg") {
    $source = imagecreatefromjpeg($path . $loc);
}

imagealphablending($source, false);
imagesavealpha($source, true);

$img = imagerotate($source, $rot, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($img, false);
imagesavealpha($img, true);

imagepng($img);

?>

Ich hoffe, es hilft. =)

Ich habe Unterstützung für um 90, 180 oder 270 Grad gedrehte Bilder hinzugefügt. https://github.com/mjaggard/html2canvas/tree/simple-rotation

Nicht-Bild-Rotation wird im Allgemeinen nicht unterstützt und auch andere Transformationen werden nicht unterstützt (obwohl ich einige Übersetzungen und Rotationen sowieso von html2canvas unterstützt, weil es den Browser die Arbeit machen lässt).

Abonnieren. Suchen Sie auch hier nach einer besseren Rotationslösung für Bilder / HTML. Wir brauchen -webkit-trans, um mit "Graden" zu arbeiten, aber nicht mit diesem Matrix-Zeug.

Vielen Dank

Grüße,

Was ist mit Skalierung? Ich habe einen skalierten Text, der nicht richtig gerendert wird. die Charaktere werden alle zusammengedrängt. Kann mir jemand die richtige Richtung für die Implementierung dieser Skalierungsfunktion zeigen?

Ich muss drehen :(

Die Implementierung von Transformation Scale wäre toll. Ich denke, das ist ein wirklich wichtiger Punkt, da Sie die Schrift- und Bildqualität verbessern können. Wenn man zum Beispiel einen Text rendert und mit dem Browser zoomt, ist die Qualität wirklich schlecht. Das könnte Ihr html2canvas-Plugin auch für Texteditoren und so weiter nützlich machen.

@niklasvh :

Hallo, diese Funktion vermisse dieses hervorragende Tool wirklich, hast du einen Plan für diese Funktion?

@mjaggard - besteht die Möglichkeit, dass Ihr Bildrotationscode in die aktuelle Version der Bibliothek integriert werden kann?
Ich habe mir deinen Code angeschaut und er scheint eine ganz andere Struktur zu haben.
Vielen Dank!

Hi,

Beabsichtigen Sie, diese Funktion bald hinzuzufügen?
Es wäre sehr nützlich !!

Danke vielmals !

Hi,
Die Rotation funktioniert bereits (webkit-transform) in dieser Version für
Beispiel.
Fügen Sie diese Klasse in einem beliebigen Div hinzu und überprüfen Sie, ob ich sie bereits getestet habe.

.rt{-ms-transform: rotieren(7deg); /* IE 9 _/
-webkit-transform: rotieren(7deg); /_ Chrome, Safari, Opera */
transformieren: drehen(7deg);}

Am Mittwoch, 7. Januar 2015 um 19:02 Uhr, dscarteland [email protected]
schrieb:

Hi,

Beabsichtigen Sie, diese Funktion bald hinzuzufügen?
Es wäre sehr nützlich !!

Danke vielmals !

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips ich auch, ich brauche auch eine

Findet jemand eine Lösung für gedrehte Divs-Screenshots?

+1

Voll funktionsfähiger Code mit Rotation und Transformation für alle Browser. Kann die Datei nicht anhängen. Mailen Sie mir, um die Datei

Großartig, danke!

Haben Sie schon einmal darüber nachgedacht, einen Pull-Request zu machen oder JS Fiddle aufzusetzen?

Hi ,
so toll!! Kann ich die Datei bitte als Rotation und Transformation bekommen?
arbeitet jetzt für Sie.

Am Dienstag, 29. September 2015 um 15:32 Uhr, Arindam Mojumder [email protected]
schrieb:

Voll funktionsfähiger Code mit Rotation und Transformation für alle Browser. Kippen
hänge die Datei an. Senden Sie mir eine E-Mail, um die Datei zu sammeln, oder besuchen Sie diesen Link.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

_Amar Singh_
_PHP/MySQL-Entwickler_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_E-Mail:_ amar. [email protected] [email protected]
_Mobil: *+91 7040980700
*Abteilung: *Entwicklung
*Unterstützung:_ [email protected]
_Adresse:_ E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
_Website:_ www.kodework.com

Hallo, ich habe auch Schwierigkeiten, Transformationen (Rotieren) zum Laufen zu bringen, insbesondere im IE. Die fertige Leinwand enthält zwar ein gedrehtes Element, aber normalerweise wird nur die Hälfte des Elements angezeigt.

Dies ist der Stil des Skripts:

$('#<id of element>').htmlToCanvas({
        width: 1000, // dimension of your html page
        height: 600, // dimension of your html page
        complete: function(){
      var image = this.htmlToCanvas.toBinrary(); // will return base64 image data
      $('<img emelent>').attr("src",image); // use this as a src of any img element
   }
  });

// Html zu Canvas und Bild im Backend speichern

htmlToCanvas.js-Datei

(Funktion($){

var canvasCounter = 0;
var canvas, cnvs, ctx, elementArr, callback, _this;

$.fn.htmlToCanvas = function(options){

    var defaults    = {width: 1000, height: 600, complete: null};
    callback        = $.extend(defaults, options);
    _this           = this;

    return this.each(function(){

        createImage('#'+$(this)[0].id);
    });
}

$.fn.htmlToCanvas.toBinrary = function() {
    return cnvs.toDataURL("image/jpeg",1);
// return   cnvs.toDataURL({
//      format: 'png',
//      left: 0,
//      top: 0,
//      width: 200,
//      height: 150
//  })
}

$.fn.htmlToCanvas.removeCanvas = function() {
    canvas.remove();
}

function createImage(divobj)
{
    ////console.log(divobj);

    if(canvas) canvas.remove();
    canvas = $('<canvas id="canvas" width="' + callback.width + '" height="'+ callback.height +'" style="display: block;"></canvas>');
    $('body').append(canvas);
    cnvs    = document.getElementById('canvas')
    ctx     = cnvs.getContext("2d");

    ctx.fillStyle = $(divobj).css('background-color');
    ctx.fillRect(0,0,callback.width, callback.height);
    canvasCounter = 0;
    elementArr      = [];

    $(divobj + " img").each(function(index){
        elementArr.push({type: 'img', zindex: $(this).css('z-index'), imgobj: $(this)});
        console.log($(this));
    });

    $(divobj + " div").each(function(index){
        elementArr.push({type: 'txt', zindex: $(this).css('z-index'), imgobj: $(this)});
    });

    elementArr.sort(function (a, b) {
         //var a_zindex = a && a.zindex || "",
            //b_zindex = b && b.zindex || "";
        //return a_zindex.localeCompare(b_zindex);
        var dif = Number(a.zindex - b.zindex);
        //alert('cal '+dif);
        return (dif);
    });

    //--------- background images ----------

    if($(divobj).css('background-image') != 'none'){

        var background = new Image();
        var back_source = $(divobj).css('background-image');
        back_source = back_source.substring(4, back_source.length-1);
        back_source = back_source.replace('"', '');
        back_source = back_source.replace('"', '');
        //background.src = back_source;

        $.ajax({
            type: 'POST',
            url: 'data/imagedata.php',
            data: {'imgurl': back_source},
            success: function(_data){
                //console.log(_data);
                var imagedata = 'data:image/jpeg;base64,' + _data;
                background.src = imagedata;
                background.onload = function(){
                    for (var w = 0; w < canvas.attr('width'); w += background.width) {
                        for (var h = 0; h < canvas.attr('height'); h  += background.height){
                            ctx.drawImage(background, w, h);
                        }
                    }

                    if(elementArr.length > 0){
                        htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
                    } else {
                        postCanvas();
                    }
                }
            },
            error: function(xhr, textstatus){
                ////console.log(textstatus);
            }
        });

    } else {
        if(elementArr.length > 0){
            htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
        } else {
            postCanvas();
        }
    }
}

function htmlToCanvas(type, obj){

    if(type == 'img'){
        var canvas_img = new Image();
        canvas_img.crossOrigin = "*";  // This enables CORS
        canvas_img.src = obj.attr('src');
        //console.log(canvas_img.src);
        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7,matrix.length-1).split(', ');

            canvas_img.onload = function(){
                //console.log('onload');
                ctx.save();
                ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
                ctx.drawImage(canvas_img, 0, 0);
                ctx.restore();
                putAnotherElementToCanvas();
        }

    /*  $.ajax({
            type: 'POST',
            url: 'data/imagedata.php',
            data: {'imgurl': obj.attr('src')},
            success: function(_data){

                var imagedata = 'data:image/png;base64,' + _data;
                canvas_img.src = imagedata;

                canvas_img.onload = function(){
                    ctx.save();
                    ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
                    ctx.drawImage(canvas_img, 0, 0);
                    ctx.restore();
                    putAnotherElementToCanvas();
                }
            },
            error: function(xhr, textstatus){
                ////console.log(textstatus);
            }
        });*/

    } else if(type == 'txt'){

        ctx.save();

        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7,matrix.length-1).split(', ');

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
        ctx.fillStyle = obj.css('background-color');
        ctx.fillRect(0, -7, obj.width(), obj.height());

        ctx.fillStyle = obj.css('color');
        ctx.font = (obj.css('font-size') + ' '  + obj.css('font-family')).toString();
        ctx.textAlign = obj.css('text-align');

        var xpos;
        if(obj.css('text-align') == 'left'){
            xpos = matrix[4];
        } else if(obj.css('text-align') == 'center'){
            xpos = Number(matrix[4]) + (obj.width()*matrix[0])/2;

        } else if(obj.css('text-align') == 'right'){
            xpos = Number(matrix[4]) + (obj.width()*matrix[0]);
        }

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], xpos, matrix[5]);
        var lh = obj.css('font-size').replace('px', '')*1.2;

        wrapText(ctx, obj.text(), 0, lh/2, obj.width()+25, lh);

        ctx.restore();
        putAnotherElementToCanvas();
    }
}

function putAnotherElementToCanvas(){

    canvasCounter++;
    console.log(canvasCounter+ ' - ' +elementArr.length)
    if(canvasCounter < elementArr.length){
        htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
    } else {
        postCanvas();
    }
}

function postCanvas()
{
    var tempCanvas      = document.createElement('canvas');
    tempCanvas.width    = cnvs.width;
    tempCanvas.height = cnvs.height;
    tempCanvas.getContext('2d').drawImage(cnvs, 0, 0);
//  cnvs.width              = 170;
//  cnvs.height             = 102;
    cnvs.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cnvs.width, cnvs.height);
    $.isFunction(callback.complete) && callback.complete.call(_this);
    canvas.remove();
}

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if(testWidth > maxWidth) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
}

function getObjMatrix(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
    return matrix;
}

})(jQuery);
ein

Aktualisiert mit Hintergrundbild und SVG-Grafiken.

// Html zu Canvas und Bild im Backend speichern
(Funktion($) {

var canvasCounter = 0;
var canvas, cnvs, ctx, elementArr, callback, _this;

$.fn.htmlToCanvas = function(options) {

    var defaults = {
        width: 1000,
        height: 600,
        complete: null
    };
    callback = $.extend(defaults, options);
    _this = this;

    return this.each(function() {

        createImage('#' + $(this)[0].id);
    });
}

$.fn.htmlToCanvas.toBinrary = function() {
    return cnvs.toDataURL("image/jpeg", 1);
}

$.fn.htmlToCanvas.removeCanvas = function() {
    canvas.remove();
}

function createImage(divobj) {
    if (canvas) canvas.remove();
    canvas = $('<canvas id="canvas" width="' + callback.width + '" height="' + callback.height + '" style="display: block;"></canvas>');
    $('body').append(canvas);
    cnvs = document.getElementById('canvas')
    ctx = cnvs.getContext("2d");

    ctx.fillStyle = $(divobj).css('background-color');
    ctx.fillRect(0, 0, callback.width, callback.height);
    canvasCounter = 0;
    elementArr = [];

    $(divobj + " img").each(function(index) {
        elementArr.push({
            type: 'img',
            zindex: $(this).css('z-index'),
            imgobj: $(this)
        });
    });

    $(divobj + " div.text-field").each(function(index) {
        elementArr.push({
            type: 'txt',
            zindex: $(this).css('z-index'),
            imgobj: $(this)
        });
    });
    /*======================== for svg rendar pm7014.10.15 ========================*/
    $(divobj + " div.hotsPot svg").each(function(index) {
        elementArr.push({
            type: 'svg',
            zindex: $(this).parent().css('z-index'),
            imgobj: $(this)
        });
    });
    /*======================== for svg rendar End pm7014.10.15 ========================*/
    elementArr.sort(function(a, b) {
        var dif = Number(a.zindex - b.zindex);
        return (dif);
    });

    //--------- background images ----------

    if ($(divobj).css('background-image') != 'none') {

        var background = new Image();
        var back_source = $(divobj).css('background-image');
        back_source = back_source.substring(4, back_source.length - 1);
        back_source = back_source.replace('"', '');
        back_source = back_source.replace('"', '');

        background.crossOrigin = "*"; // This enables CORS
        background.src = back_source;

        background.onload = function() {
            for (var w = 0; w < canvas.attr('width'); w += background.width) {
                for (var h = 0; h < canvas.attr('height'); h += background.height) {
                    ctx.drawImage(background, w, h);
                }
            }

            if (elementArr.length > 0) {
                htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
            } else {
                postCanvas();
            }
        }

    } else {
        if (elementArr.length > 0) {
            htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
        } else {
            postCanvas();
        }
    }
}

function htmlToCanvas(type, obj) {

    if (type == 'img') {
        var canvas_img = new Image();
        canvas_img.crossOrigin = "*"; // This enables CORS
        canvas_img.src = obj.attr('src');
        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7, matrix.length - 1).split(', ');

        canvas_img.onload = function() {
            ctx.save();
            ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
            ctx.drawImage(canvas_img, 0, 0);
            ctx.restore();
            putAnotherElementToCanvas();
        }

    } else if (type == 'txt') {

        ctx.save();

        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7, matrix.length - 1).split(', ');

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
        ctx.fillStyle = obj.css('background-color');
        ctx.fillRect(0, -7, obj.width(), obj.height());

        ctx.fillStyle = obj.css('color');
        ctx.font = (obj.css('font-size') + ' ' + obj.css('font-family')).toString();
        ctx.textAlign = obj.css('text-align');

        var xpos;
        if (obj.css('text-align') == 'left') {
            xpos = matrix[4];
        } else if (obj.css('text-align') == 'center') {
            xpos = Number(matrix[4]) + (obj.width() * matrix[0]) / 2;

        } else if (obj.css('text-align') == 'right') {
            xpos = Number(matrix[4]) + (obj.width() * matrix[0]);
        }

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], xpos, matrix[5]);
        var lh = obj.css('font-size').replace('px', '') * 1.2;

        wrapText(ctx, obj.text(), 0, lh / 2, obj.width() + 25, lh);

        ctx.restore();
        putAnotherElementToCanvas();
        /*======================== for svg rendar pm7014.10.15 ========================*/
    } else if (type == 'svg') {
        svgObj = setAttributes(obj);
        var data = "data:image/svg+xml;base64," + window.btoa($(obj).parent().html());
        var svg_img = new Image();
        svg_img.src = data;
        var svgMatrix = getObjMatrix(obj.parent());
        svgMatrix = svgMatrix.substring(7, svgMatrix.length - 1).split(', ');
        svg_img.onload = function() {
            ctx.save();
            ctx.transform(svgMatrix[0], svgMatrix[1], svgMatrix[2], svgMatrix[3], svgMatrix[4], svgMatrix[5]);
            ctx.drawImage(svg_img, 0, 0);
            ctx.restore();
            putAnotherElementToCanvas();
        };
    }
    /* ======================== for svg rendar pm7014.10.15 ======================== */

}

function setAttributes(el) {
    el.attr("version", "1.1");
    el.attr("xmlns", "http://www.w3.org/2000/svg");
    el.attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
    return el;
}



function putAnotherElementToCanvas() {

    canvasCounter++;
    //console.log(canvasCounter+ ' - ' +elementArr.length)
    if (canvasCounter < elementArr.length) {
        htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
    } else {
        postCanvas();
    }
}

function postCanvas() {
    var tempCanvas = document.createElement('canvas');
    tempCanvas.width = cnvs.width;
    tempCanvas.height = cnvs.height;
    tempCanvas.getContext('2d').drawImage(cnvs, 0, 0);
    //  cnvs.width              = 170;
    //  cnvs.height             = 102;
    cnvs.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cnvs.width, cnvs.height);
    $.isFunction(callback.complete) && callback.complete.call(_this);
    canvas.remove();
}

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}

function getObjMatrix(obj) {
    var matrix = obj.css("-webkit-transform") ||
        obj.css("-moz-transform") ||
        obj.css("-ms-transform") ||
        obj.css("-o-transform") ||
        obj.css("transform");
    return matrix;
}

})(jQuery);

CSS-Rotation und Transform funktionieren nicht perfekt ... Ich habe diese Dinge in meinem Code
transformieren: drehen (-13deg);
z-Index: 40;
. Alle Updates bitte.

Ich habe dafür Matrix verwendet. Probier diese.

Am Do, 15. Oktober 2015 um 13:57 Uhr schrieb Yo Yo [email protected] :

CSS-Rotation und Transform funktionieren nicht perfekt ...ich habe diese Sachen
in meinem Code
transformieren: drehen (-13deg);
z-Index: 40;
. Alle Updates bitte.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_Hinweis: Wir fahren nach Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja Urlaub vom 20. bis 23.
Oktober._

Mit besten Empfehlungen
_Arindam Mojumder_
​​
HTML5- und jQuery-Teamleiter

_Indus Net-Technologien_ http://www.indusnet.co.in
Ein ISO 9001:2008 & ISO 27001:2005 zertifiziertes Unternehmen

Von Dun & Bradstreet als Nr. 1 IT-KMU in Indien bewertet - 2008

Gtalk: [email protected]

Skype: arindam_mojumder

Mob:+919830307843,+918420200614
Telefon: +91-33-32902857/23576070
Gebührenfrei (USA und Kanada): +1-888-652-2121
Großbritannien: +44-020-81444070

Fax: +1-760-284-6062

Diese Nachricht enthält Informationen, die privilegiert oder vertraulich sein können
und ist Eigentum der INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Es ist nur für die Person bestimmt, an die es
adressiert. Wenn Sie nicht der beabsichtigte Empfänger sind, sind Sie nicht autorisiert
um diese Nachricht zu lesen, zu drucken, aufzubewahren, zu verbreiten, zu verteilen oder zu verwenden
oder einen Teil davon. Wenn Sie diese Nachricht fälschlicherweise erhalten, benachrichtigen Sie bitte
sofort den Absender und löschen Sie alle Kopien dieser Nachricht. INDUS-NETZ
TECHNOLOGIES http://www.indusnet.co.in/ übernimmt keine Haftung für
virenverseuchte Mails.

@arindamm welcher ? kannst du mir die aktualisierte Datei schicken.

@arindamm : Wenn Sie über den obigen Code sprechen, wo Sie ihn genau hinzufügen.

bereits hinzugefügt, überprüfen Sie die angehängte js-Datei in meiner vorherigen E-Mail.

Am Do, 15. Oktober 2015 um 15:52 Uhr schrieb Yo Yo [email protected] :

@arindamm https://github.com/arindamm : Wenn du über die sprichst
obiger Code, als wo es genau hinzugefügt werden soll.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.

_Hinweis: Wir fahren nach Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja Urlaub vom 20. bis 23.
Oktober._

Mit besten Empfehlungen
_Arindam Mojumder_
​​
HTML5- und jQuery-Teamleiter

_Indus Net-Technologien_ http://www.indusnet.co.in
Ein ISO 9001:2008 & ISO 27001:2005 zertifiziertes Unternehmen

Von Dun & Bradstreet als Nr. 1 IT-KMU in Indien bewertet - 2008

Gtalk: [email protected]

Skype: arindam_mojumder

Mob:+919830307843,+918420200614
Telefon: +91-33-32902857/23576070
Gebührenfrei (USA und Kanada): +1-888-652-2121
Großbritannien: +44-020-81444070

Fax: +1-760-284-6062

Diese Nachricht enthält Informationen, die privilegiert oder vertraulich sein können
und ist Eigentum der INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Es ist nur für die Person bestimmt, an die es
adressiert. Wenn Sie nicht der beabsichtigte Empfänger sind, sind Sie nicht autorisiert
um diese Nachricht zu lesen, zu drucken, aufzubewahren, zu verbreiten, zu verteilen oder zu verwenden
oder einen Teil davon. Wenn Sie diese Nachricht fälschlicherweise erhalten, benachrichtigen Sie bitte
sofort den Absender und löschen Sie alle Kopien dieser Nachricht. INDUS-NETZ
TECHNOLOGIES http://www.indusnet.co.in/ übernimmt keine Haftung für
virenverseuchte Mails.

@arindamm @niklasvh habt ihr ein Update zu diesem Thema? Ich versuche, Text vertikal auszurichten, aber er kommt nicht richtig heraus. Funktioniert in IE 11, aber nicht in IE 9.

Verzeihung.

Am Montag, den 19. Oktober 2015 um 15:45 Uhr schrieb Ranga [email protected] :

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh habt ihr ein Update zu diesem Problem?
Ich versuche, Text vertikal auszurichten, aber er kommt nicht richtig heraus.
Funktioniert in IE 11, aber nicht in IE 9.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.

_Hinweis: Wir fahren nach Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja Urlaub vom 20. bis 23.
Oktober._

Mit besten Empfehlungen
_Arindam Mojumder_
​​
HTML5- und jQuery-Teamleiter

_Indus Net-Technologien_ http://www.indusnet.co.in
Ein ISO 9001:2008 & ISO 27001:2005 zertifiziertes Unternehmen

Von Dun & Bradstreet als Nr. 1 IT-KMU in Indien bewertet - 2008

Gtalk: [email protected]

Skype: arindam_mojumder

Mob:+919830307843,+918420200614
Telefon: +91-33-32902857/23576070
Gebührenfrei (USA und Kanada): +1-888-652-2121
Großbritannien: +44-020-81444070

Fax: +1-760-284-6062

Diese Nachricht enthält Informationen, die privilegiert oder vertraulich sein können
und ist Eigentum der INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Es ist nur für die Person bestimmt, an die es
adressiert. Wenn Sie nicht der beabsichtigte Empfänger sind, sind Sie nicht autorisiert
um diese Nachricht zu lesen, zu drucken, aufzubewahren, zu verbreiten, zu verteilen oder zu verwenden
oder einen Teil davon. Wenn Sie diese Nachricht fälschlicherweise erhalten, benachrichtigen Sie bitte
sofort den Absender und löschen Sie alle Kopien dieser Nachricht. INDUS-NETZ
TECHNOLOGIES http://www.indusnet.co.in/ übernimmt keine Haftung für
virenverseuchte Mails.

@arindamm @niklasvh : hallo sir , overflow :versteckt und am Rand links: -42px; wird nicht auf meine Bilder angewendet. Bitte verweisen Sie mich auf eine Lösung oder können Sie die Datei bitte aktualisieren. Bitte.

Ich habe in diesem Teil nicht gearbeitet. Tut mir leid zu sagen, dass ich nicht helfen kann. du kannst deine machen
eigene Funktion und beschneiden Sie das Bild mit der Funktion canvas.draw().

Am Donnerstag, 29. Oktober 2015 um 11:12 Uhr schrieb Yo Yo [email protected] :

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : hallo sir, überlauf: versteckt ist nicht
auf meine Bilder angewendet werden. Bitte verweisen Sie mir eine Lösung oder Können Sie bitte?
aktualisiere die Datei. Bitte.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.

Mit besten Empfehlungen
_Arindam Mojumder_
​​
HTML5- und jQuery-Teamleiter

_Indus Net-Technologien_ http://www.indusnet.co.in
Ein ISO 9001:2008 & ISO 27001:2005 zertifiziertes Unternehmen

Von Dun & Bradstreet als Nr. 1 IT-KMU in Indien bewertet - 2008

Gtalk: [email protected]

Skype: arindam_mojumder

Mob:+919830307843,+918420200614
Telefon: +91-33-32902857/23576070
Gebührenfrei (USA und Kanada): +1-888-652-2121
Großbritannien: +44-020-81444070

Fax: +1-760-284-6062

Diese Nachricht enthält Informationen, die privilegiert oder vertraulich sein können
und ist Eigentum der INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Es ist nur für die Person bestimmt, an die es
adressiert. Wenn Sie nicht der beabsichtigte Empfänger sind, sind Sie nicht autorisiert
um diese Nachricht zu lesen, zu drucken, aufzubewahren, zu verbreiten, zu verteilen oder zu verwenden
oder einen Teil davon. Wenn Sie diese Nachricht fälschlicherweise erhalten, benachrichtigen Sie bitte
sofort den Absender und löschen Sie alle Kopien dieser Nachricht. INDUS-NETZ
TECHNOLOGIES http://www.indusnet.co.in/ übernimmt keine Haftung für
virenverseuchte Mails.

Sie können einen Workaround tun, der hier beschrieben wird:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

@ jjoe64 https://github.com/niklasvh/html2canvas/issues/209#issuecomment -152904727

Vermutlich wurde das noch nicht angeschaut.

Irgendwie benötigte translateY, um für die vertikale Ausrichtung zu arbeiten (hätte gehofft, dass dies eine einfache Implementierung gewesen wäre, aber offensichtlich nicht).

👍

          img = document.createElement("img")
          img.src = canvas.toDataURL()
          newCanvas = document.createElement('canvas')
          ctx = newCanvas.getContext("2d")
          newCanvas.height = 350
          newCanvas.width = 200
          ctx.translate(185, 35)
          ctx.rotate(90 * Math.PI/180)
          ctx.drawImage(img,0,0); #draw it
          canvasURL = newCanvas.toDataURL()

Von html2canvas bekomme ich Canvas. Ich verwende dann das obige Javascript, um eine neue Leinwand zu erstellen, die um 90 Grad gedreht ist.

Verwenden Sie Höhe, Breite, übersetzen Sie die Eigenschaft gemäß Ihrem Anwendungsfall

Die Box-Shadow CSS3 funktioniert nicht ？ Aber trotzdem danke

Transformationen werden teilweise in 1.0.0 . unterstützt

@niklasvh Irgendwelche Informationen darüber, welche Transformationen genau unterstützt werden und welche nicht?

drehen scheint nicht zu funktionieren