변환은 아직 지원되지 않습니다.

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에서 지원되지만).

구독 중. 여기에서도 이미지/html에 대한 더 나은 회전 솔루션을 찾고 있습니다. 우리는 "도"로 작업하기 위해 -webkit-transform이 필요하지만 이 매트릭스 항목은 필요하지 않습니다.

감사 해요

인사말,

스케일링은 어떻습니까? 제대로 렌더링되지 않는 크기 조정된 텍스트가 있습니다. 등장인물들이 모두 모여듭니다. 누구든지 이 확장 기능을 구현하기 위한 올바른 방향을 알려줄 수 있습니까?

나는 회전이 필요합니다 :(

변환 스케일의 구현은 훌륭할 것입니다. 글꼴과 이미지 품질을 높일 수 있기 때문에 정말 중요한 포인트라고 생각합니다. 예를 들어 텍스트를 렌더링하고 브라우저로 확대/축소하면 품질이 정말 나쁩니다. 그러면 html2canvas-plugin이 텍스트 편집기 등에 유용할 수 있습니다.

@niklasvh : 가까운 장래에 이 기능을 구현할 계획입니까? 나는 그것을 감사하고 그것을 위해 기부할 것입니다.

안녕하세요, 이 기능이 정말 이 훌륭한 도구를 놓치고 있습니다. 이 기능에 대한 계획이 있으신가요?

@mjaggard - 이미지 회전 코드가 최신 버전의 라이브러리에 통합될 가능성이 있습니까?
나는 당신의 코드를 보았고 그것은 매우 다른 구조를 가지고 있는 것 같습니다.
감사 해요!

안녕하세요,

이 기능을 곧 추가할 계획입니까?
매우 유용할 것입니다!!

정말 감사합니다 !

안녕하세요,
회전은 이 버전에서 이미(webkit-transform) 작동 중입니다.
예시.
이 클래스를 div에 추가하고 이미 테스트했는지 확인하십시오.

.rt{-ms-변환: 회전(7deg); /* IE 9 _/
-웹킷 변환: 회전(7deg); // 크롬, 사파리, 오페라 */
변환: 회전(7deg);}

2015년 1월 7일 수요일 오후 7시 2분, dscarteland [email protected]
썼다:

안녕하세요,

이 기능을 곧 추가할 계획입니까?
매우 유용할 것입니다!!

정말 감사합니다 !

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips 나도 텍스트 회전이 필요합니다 :(

회전된 div 스크린샷에 대한 솔루션을 찾는 사람이 있습니까?

+1

모든 브라우저에 대한 회전 및 변환이 포함된 전체 작업 코드. 파일을 첨부할 수 없습니다. 파일을 수집하도록 저에게 메일을 보내주십시오.

좋아 고마워!

pull 요청을 하거나 JS Fiddle을 사용하는 것을 고려해 보셨습니까?

안녕하세요 ,
대단해!! 파일을 회전 및 변환으로 가져올 수 있습니까?
지금 당신을 위해 일하고 있습니다.

2015년 9월 29일 화요일 오후 3시 32분, Arindam Mojumder [email protected]
썼다:

모든 브라우저에 대한 회전 및 변환이 포함된 전체 작업 코드. 캔트
파일을 첨부합니다. 저에게 메일을 보내 파일을 수집하거나 이 링크를 방문하십시오.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

_아마 싱_
_PHP/MySQL 개발자_
_페이스북
https://www.facebook.com/pages/Kodework/741342762609839 // 링크드인
https://www.linkedin.com/company/kodework_

_이메일:_ 아마르. [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;
}

})(제이쿼리);
NS

배경 이미지 및 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;
}

})(제이쿼리);

CSS 회전 및 변환이 완벽하게 작동하지 않습니다 ... 내 코드에 이러한 항목이 있습니다.
변환: 회전(-13deg);
z-인덱스: 40;
. 업데이트 부탁드립니다.

나는 이것을 위해 매트릭스를 사용했습니다. 이걸로 해봐.

2015년 10월 15일 목요일 오후 1시 57분에 Yo Yo [email protected]에서 다음과 같이 썼습니다.

CSS 회전 및 변환이 완벽하게 작동하지 않습니다 ...이 물건이 있습니다.
내 코드에서
변환: 회전(-13deg);
z-인덱스: 40;
. 업데이트 부탁드립니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_참고: Durga Puja로 출발합니다.
https://en.wikipedia.org/wiki/Durga_Puja 20~23일 휴가
십월._

마음을 담아
_아린다 모점더_

HTML5 및 jQuery 팀 리더

_인더스넷테크놀로지스_ http://www.indusnet.co.in
ISO 9001:2008 및 ISO 27001:2005 인증 기업

2008년 Dun & Bradstreet에서 인도 IT SME 1위 평가

지톡 :

스카이프 : arindam_mojumder

폭도:+919830307843,+918420200614
전화: +91-33-32902857/23576070
수신자 부담(미국 및 캐나다): +1-888-652-2121
영국 : +44-020-81444070

팩스 : 0760-284-6062

이 메시지에는 권한이 있거나 기밀일 수 있는 정보가 포함되어 있습니다.
INDUS NET TECHNOLOGIES의 자산입니다.
http://www.indusnet.co.in/. 받는 사람에게만 해당됩니다.
해결됩니다. 수신인이 아닌 경우 승인되지 않습니다.
이 메시지를 읽거나, 인쇄하거나, 사본을 보관하거나, 배포하거나, 사용하기 위해
또는 그 일부. 이 메시지가 잘못 수신되면 알려주세요.
발신인에게 즉시 연락하고 이 메시지의 모든 사본을 삭제하십시오. 인더스넷
TECHNOLOGIES http://www.indusnet.co.in/ 은 다음에 대한 책임을 지지 않습니다.
바이러스에 감염된 메일.

@arindamm 어느 쪽인가요? 업데이트된 파일을 보내주실 수 있습니까?

@arindamm : 정확히 어디에 추가해야 하는지보다 위의 코드를 말하는 것이라면.

이미 추가되었으니 이전 메일에 첨부된 js 파일을 확인해주세요.

2015년 10월 15일 목요일 오후 3시 52분에 Yo Yo [email protected]에서 다음과 같이 썼습니다.

@arindamm https://github.com/arindamm : 에 대해 이야기한다면
정확히 추가할 위치보다 위의 코드입니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.

_참고: Durga Puja로 출발합니다.
https://en.wikipedia.org/wiki/Durga_Puja 20~23일 휴가
십월._

마음을 담아
_아린다 모점더_

HTML5 및 jQuery 팀 리더

_인더스넷테크놀로지스_ http://www.indusnet.co.in
ISO 9001:2008 및 ISO 27001:2005 인증 기업

2008년 Dun & Bradstreet에서 인도 IT SME 1위 평가

지톡 :

스카이프 : arindam_mojumder

폭도:+919830307843,+918420200614
전화: +91-33-32902857/23576070
수신자 부담(미국 및 캐나다): +1-888-652-2121
영국 : +44-020-81444070

팩스 : 0760-284-6062

이 메시지에는 권한이 있거나 기밀일 수 있는 정보가 포함되어 있습니다.
INDUS NET TECHNOLOGIES의 자산입니다.
http://www.indusnet.co.in/. 받는 사람에게만 해당됩니다.
해결됩니다. 수신인이 아닌 경우 승인되지 않습니다.
이 메시지를 읽거나, 인쇄하거나, 사본을 보관하거나, 배포하거나, 사용하기 위해
또는 그 일부. 이 메시지가 잘못 수신되면 알려주세요.
발신인에게 즉시 연락하고 이 메시지의 모든 사본을 삭제하십시오. 인더스넷
TECHNOLOGIES http://www.indusnet.co.in/ 은 다음에 대한 책임을 지지 않습니다.
바이러스에 감염된 메일.

@arindamm @niklasvh 이 문제에 대한 업데이트가 있습니까? 일부 텍스트를 세로로 정렬하려고 하는데 제대로 나오지 않습니다. IE 11에서는 잘 작동하지만 IE 9에서는 작동하지 않습니다.

죄송 해요.

2015년 10월 19일 월요일 오후 3시 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
.

_참고: Durga Puja로 출발합니다.
https://en.wikipedia.org/wiki/Durga_Puja 20~23일 휴가
십월._

마음을 담아
_아린다 모점더_

HTML5 및 jQuery 팀 리더

_인더스넷테크놀로지스_ http://www.indusnet.co.in
ISO 9001:2008 및 ISO 27001:2005 인증 기업

2008년 Dun & Bradstreet에서 인도 IT SME 1위 평가

지톡 :

스카이프 : arindam_mojumder

폭도:+919830307843,+918420200614
전화: +91-33-32902857/23576070
수신자 부담(미국 및 캐나다): +1-888-652-2121
영국 : +44-020-81444070

팩스 : 0760-284-6062

이 메시지에는 권한이 있거나 기밀일 수 있는 정보가 포함되어 있습니다.
INDUS NET TECHNOLOGIES의 자산입니다.
http://www.indusnet.co.in/. 받는 사람에게만 해당됩니다.
해결됩니다. 수신인이 아닌 경우 승인되지 않습니다.
이 메시지를 읽거나, 인쇄하거나, 사본을 보관하거나, 배포하거나, 사용하기 위해
또는 그 일부. 이 메시지가 잘못 수신되면 알려주세요.
발신인에게 즉시 연락하고 이 메시지의 모든 사본을 삭제하십시오. 인더스넷
TECHNOLOGIES http://www.indusnet.co.in/ 은 다음에 대한 책임을 지지 않습니다.
바이러스에 감염된 메일.

@arindamm @niklasvh : 안녕하세요 선생님, overflow :hidden 및 margin-left: -42px; 내 이미지에 적용되지 않습니다. 친절하게 나에게 솔루션을 참조하거나 파일을 업데이트할 수 있습니다. 제발.

나는 그 부분에서 일하지 않았다. 도와드릴 수 없어 죄송합니다. 당신은 당신의
자체 함수를 만들고 canvas.draw() 함수로 이미지를 자릅니다.

2015년 10월 29일 목요일 오전 11시 12분에 Yo Yo [email protected]에서 다음과 같이 썼습니다.

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : 안녕하세요 선생님, 오버플로 : 숨김이 아닙니다.
내 이미지에 적용됩니다. 친절하게 나에게 솔루션을 참조하십시오
파일을 업데이트합니다. 제발.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.

마음을 담아
_아린다 모점더_

HTML5 및 jQuery 팀 리더

_인더스넷테크놀로지스_ http://www.indusnet.co.in
ISO 9001:2008 및 ISO 27001:2005 인증 기업

2008년 Dun & Bradstreet에서 인도 IT SME 1위 평가

지톡 :

스카이프 : arindam_mojumder

폭도:+919830307843,+918420200614
전화: +91-33-32902857/23576070
수신자 부담(미국 및 캐나다): +1-888-652-2121
영국 : +44-020-81444070

팩스 : 0760-284-6062

이 메시지에는 권한이 있거나 기밀일 수 있는 정보가 포함되어 있습니다.
INDUS NET TECHNOLOGIES의 자산입니다.
http://www.indusnet.co.in/. 받는 사람에게만 해당됩니다.
해결됩니다. 수신인이 아닌 경우 승인되지 않습니다.
이 메시지를 읽거나, 인쇄하거나, 사본을 보관하거나, 배포하거나, 사용하기 위해
또는 그 일부. 이 메시지가 잘못 수신되면 알려주세요.
발신인에게 즉시 연락하고 이 메시지의 모든 사본을 삭제하십시오. 인더스넷
TECHNOLOGIES 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

이것은 아직 검토되지 않았다고 추측합니다.

수직 정렬을 위해 작동하는 데 필요한 번역입니다(간단한 구현이기를 바랐지만 분명히 그렇지 않았습니다).

👍

          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에서 캔버스를 얻습니다. 그런 다음 위의 자바스크립트를 사용하여 90도 회전된 newCanvas를 만듭니다.

사용 사례에 따라 높이, 너비, 속성 변환

box-shadow css3가 작동하지 않습니다 ？ 그래도 감사합니다

변환은 1.0.0에서 부분적으로 지원됩니다.

@niklasvh 정확히 어떤 변환이 지원되고 지원되지 않는지에 대한 정보가 있습니까?

회전이 작동하지 않는 것 같습니다