Les transformations ne sont pas encore prises en charge.

114 #184 #209

Il existe une solution de contournement - pas jolie, mais quand même (fonctionne pour les images png et jpg). Logique de base : recherchez les images pivotées, remplacez leur emplacement et fournissez des fonctionnalités PHP.

Étape 1 : incluez la fonction jQuery qui prend en charge la transformation CSS.

(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));

Étape 2 : remplacez l'emplacement des images pivotées par l'URL PHP (à inclure avant le rendu html2canvas).

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

Étape 3 : créez rotateimg.php qui fournit la fonctionnalité de rotation

<?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);

?>

J'espère que ça aide. =)

J'ai ajouté la prise en charge des images pivotées de 90, 180 ou 270 degrés. https://github.com/mjaggard/html2canvas/tree/simple-rotation

La rotation sans image n'est généralement pas prise en charge, pas plus que les autres transformations (bien que certaines traductions et rotations soient prises en charge par html2canvas de toute façon car il laisse le navigateur faire le travail).

Abonnement. Vous recherchez également une meilleure solution de rotation pour les images/html ici. Nous avons besoin de -webkit-transform pour travailler avec des "degrés", pas ce truc matriciel cependant.

Merci

Les salutations,

Qu'en est-il de la mise à l'échelle ? J'ai un texte mis à l'échelle qui ne s'affiche pas correctement ; les personnages sont tous à l'étroit. Quelqu'un peut-il m'indiquer la bonne direction pour peut-être mettre en œuvre cette fonctionnalité de mise à l'échelle ?

J'ai besoin de tourner :(

La mise en œuvre de l'échelle de transformation serait formidable. Je pense que c'est un point vraiment important, car vous pouvez augmenter la qualité de la police et de l'image. Si vous restituez par exemple un texte et zoomez avec le navigateur, la qualité est vraiment mauvaise. Cela pourrait rendre votre plugin html2canvas également utile pour les éditeurs de texte, etc.

@niklasvh : Prévoyez-vous d'implémenter cette fonctionnalité dans un avenir proche ? J'apprécierais cela et je ferais un don pour cela.

Salut, cette fonctionnalité manque vraiment à cet excellent outil, avez-vous prévu cette fonctionnalité ?

@mjaggard - y a-t-il une chance que votre code de rotation d'image puisse être intégré dans la version récente de la bibliothèque ?
J'ai regardé votre code et il semble avoir une structure très différente.
Merci!

Salut,

Prévoyez-vous d'ajouter cette fonctionnalité bientôt ?
Ça serait bien utile !!

Merci beaucoup !

Salut,
La rotation fonctionne déjà (webkit-transform) dans cette version pour
Exemple.
Ajoutez cette classe dans n'importe quel div et vérifiez que je l'ai déjà testée.

.rt{-ms-transform : rotation (7 degrés); /* IE 9 _/
-webkit-transform : rotation (7 degrés); /_ Chrome, Safari, Opéra */
transformer : rotation (7 degrés);}

Le mer. 7 janv. 2015 à 19h02, dscarteland [email protected]
a écrit:

Salut,

Prévoyez-vous d'ajouter cette fonctionnalité bientôt ?
Ça serait bien utile !!

Merci beaucoup !

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips moi aussi, j'ai aussi besoin d'une rotation de texte :(

Quelqu'un a-t-il trouvé une solution pour la capture d'écran des divs pivotés?

+1

Code de travail complet avec rotation et transformation pour tous les navigateurs. Impossible de joindre le fichier. Envoyez- moi un mail pour récupérer le fichier

Super merci!

Avez-vous envisagé de faire une pull request ou de mettre JS Fiddle ?

salut ,
ce grand !! puis-je obtenir le fichier s'il vous plaît comme rotation et transformation
travaille pour vous maintenant.

Le mardi 29 septembre 2015 à 15h32, Arindam Mojumder [email protected]
a écrit:

Code de travail complet avec rotation et transformation pour tous les navigateurs. Je ne peux pas
joindre le fichier. Écrivez-moi pour récupérer le fichier ou visitez ce lien.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment-144011634
.

_Amar Singh_
_Développeur PHP/MySQL_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_Email :_ amar. [email protected] [email protected]
_Mobile: *+91 7040980700
*Département : *Développement
*Support :_ [email protected]
_Adresse :_ E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
_Site Web :_ www.kodework.com

Bonjour, j'ai également du mal à faire fonctionner les transformations (rotation), en particulier dans IE. Le canevas fini contient en fait un élément pivoté, mais généralement, seule la moitié de l'élément est affichée.

Voici le style du script :

$('#<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 vers Canvas et enregistrement de l'image dans le backend

fichier htmlVersCanvas.js

(fonction($){

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);
une

Mise à jour avec l'image d'arrière-plan et les graphiques svg.

// Html vers Canvas et enregistrement de l'image dans le backend
(fonction ($) {

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

rotation css et Transform ne fonctionne pas parfaitement ... J'ai ces trucs dans mon code
transformer : rotation (-13 degrés);
indice z : 40 ;
. Toute mise à jour s'il vous plaît.

J'ai utilisé la matrice pour cela. essaye celui-là.

Le jeu. 15 octobre 2015 à 13:57, Yo Yo [email protected] a écrit :

rotation css et Transform ne fonctionne pas parfaitement ... j'ai ces trucs
dans mon code
transformer : rotation (-13 degrés);
indice z : 40 ;
. Toute mise à jour s'il vous plaît.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment-148316296
.

_Note : nous partirons pour Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacances du 20 au 23
Octobre._

Avec mes meilleures salutations
_Arindam Mojumder_
​​
Chef d'équipe HTML5 et jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Une entreprise certifiée ISO 9001:2008 & ISO 27001:2005

Classé n°1 des PME informatiques en Inde - 2008 par Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Téléphone : +91-33-32902857/23576070
Sans frais (États-Unis et Canada) : +1-888-652-2121
Royaume-Uni : +44-020-81444070

Télécopieur : +1-760-284-6062

Ce message contient des informations qui peuvent être privilégiées ou confidentielles
et est la propriété de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Il est destiné uniquement à la personne à qui il
est adressé. Si vous n'êtes pas le destinataire prévu, vous n'êtes pas autorisé
lire, imprimer, conserver une copie, diffuser, distribuer ou utiliser ce message
ou toute partie de celui-ci. Si vous recevez ce message par erreur, veuillez en informer
immédiatement l'expéditeur et supprimez toutes les copies de ce message. RÉSEAU INDUS
TECHNOLOGIES http://www.indusnet.co.in/ n'accepte aucune responsabilité pour
courriers infectés par un virus.

@arindamm lequel ? pouvez-vous m'envoyer le fichier mis à jour.

@arindamm : Si vous parlez du code ci-dessus, où l'ajouter exactement.

déjà ajouté, vérifiez le fichier js joint dans mon courrier précédent.

Le jeu. 15 octobre 2015 à 15h52, Yo Yo [email protected] a écrit :

@arindamm https://github.com/arindamm : Si vous parlez du
code ci-dessus que l'endroit où l'ajouter exactement.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment-148344194
.

_Note : nous partirons pour Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacances du 20 au 23
Octobre._

Avec mes meilleures salutations
_Arindam Mojumder_
​​
Chef d'équipe HTML5 et jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Une entreprise certifiée ISO 9001:2008 & ISO 27001:2005

Classé n°1 des PME informatiques en Inde - 2008 par Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Téléphone : +91-33-32902857/23576070
Sans frais (États-Unis et Canada) : +1-888-652-2121
Royaume-Uni : +44-020-81444070

Télécopieur : +1-760-284-6062

Ce message contient des informations qui peuvent être privilégiées ou confidentielles
et est la propriété de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Il est destiné uniquement à la personne à qui il
est adressé. Si vous n'êtes pas le destinataire prévu, vous n'êtes pas autorisé
lire, imprimer, conserver une copie, diffuser, distribuer ou utiliser ce message
ou toute partie de celui-ci. Si vous recevez ce message par erreur, veuillez en informer
immédiatement l'expéditeur et supprimez toutes les copies de ce message. RÉSEAU INDUS
TECHNOLOGIES http://www.indusnet.co.in/ n'accepte aucune responsabilité pour
courriers infectés par un virus.

@arindamm @niklasvh avez-vous une mise à jour sur ce problème ? J'essaie d'aligner verticalement du texte et il ne sort pas correctement. Fonctionne très bien dans IE 11 mais ne fonctionne pas dans IE 9.

Pardon.

Le lundi 19 octobre 2015 à 15h45, Ranga [email protected] a écrit :

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh avez-vous une mise à jour sur ce problème ?
J'essaie d'aligner verticalement du texte et il ne sort pas correctement.
Fonctionne très bien dans IE 11 mais ne fonctionne pas dans IE 9.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.

_Note : nous partirons pour Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacances du 20 au 23
Octobre._

Avec mes meilleures salutations
_Arindam Mojumder_
​​
Chef d'équipe HTML5 et jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Une entreprise certifiée ISO 9001:2008 & ISO 27001:2005

Classé n°1 des PME informatiques en Inde - 2008 par Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Téléphone : +91-33-32902857/23576070
Sans frais (États-Unis et Canada) : +1-888-652-2121
Royaume-Uni : +44-020-81444070

Télécopieur : +1-760-284-6062

Ce message contient des informations qui peuvent être privilégiées ou confidentielles
et est la propriété de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Il est destiné uniquement à la personne à qui il
est adressé. Si vous n'êtes pas le destinataire prévu, vous n'êtes pas autorisé
lire, imprimer, conserver une copie, diffuser, distribuer ou utiliser ce message
ou toute partie de celui-ci. Si vous recevez ce message par erreur, veuillez en informer
immédiatement l'expéditeur et supprimez toutes les copies de ce message. RÉSEAU INDUS
TECHNOLOGIES http://www.indusnet.co.in/ n'accepte aucune responsabilité pour
courriers infectés par un virus.

@arindamm @niklasvh : bonjour monsieur , débordement :hidden et margin-left: -42px; n'est pas appliqué à mes images. Veuillez me référer une solution ou pouvez-vous s'il vous plaît mettre à jour le fichier. S'il te plaît.

Je n'ai pas travaillé dans cette partie. Désolé de dire que je ne peux pas aider. vous pouvez faire votre
propre fonction et recadrer l'image par la fonction canvas.draw().

Le jeudi 29 octobre 2015 à 11h12, Yo Yo [email protected] a écrit :

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : bonjour monsieur, débordement : caché n'est pas
s'appliquer à mes images. Veuillez me référer une solution ou pouvez-vous s'il vous plaît
mettre à jour le fichier. S'il te plaît.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment-152082507
.

Avec mes meilleures salutations
_Arindam Mojumder_
​​
Chef d'équipe HTML5 et jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Une entreprise certifiée ISO 9001:2008 & ISO 27001:2005

Classé n°1 des PME informatiques en Inde - 2008 par Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Téléphone : +91-33-32902857/23576070
Sans frais (États-Unis et Canada) : +1-888-652-2121
Royaume-Uni : +44-020-81444070

Télécopieur : +1-760-284-6062

Ce message contient des informations qui peuvent être privilégiées ou confidentielles
et est la propriété de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Il est destiné uniquement à la personne à qui il
est adressé. Si vous n'êtes pas le destinataire prévu, vous n'êtes pas autorisé
lire, imprimer, conserver une copie, diffuser, distribuer ou utiliser ce message
ou toute partie de celui-ci. Si vous recevez ce message par erreur, veuillez en informer
immédiatement l'expéditeur et supprimez toutes les copies de ce message. RÉSEAU INDUS
TECHNOLOGIES http://www.indusnet.co.in/ n'accepte aucune responsabilité pour
courriers infectés par un virus.

vous pouvez faire une solution de contournement qui est indiquée ici :
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

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

Je suppose que cela n'a toujours pas été examiné.

Un peu de translateY nécessaire pour travailler pour l'alignement vertical (j'aurais espéré que cela aurait été une implémentation simple mais évidemment pas).

??

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

De html2canvas, j'obtiens canvas. J'utilise ensuite le javascript ci-dessus pour créer une nouvelle toile qui pivote de 90 degrés.

utiliser la hauteur, la largeur, la propriété de traduction en fonction de votre cas d'utilisation

La box-shadow css3 ne fonctionne pas Mais merci quand même

Les transformations sont partiellement prises en charge dans 1.0.0

@niklasvh Des informations sur les transformations qui sont et ne sont pas prises en charge ?

la rotation ne semble pas fonctionner