変換はまだサポートされていません。

114＃184＃209

回避策があります-きれいではありませんが、それでも（pngおよびjpg画像で機能します）。 基本的なロジック：回転した画像を見つけ、その場所を置き換え、PHP機能を提供します。

ステップ1：CSS変換サポートを提供するjQuery関数を含めます。

(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：回転した画像の場所をPHP URLに置き換えます（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でサポートされています）。

購読する。 ここでもimages / htmlのより良い回転ソリューションを探しています。 ただし、このマトリックスのものではなく、「度」を操作するには-webkit-transformが必要です。

ありがとう

ご挨拶、

スケーリングはどうですか？ 正しくレンダリングされない拡大縮小されたテキストがあります。 キャラクターはすべて一緒に窮屈になります。 このスケーリング機能を実装するための正しい方向を誰かに教えてもらえますか？

回転する必要があります:(

変換スケールの実装は素晴らしいでしょう。 フォントや画質を上げることができるので、とても重要なポイントだと思います。 たとえば、テキストをレンダリングしてブラウザでズームすると、品質が非常に悪くなります。 これにより、html2canvas-pluginがテキストエディタなどにも役立つ可能性があります。

@niklasvh ：近い将来、この機能を実装する予定はありますか？ 私はそれを感謝し、そのためにuaに寄付をします。

こんにちは、この機能は本当にこの優れたツールを見逃しています、この機能の計画はありますか？

@ mjaggard-画像回転コードを最近のバージョンのライブラリに統合できる可能性はありますか？
私はあなたのコードを見ました、そしてそれは非常に異なった構造を持っているようです。
ありがとう！

やあ、

この機能をすぐに追加する予定はありますか？
とても便利です!!

どうもありがとう ！

やあ、
回転はすでに（webkit-transform）このバージョンで機能しています
例。
このクラスを任意のdivに追加し、すでにテスト済みであることを確認します。

.rt {-ms-transform：rotate（7deg）; / * IE 9 _ /
-webkit-transform：rotate（7deg）; / _ Chrome、Safari、Opera * /
変換：rotate（7deg）;}

19:02の水曜日、2015年1月7日には、dscarteland [email protected]
書きました：

やあ、

この機能をすぐに追加する予定はありますか？
とても便利です!!

どうもありがとう ！

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
。

@liteelips私も、テキストの回転も必要です:(

回転したdivのスクリーンショットの解決策を見つけた人はいますか？

+1

すべてのブラウザで回転と変換を行う完全に機能するコード。 ファイルを添付できません。 ファイル[email protected]を収集するために私にメールしてください

素晴らしいありがとう！

プルリクエストを行うか、JS Fiddleを使用することを検討しましたか？

やあ 、
すごいね ！！ 回転と変換としてファイルを取得できますか
今あなたのために働いています。

3時32分PMの火、2015年9月29日には、Arindam Mojumder [email protected]
書きました：

すべてのブラウザで回転と変換を行う完全に機能するコード。 できません
ファイルを添付します。 ファイルを収集するために私にメールするか、このリンクにアクセスしてください。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
。

_アマールシン_
_PHP / MySQL Developer_
_フェイスブック
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_Eメール：_amar。 [email protected] [email protected]
_モバイル：* + 91 7040980700
*部門：*開発
*サポート：_support @ kodework.com
_住所：_E-4 Vicente Greens、Socoro、
ゴア403521、ポーボリム。
_ウェブサイト：

こんにちは。特に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をCanvasに保存し、画像をバックエンドに保存します

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）;
NS

背景画像とsvgグラフィックで更新されました。

// HtmlをCanvasに保存し、画像をバックエンドに保存します
（関数（$）{

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の回転と変換が完全に機能しない...コードにこれらのものが含まれています
変換：rotate（-13deg）;
z-index：40;
。 更新があればお願いします。

これにはマトリックスを使用しました。 これを試してください。

1時57分PMに木、2015年10月15日には、ヨーヨー[email protected]は書きました：

cssの回転と変換は完全には機能しません...私はこれらのものを持っています
私のコードで
変換：rotate（-13deg）;
z-index：40;
。 更新があればお願いします。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
。

_注：ドゥルガープジャーに向けて出発します
https://en.wikipedia.org/wiki/Durga_Puja20日から23日までの休暇
10月。_

敬具
_Arindam Mojumder_
。
HTML5＆jQueryチームリーダー

_Indus Net Technologies_ http://www.indusnet.co.in
ISO 9001：2008およびISO 27001：2005認定企業

Dun＆Bradstreetにより2008年にインドで第1位のITSMEと評価されました

Gtalk： [email protected]

skype：arindam_mojumder

暴徒：+ 919830307843、+ 918420200614
電話番号：+ 91-33-32902857 / 23576070
フリーダイヤル（米国およびカナダ）：+ 1-888-652-2121
英国：+ 44-020-81444070

ファックス：+ 1-760-284-6062

このメッセージには、特権または機密情報が含まれている可能性があります
INDUS NETTECHNOLOGIESの所有物です
http://www.indusnet.co.in/。 それはそれが相手である人だけを対象としています
対処されます。 あなたが意図された受信者でない場合、あなたは許可されていません
このメッセージを読んだり、印刷したり、コピーを保持したり、配布したり、配布したり、使用したりするには
またはその一部。 このメッセージを誤って受け取った場合は、通知してください
送信者はすぐに送信し、このメッセージのすべてのコピーを削除します。 インダスネット
テクノロジーhttp://www.indusnet.co.in/は、
ウイルスに感染したメール。

@arindammどれ？ 更新されたファイルを送っていただけませんか。

@arindamm ：正確に追加する場所よりも、上記のコードについて話している場合。

すでに追加されているので、以前のメールで添付されたjsファイルを確認してください。

15:52の木、2015年10月15日には、ヨーヨー[email protected]は書きました：

@arindamm https://github.com/arindamm ：あなたが話しているなら
正確に追加する場所よりも上記のコード。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
。

_注：ドゥルガープジャーに向けて出発します
https://en.wikipedia.org/wiki/Durga_Puja20日から23日までの休暇
10月。_

敬具
_Arindam Mojumder_
。
HTML5＆jQueryチームリーダー

_Indus Net Technologies_ http://www.indusnet.co.in
ISO 9001：2008およびISO 27001：2005認定企業

Dun＆Bradstreetにより2008年にインドで第1位のITSMEと評価されました

Gtalk： [email protected]

skype：arindam_mojumder

暴徒：+ 919830307843、+ 918420200614
電話番号：+ 91-33-32902857 / 23576070
フリーダイヤル（米国およびカナダ）：+ 1-888-652-2121
英国：+ 44-020-81444070

ファックス：+ 1-760-284-6062

このメッセージには、特権または機密情報が含まれている可能性があります
INDUS NETTECHNOLOGIESの所有物です
http://www.indusnet.co.in/。 それはそれが相手である人だけを対象としています
対処されます。 あなたが意図された受信者でない場合、あなたは許可されていません
このメッセージを読んだり、印刷したり、コピーを保持したり、配布したり、配布したり、使用したりするには
またはその一部。 このメッセージを誤って受け取った場合は、通知してください
送信者はすぐに送信し、このメッセージのすべてのコピーを削除します。 インダスネット
テクノロジーhttp://www.indusnet.co.in/は、
ウイルスに感染したメール。

@arindamm @niklasvhこの問題に関する最新情報はありますか？ 一部のテキストを垂直方向に揃えようとしていますが、正しく表示されません。 IE 11では正常に動作しますが、IE9では動作しません。

ごめん。

15:45時月、2015年10月19日には、ランガ[email protected]は書きました：

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvhこの問題に関する最新情報はありますか？
一部のテキストを垂直方向に揃えようとしていますが、正しく表示されません。
IE 11では正常に動作しますが、IE9では動作しません。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
。

_注：ドゥルガープジャーに向けて出発します
https://en.wikipedia.org/wiki/Durga_Puja20日から23日までの休暇
10月。_

敬具
_Arindam Mojumder_
。
HTML5＆jQueryチームリーダー

_Indus Net Technologies_ http://www.indusnet.co.in
ISO 9001：2008およびISO 27001：2005認定企業

Dun＆Bradstreetにより2008年にインドで第1位のITSMEと評価されました

Gtalk： [email protected]

skype：arindam_mojumder

暴徒：+ 919830307843、+ 918420200614
電話番号：+ 91-33-32902857 / 23576070
フリーダイヤル（米国およびカナダ）：+ 1-888-652-2121
英国：+ 44-020-81444070

ファックス：+ 1-760-284-6062

このメッセージには、特権または機密情報が含まれている可能性があります
INDUS NETTECHNOLOGIESの所有物です
http://www.indusnet.co.in/。 それはそれが相手である人だけを対象としています
対処されます。 あなたが意図された受信者でない場合、あなたは許可されていません
このメッセージを読んだり、印刷したり、コピーを保持したり、配布したり、配布したり、使用したりするには
またはその一部。 このメッセージを誤って受け取った場合は、通知してください
送信者はすぐに送信し、このメッセージのすべてのコピーを削除します。 インダスネット
テクノロジーhttp://www.indusnet.co.in/は、
ウイルスに感染したメール。

@arindamm @niklasvh ：hello sir、 overflow：hidden and margin-left：-42px; 私の画像に適用されていません。 解決策を教えてください。またはファイルを更新してください。 お願いします。

私はその部分で働きませんでした。 仕方がないと言ってすみません。 あなたはあなたを作ることができます
独自の関数を作成し、canvas.draw（）関数で画像を切り抜きます。

11時12分AMに木、2015年10月29日には、ヨーヨー[email protected]は書きました：

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh ：こんにちは、オーバーフロー：hiddenはありません
私の画像に適用されます。 解決策を教えてくださいまたはお願いします
ファイルを更新します。 お願いします。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
。

敬具
_Arindam Mojumder_
。
HTML5＆jQueryチームリーダー

_Indus Net Technologies_ http://www.indusnet.co.in
ISO 9001：2008およびISO 27001：2005認定企業

Dun＆Bradstreetにより2008年にインドで第1位のITSMEと評価されました

Gtalk： [email protected]

skype：arindam_mojumder

暴徒：+ 919830307843、+ 918420200614
電話番号：+ 91-33-32902857 / 23576070
フリーダイヤル（米国およびカナダ）：+ 1-888-652-2121
英国：+ 44-020-81444070

ファックス：+ 1-760-284-6062

このメッセージには、特権または機密情報が含まれている可能性があります
INDUS NETTECHNOLOGIESの所有物です
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から、canvasを取得します。 次に、上記のjavascriptを使用して、90度回転するnewCanvasを作成します。

高さ、幅を使用し、ユースケースに応じてプロパティを変換します

ボックスシャドウcss3が機能していませんか？それでもありがとうございます

変換は1.0.0で部分的にサポートされています

@niklasvhどの変換がサポートされているかサポートされていないかについての情報はありますか？

回転が機能していないようです