Преобразования пока не поддерживаются.

114 # 184 # 209

Есть обходной путь - не очень, но все же (работает для изображений в формате PNG и JPG). Базовая логика: найти повернутые изображения, заменить их местоположение и обеспечить функциональность PHP.

Шаг 1. Включите функцию jQuery, которая обеспечивает поддержку преобразования 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));

Шаг 2: замените расположение повернутых изображений на URL-адрес PHP (включите его перед рендерингом html2canvas).

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

Шаг 3: создайте rotateimg.php, который обеспечивает функцию поворота

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

?>

Я надеюсь, что это помогает. знак равно

Я добавил поддержку изображений, повернутых на 90, 180 или 270 градусов. https://github.com/mjaggard/html2canvas/tree/simple-rotation

Поворот без изображения обычно не поддерживается, как и другие преобразования (хотя некоторые переводы и повороты все равно поддерживаются html2canvas, потому что он позволяет браузеру выполнять работу).

Подписка. Здесь также ищем лучшее решение для поворота изображений / html. Нам нужен -webkit-transform для работы с «степенями», но не с матрицами.

Спасибо

Привет,

А как насчет масштабирования? У меня масштабированный текст, который не отображается должным образом; героям становится тесно вместе. Может ли кто-нибудь указать мне правильное направление для реализации этой функции масштабирования?

Мне нужно повернуть :(

Было бы здорово реализовать масштаб трансформации. Я думаю, что это действительно важный момент, потому что вы можете улучшить качество шрифтов и изображений. Если вы визуализируете для примера текст и масштабируете его в браузере, качество действительно плохое. Это может сделать ваш html2canvas-plugin также полезным для текстовых редакторов и так далее.

@niklasvh :

Привет, эта функция действительно не хватает этого отличного инструмента, есть ли планы по этой функции?

@mjaggard - есть ли шанс, что ваш код поворота изображения может быть интегрирован в последнюю версию библиотеки?
Я посмотрел на ваш код, и мне кажется, что он имеет совсем другую структуру.
Спасибо!

Привет,

Планируете ли вы добавить эту функцию в ближайшее время?
Было бы очень полезно !!

Большое спасибо !

Привет,
Вращение уже работает (webkit-transform) в этой версии для
пример.
Добавьте этот класс в любой div и убедитесь, что я уже тестировал его.

.rt {-ms-transform: повернуть (7deg); / * IE 9 _ /
-webkit-transform: повернуть (7deg); / _ Chrome, Safari, Opera * /
преобразовать: повернуть (7deg);}

В среду, 7 января 2015 г., в 19:02, dscarteland [email protected]
написал:

Привет,

Планируете ли вы добавить эту функцию в ближайшее время?
Было бы очень полезно !!

Большое спасибо !

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips мне тоже, мне тоже нужен поворот текста :(

Кто-нибудь находит решение для скриншота повернутых div?

+1

Полный рабочий код с вращением и преобразованием для всего браузера. Не могу прикрепить файл. Напишите мне, чтобы забрать файл

Отлично, спасибо!

Вы думали о том, чтобы сделать пул-реквест или поставить JS Fiddle?

Привет ,
это здорово !! Могу я получить файл, пожалуйста, как вращение и преобразование
работает на вас сейчас.

Во вторник, 29 сентября 2015 г., в 15:32, Ариндам Моджумдер [email protected]
написал:

Полный рабочий код с вращением и преобразованием для всего браузера. Не могу
прикрепить файл. Напишите мне, чтобы забрать файл, или перейдите по этой ссылке.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

_Амар Сингх_
_PHP / MySQL Developer_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_Электронная почта: _ amar. [email protected] [email protected]
_Мобильный: * + 91 7040980700
* Отдел: * Развитие
* Поддержка: _ [email protected]
_Адрес: _ E-4 Vicente Greens, Socoro,
Порворим, Гоа, 403521.
_Веб-сайт: _ www.kodework.com

Привет, я также изо всех сил пытаюсь заставить работать преобразования (вращение), особенно в IE. Готовый холст действительно содержит повернутый элемент, но обычно отображается только половина элемента.

Это стиль сценария:

$('#<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 на холст и сохранение изображения в бэкэнд

файл htmlToCanvas.js

(функция ($) {

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

Обновлено с использованием фонового изображения и графики SVG.

// HTML на холст и сохранение изображения в бэкэнд
(функция ($) {

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 и Transform не работают идеально ... У меня есть эти вещи в моем коде
преобразовать: повернуть (-13deg);
z-индекс: 40;
. Любые обновления, пожалуйста.

Я использовал для этого матрицу. Попробуй это.

15 октября 2015 г. в 13:57 Йо Йо [email protected] написал:

css Rotation и Transform не работают идеально ... У меня есть эти вещи
в моем коде
преобразовать: повернуть (-13deg);
z-индекс: 40;
. Любые обновления, пожалуйста.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_Примечание: мы отправляемся на Дурга Пуджа
https://en.wikipedia.org/wiki/Durga_Puja каникулы с 20-го по 23-е
Октябрь._

С наилучшими пожеланиями
_Ариндам Моджумдер_

Руководитель группы HTML5 и jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Компания, имеющая сертификат ISO 9001: 2008 и ISO 27001: 2005.

Рейтинг № 1 ИТ-МСП в Индии - 2008 по версии Dun & Bradstreet

Gtalk: [email protected]

скайп: arindam_mojumder

Моб: + 919830307843, + 918420200614
Телефон: + 91-33-32902857 / 23576070
Бесплатный звонок (США и Канада): + 1-888-652-2121
Великобритания: + 44-020-81444070

Факс: + 1-760-284-6062

Это сообщение содержит информацию, которая может быть закрытой или конфиденциальной.
и является собственностью INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Он предназначен только для того, кому он
адресован. Если вы не являетесь предполагаемым получателем, вы не авторизованы
читать, распечатывать, сохранять копии, распространять, распространять или использовать это сообщение
или любая его часть. Если вы получили это сообщение по ошибке, сообщите об этом
отправителю немедленно и удалите все копии этого сообщения. ИНДУСНАЯ СЕТЬ
ТЕХНОЛОГИИ http://www.indusnet.co.in/ не несет ответственности за
зараженные вирусом письма.

@arindamm какой? можешь прислать мне обновленный файл.

@arindamm : Если вы говорите о приведенном выше коде, то где именно его добавить.

уже добавлен, проверьте прикрепленный файл js в моем предыдущем письме.

15 октября 2015 г. в 15:52 Йо Йо [email protected] написал:

@arindamm https://github.com/arindamm : Если вы говорите о
выше кода, чем то, где именно его добавить.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.

_Примечание: мы отправляемся на Дурга Пуджа
https://en.wikipedia.org/wiki/Durga_Puja каникулы с 20-го по 23-е
Октябрь._

С наилучшими пожеланиями
_Ариндам Моджумдер_

Руководитель группы HTML5 и jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Компания, имеющая сертификат ISO 9001: 2008 и ISO 27001: 2005.

Рейтинг № 1 ИТ-МСП в Индии - 2008 по версии Dun & Bradstreet

Gtalk: [email protected]

скайп: arindam_mojumder

Моб: + 919830307843, + 918420200614
Телефон: + 91-33-32902857 / 23576070
Бесплатный звонок (США и Канада): + 1-888-652-2121
Великобритания: + 44-020-81444070

Факс: + 1-760-284-6062

Это сообщение содержит информацию, которая может быть закрытой или конфиденциальной.
и является собственностью INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Он предназначен только для того, кому он
адресован. Если вы не являетесь предполагаемым получателем, вы не авторизованы
читать, распечатывать, сохранять копии, распространять, распространять или использовать это сообщение
или любая его часть. Если вы получили это сообщение по ошибке, сообщите об этом
отправителю немедленно и удалите все копии этого сообщения. ИНДУСНАЯ СЕТЬ
ТЕХНОЛОГИИ http://www.indusnet.co.in/ не несет ответственности за
зараженные вирусом письма.

@arindamm @niklasvh , ребята, у вас есть

извиняюсь.

В понедельник, 19 октября 2015 г., в 15:45 Ranga [email protected] написал:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh , ребята, у вас есть новости по этой проблеме?
Я пытаюсь выровнять текст по вертикали, но не получается.
Прекрасно работает в IE 11, но не работает в IE 9.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.

_Примечание: мы отправляемся на Дурга Пуджа
https://en.wikipedia.org/wiki/Durga_Puja каникулы с 20-го по 23-е
Октябрь._

С наилучшими пожеланиями
_Ариндам Моджумдер_

Руководитель группы HTML5 и jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Компания, имеющая сертификат ISO 9001: 2008 и ISO 27001: 2005.

Рейтинг № 1 ИТ-МСП в Индии - 2008 по версии Dun & Bradstreet

Gtalk: [email protected]

скайп: arindam_mojumder

Моб: + 919830307843, + 918420200614
Телефон: + 91-33-32902857 / 23576070
Бесплатный звонок (США и Канада): + 1-888-652-2121
Великобритания: + 44-020-81444070

Факс: + 1-760-284-6062

Это сообщение содержит информацию, которая может быть закрытой или конфиденциальной.
и является собственностью INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Он предназначен только для того, кому он
адресован. Если вы не являетесь предполагаемым получателем, вы не авторизованы
читать, распечатывать, сохранять копии, распространять, распространять или использовать это сообщение
или любая его часть. Если вы получили это сообщение по ошибке, сообщите об этом
отправителю немедленно и удалите все копии этого сообщения. ИНДУСНАЯ СЕТЬ
ТЕХНОЛОГИИ http://www.indusnet.co.in/ не несет ответственности за
зараженные вирусом письма.

@arindamm @niklasvh : привет, сэр, переполнение: скрыто и маржа слева: -42px; не применяется к моим изображениям. Пожалуйста, порекомендуйте мне решение или не могли бы вы обновить файл. Пожалуйста.

Я не работал в этой части. Извините, что не могу помочь. ты можешь сделать свой
собственная функция и обрезать изображение с помощью функции canvas.draw ().

В четверг, 29 октября 2015 г., в 11:12, Йо-Йо [email protected] написал:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : привет сэр, переполнение: скрыто нет
применяются к моим изображениям. Пожалуйста, направьте мне решение или не могли бы вы
обновить файл. Пожалуйста.

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.

С наилучшими пожеланиями
_Ариндам Моджумдер_

Руководитель группы HTML5 и jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Компания, имеющая сертификат ISO 9001: 2008 и ISO 27001: 2005.

Рейтинг № 1 ИТ-МСП в Индии - 2008 по версии Dun & Bradstreet

Gtalk: [email protected]

скайп: arindam_mojumder

Моб: + 919830307843, + 918420200614
Телефон: + 91-33-32902857 / 23576070
Бесплатный звонок (США и Канада): + 1-888-652-2121
Великобритания: + 44-020-81444070

Факс: + 1-760-284-6062

Это сообщение содержит информацию, которая может быть закрытой или конфиденциальной.
и является собственностью INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Он предназначен только для того, кому он
адресован. Если вы не являетесь предполагаемым получателем, вы не авторизованы
читать, распечатывать, сохранять копии, распространять, распространять или использовать это сообщение
или любая его часть. Если вы получили это сообщение по ошибке, сообщите об этом
отправителю немедленно и удалите все копии этого сообщения. ИНДУСНАЯ СЕТЬ
ТЕХНОЛОГИИ http://www.indusnet.co.in/ не несет ответственности за
зараженные вирусом письма.

вы можете сделать обходной путь, который описан здесь:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

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

Предполагаю, что это до сих пор не изучено.

Вид необходимого translateY для работы с вертикальным выравниванием (можно было бы надеяться, что это будет простая реализация, но, очевидно, нет).

👍

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

Из html2canvas я получаю холст. Затем я использую приведенный выше javascript для создания newCanvas, который поворачивается на 90 градусов.

использовать высоту, ширину, перевести свойство в соответствии с вашим вариантом использования

Box-shadow css3 не работает？ Но все же спасибо

Преобразования частично поддерживаются в 1.0.0

@niklasvh Есть информация о том, какие именно преобразования поддерживаются, а какие нет?

вращение кажется не работает