Las transformaciones aún no son compatibles.

114 # 184 # 209

Hay una solución: no es bonita, pero aún así (funciona para imágenes png y jpg). Lógica básica: busque imágenes rotadas, reemplace su ubicación y proporcione funcionalidad PHP.

Paso 1: incluya la función jQuery que proporciona soporte de transformación 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));

Paso 2: reemplace la ubicación de las imágenes rotadas con la URL de PHP (incluya esto antes de la representación de html2canvas).

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

Paso 3: cree rotateimg.php que proporciona la funcionalidad de rotación

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

?>

Espero que ayude. =)

Agregué soporte para imágenes giradas en 90, 180 o 270 grados. https://github.com/mjaggard/html2canvas/tree/simple-rotation

La rotación sin imágenes generalmente no es compatible y tampoco lo son otras transformaciones (aunque algunas traducciones y rotaciones son compatibles con html2canvas de todos modos porque permite que el navegador haga el trabajo).

Suscripción. Buscando una mejor solución de rotación para imágenes / html aquí también. Necesitamos -webkit-transform para trabajar con "grados", aunque no con este material de matriz.

Gracias

Saludos,

¿Qué pasa con la escala? Tengo un texto escalado que no se representa correctamente; los personajes se apiñan. ¿Alguien puede indicarme la dirección correcta para tal vez implementar esta función de escala?

Necesito rotar :(

La implementación de la escala de transformación sería excelente. Creo que es un punto muy importante, porque puedes aumentar la calidad de la fuente y la imagen. Si renderiza, por ejemplo, un texto y hace zoom con el navegador, la calidad es realmente mala. Eso podría hacer que su html2canvas-plugin también sea útil para editores de texto, etc.

@niklasvh : ¿

Hola, esta función realmente extraño esta excelente herramienta, ¿algún plan para esta función?

@mjaggard : ¿hay alguna posibilidad de que su código de rotación de imagen se pueda integrar en la versión reciente de la biblioteca?
He mirado su código y parece tener una estructura muy diferente.
¡Gracias!

Hola,

¿Planea agregar esta función pronto?
Sería muy útil !!

Muchas gracias !

Hola,
La rotación ya está funcionando (webkit-transform) en esta versión para
ejemplo.
Agregue esta clase en cualquier div y verifique que ya la probé.

.rt {-ms-transform: rotar (7 grados); / * IE 9 _ /
-webkit-transform: rotar (7 grados); / _ Chrome, Safari, Opera * /
transformar: rotar (7 grados);}

El miércoles 7 de enero de 2015 a las 7:02 p.m., dscarteland [email protected]
escribió:

Hola,

¿Planea agregar esta función pronto?
Sería muy útil !!

Muchas gracias !

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips me también, también necesito la rotación de texto :(

¿Alguien encuentra alguna solución para la captura de pantalla divs rotada?

+1

Código de trabajo completo con rotación y transformación para todos los navegadores. No se puede adjuntar el archivo. Envíeme para recoger el archivo [email protected]

¡Increíble gracias!

¿Ha considerado hacer una solicitud de extracción o poner JS Fiddle?

Hola ,
que gran !! ¿Puedo obtener el archivo por favor como rotación y transformación?
está trabajando para usted ahora.

El martes 29 de septiembre de 2015 a las 3:32 p.m., Arindam Mojumder [email protected]
escribió:

Código de trabajo completo con rotación y transformación para todos los navegadores. Hipocresía
adjunte el archivo. Envíeme un correo electrónico para recoger el archivo o visite este enlace.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

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

_Correo electrónico: _ amar. [email protected] [email protected]
_Móvil: * + 91 7040980700
* Departamento: * Desarrollo
* Soporte: _ [email protected]
_Dirección: _ E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
_Sitio web : _

Hola, también estoy luchando para que las transformaciones (rotar) funcionen, específicamente en IE. De hecho, el lienzo terminado contiene un elemento girado, pero normalmente solo se muestra la mitad del elemento.

Este es el estilo del guión:

$('#<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 en Canvas y guardando la imagen en el backend

archivo htmlToCanvas.js

(función ($) {

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

Actualizado con imagen de fondo y gráficos svg.

// Html en Canvas y guardando la imagen en el backend
(función ($) {

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 rotación y transformación no funciona perfectamente ... Tengo estas cosas en mi código
transformar: rotar (-13 grados);
índice z: 40;
. Cualquier actualización por favor.

He usado matrix para esto. prueba este.

El jueves 15 de octubre de 2015 a la 1:57 p.m., Yo Yo [email protected] escribió:

La rotación de CSS y Transform no funciona perfectamente ... Tengo estas cosas
en mi codigo
transformar: rotar (-13 grados);
índice z: 40;
. Cualquier actualización por favor.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_Nota: partiremos hacia Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacaciones del 20 al 23
Octubre._

Con los mejores deseos
_Arindam Mojumder_

Líder de equipo de HTML5 y jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Una empresa certificada ISO 9001: 2008 e ISO 27001: 2005

# 1 PYME de TI en India - 2008 por Dun & Bradstreet

Gtalk: [email protected]

skype: arindam_mojumder

Multitud: + 919830307843, + 918420200614
Teléfono: + 91-33-32902857 / 23576070
Número gratuito (EE. UU. Y Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070

Fax: + 1-760-284-6062

Este mensaje contiene información que puede ser privilegiada o confidencial.
y es propiedad de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Está destinado únicamente a la persona a quien
está dirigido. Si no es el destinatario previsto, no está autorizado
para leer, imprimir, conservar una copia, difundir, distribuir o utilizar este mensaje
o cualquier parte del mismo. Si recibe este mensaje por error, notifíquelo
el remitente inmediatamente y elimine todas las copias de este mensaje. RED INDUS
TECHNOLOGIES http://www.indusnet.co.in/ no acepta ninguna responsabilidad por
Correos infectados con virus.

@arindamm ¿ cuál? me pueden enviar el archivo actualizado.

@arindamm : Si estás hablando del código anterior, dónde agregarlo exactamente.

ya agregado, verifique el archivo js adjunto en mi correo anterior.

El jueves 15 de octubre de 2015 a las 3:52 p.m., Yo Yo [email protected] escribió:

@arindamm https://github.com/arindamm : Si estás hablando de la
código anterior que dónde agregarlo exactamente.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.

_Nota: partiremos hacia Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacaciones del 20 al 23
Octubre._

Con los mejores deseos
_Arindam Mojumder_

Líder de equipo de HTML5 y jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Una empresa certificada ISO 9001: 2008 e ISO 27001: 2005

# 1 PYME de TI en India - 2008 por Dun & Bradstreet

Gtalk: [email protected]

skype: arindam_mojumder

Multitud: + 919830307843, + 918420200614
Teléfono: + 91-33-32902857 / 23576070
Número gratuito (EE. UU. Y Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070

Fax: + 1-760-284-6062

Este mensaje contiene información que puede ser privilegiada o confidencial.
y es propiedad de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Está destinado únicamente a la persona a quien
está dirigido. Si no es el destinatario previsto, no está autorizado
para leer, imprimir, conservar una copia, difundir, distribuir o utilizar este mensaje
o cualquier parte del mismo. Si recibe este mensaje por error, notifíquelo
el remitente inmediatamente y elimine todas las copias de este mensaje. RED INDUS
TECHNOLOGIES http://www.indusnet.co.in/ no acepta ninguna responsabilidad por
Correos infectados con virus.

@arindamm @niklasvh , ¿tienen una actualización sobre este tema? Estoy tratando de alinear verticalmente un texto y no sale bien. Funciona bien en IE 11 pero no funciona en IE 9.

perdón.

El lunes 19 de octubre de 2015 a las 3:45 p.m., Ranga [email protected] escribió:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh , ¿tienen una actualización sobre este problema?
Estoy tratando de alinear verticalmente un texto y no sale bien.
Funciona bien en IE 11 pero no funciona en IE 9.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.

_Nota: partiremos hacia Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacaciones del 20 al 23
Octubre._

Con los mejores deseos
_Arindam Mojumder_

Líder de equipo de HTML5 y jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Una empresa certificada ISO 9001: 2008 e ISO 27001: 2005

# 1 PYME de TI en India - 2008 por Dun & Bradstreet

Gtalk: [email protected]

skype: arindam_mojumder

Multitud: + 919830307843, + 918420200614
Teléfono: + 91-33-32902857 / 23576070
Número gratuito (EE. UU. Y Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070

Fax: + 1-760-284-6062

Este mensaje contiene información que puede ser privilegiada o confidencial.
y es propiedad de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Está destinado únicamente a la persona a quien
está dirigido. Si no es el destinatario previsto, no está autorizado
para leer, imprimir, conservar una copia, difundir, distribuir o utilizar este mensaje
o cualquier parte del mismo. Si recibe este mensaje por error, notifíquelo
el remitente inmediatamente y elimine todas las copias de este mensaje. RED INDUS
TECHNOLOGIES http://www.indusnet.co.in/ no acepta ninguna responsabilidad por
Correos infectados con virus.

@arindamm @niklasvh : hola señor, desbordamiento: oculto y margen izquierdo: -42px; no se aplica a mis imágenes. Por favor remítame una solución o ¿puede actualizar el archivo? Por favor.

No trabajé en esa parte. Lamento decir que no puedo ayudar. puedes hacer tu
propia función y recortar la imagen con la función canvas.draw ().

El jueves 29 de octubre de 2015 a las 11:12 a. M., Yo Yo [email protected] escribió:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : hola señor, desbordamiento: oculto no
aplicándose a mis imágenes. Por favor, remítame una solución o ¿puede por favor?
actualice el archivo. Por favor.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.

Con los mejores deseos
_Arindam Mojumder_

Líder de equipo de HTML5 y jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Una empresa certificada ISO 9001: 2008 e ISO 27001: 2005

# 1 PYME de TI en India - 2008 por Dun & Bradstreet

Gtalk: [email protected]

skype: arindam_mojumder

Multitud: + 919830307843, + 918420200614
Teléfono: + 91-33-32902857 / 23576070
Número gratuito (EE. UU. Y Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070

Fax: + 1-760-284-6062

Este mensaje contiene información que puede ser privilegiada o confidencial.
y es propiedad de INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Está destinado únicamente a la persona a quien
está dirigido. Si no es el destinatario previsto, no está autorizado
para leer, imprimir, conservar una copia, difundir, distribuir o utilizar este mensaje
o cualquier parte del mismo. Si recibe este mensaje por error, notifíquelo
el remitente inmediatamente y elimine todas las copias de este mensaje. RED INDUS
TECHNOLOGIES http://www.indusnet.co.in/ no acepta ninguna responsabilidad por
Correos infectados con virus.

puede hacer una solución alternativa que se indica aquí:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

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

Adivinar esto todavía no se ha mirado.

Tipo de translateY necesario para trabajar para la alineación vertical (hubiera esperado que esto hubiera sido una implementación simple, pero obviamente no).

👍

          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, obtengo canvas. Luego uso el javascript anterior para crear un newCanvas que se gira 90 grados.

use alto, ancho, traduzca la propiedad de acuerdo con su caso de uso

El css3 de box-shadow no funciona？ Pero aún así gracias

Las transformaciones se admiten parcialmente en 1.0.0

@niklasvh ¿ Alguna información sobre exactamente qué transformaciones son compatibles y cuáles no?

rotar parece no funcionar