Html2canvas: -webkit-transform：不工作

创建于 2013-05-31  ·  37评论  ·  资料来源: niklasvh/html2canvas

转换 css 不起作用。

img class="imageobject" id="3" src="images/large/food.png" style="-webkit-transform: matrix(0.5, 0.42, -0.42, 0.5, 120, 52);"

我非常需要这个功能。 我试图通过实现矩阵来编辑您的代码，但失败了。

我已经使用过这个功能
function renderImage(ctx, element, image, bounds, border, matx) {}
这里我又传递了一个参数“matx”。 它是该图像的矩阵值。 但不能将此矩阵分配给“ctx”。
同样的问题也发生在文本字段上。

请帮我。

Feature
资料来源
picture arindamINT

最有用的评论

@liteelips我也是，我也需要文本旋转 :(

picture luck2011 于 2015-01-31
👍2

所有37条评论

尚不支持转换。

114#184#209

niklasvh picture niklasvh 于 2013-05-31

有解决方法 - 不漂亮，但仍然（适用于 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);

?>

我希望它有帮助。 =)

schtr4jh picture schtr4jh 于 2013-06-03

我添加了对旋转 90、180 或 270 度的图像的支持。 https://github.com/mjaggard/html2canvas/tree/simple-rotation

非图像旋转通常不受支持，其他转换也不支持（尽管我无论如何 html2canvas 支持一些平移和旋转，因为它让浏览器完成工作）。

mjaggard picture mjaggard 于 2013-06-17

订阅。 也在此处为图像/html 寻找更好的旋转解决方案。 我们需要 -webkit-transform 来处理“度”，而不是这个矩阵的东西。

谢谢

panthar1 picture panthar1 于 2013-06-23

你好，

缩放呢？ 我有一个无法正确呈现的缩放文本； 角色都挤在一起了。 任何人都可以指出我可能实现此缩放功能的正确方向吗？

paulinosantos picture paulinosantos 于 2013-07-19

我需要旋转:(

liteelips picture liteelips 于 2013-08-27

变换尺度的实现会很棒。 我认为这是非常重要的一点，因为您可以提高字体和图像质量。 如果您为示例渲染文本并使用浏览器进行缩放，则质量非常糟糕。 这可以使您的 html2canvas-plugin 也可用于文本编辑器等。

@niklasvh ：您计划在不久的将来实现此功能吗？ 我会很感激，并会为此捐款。

ak4784 picture ak4784 于 2014-01-16

嗨，这个功能真的很想念这个优秀的工具，这个功能有什么计划吗？

nicoja picture nicoja 于 2014-12-10
😕1

@mjaggard - 您的图像旋转代码是否有可能集成到该库的最新版本中？
我看过你的代码，它似乎有非常不同的结构。
谢谢！

xims picture xims 于 2014-12-11

你好，

您打算很快添加此功能吗？
这将是非常有用的！！

非常感谢 ！

dscarteland picture dscarteland 于 2015-01-07

你好，
旋转已经（webkit-transform）在这个版本中工作
例子。
在任何 div 中添加这个类并检查我是否已经测试过它。

.rt{-ms-transform: 旋转 (7deg); /* IE 9 _/
-webkit-transform：旋转（7度）； /_ Chrome、Safari、Opera */
变换：旋转（7度）；}

2015 年 1 月 7 日星期三晚上 7:02，dscarteland通知@github.com
写道：

你好，

您打算很快添加此功能吗？
这将是非常有用的！！

非常感谢 ！

—
直接回复此邮件或在 GitHub 上查看
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

chamanrastogi picture chamanrastogi 于 2015-01-20

@liteelips我也是，我也需要文本旋转 :(

luck2011 picture luck2011 于 2015-01-31
👍2

有没有人找到旋转 div 屏幕截图的任何解决方案？

checking12 picture checking12 于 2015-09-15

+1

CrazyEraserUK picture CrazyEraserUK 于 2015-09-29

适用于所有浏览器的带有旋转和变换的完整工作代码。 无法附加文件。 发邮件给我收集文件[email protected]

arindamINT picture arindamINT 于 2015-09-29

太棒了，谢谢你！

你有没有考虑过提出拉取请求或穿上 JS Fiddle？

CrazyEraserUK picture CrazyEraserUK 于 2015-09-29

你好 ，
那很棒 ！！ 我可以获取文件作为旋转和转换吗
现在正在为你工作。

2015 年 9 月 29 日，星期二，下午 3:32，Arindam Mojumder通知@github.com
写道：

适用于所有浏览器的带有旋转和变换的完整工作代码。 不能
附上文件。 给我发邮件以收集文件或访问此链接。

—
直接回复此邮件或在 GitHub 上查看
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

_阿马尔·辛格_
_PHP/MySQL 开发人员_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_电子邮件：_阿马尔。 [email protected] [email protected]
_手机：*+91 7040980700
*部门：*开发
*支持：_ [email protected]
_地址：_ E-4 Vicente Greens, Socoro,
波尔沃林，果阿 403521。
_网址：_ www.kodework.com

checking12 picture checking12 于 2015-09-30

嗨，我也在努力使转换（旋转）工作，特别是在 IE 中。 完成的画布实际上包含一个旋转的元素，但通常只显示元素的一半。

hakonkrogh picture hakonkrogh 于 2015-10-08

这是脚本的风格：

$('#<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);
一种

arindamINT picture arindamINT 于 2015-10-13

更新了背景图像和 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);

arindamINT picture arindamINT 于 2015-10-14

css 旋转和变换不能完美地工作......我的代码中有这些东西
变换：旋转（-13度）；
z-索引：40；
. 任何更新请。

checking12 picture checking12 于 2015-10-15

我为此使用了矩阵。 试试这个。

2015 年 10 月 15 日星期四下午 1:57，Yo Yo [email protected]写道：

css 旋转和变换不能完美地工作......我有这些东西
在我的代码中
变换：旋转（-13度）；
z-索引：40；
. 任何更新请。

—
直接回复此邮件或在 GitHub 上查看
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_注意：我们将前往杜尔加法会
https://en.wikipedia.org/wiki/Durga_Puja 20 日至 23 日假期
十月。_

最诚挚的问候
_Arindam Mojumder_

HTML5 和 jQuery 团队负责人

_Indus Net Technologies_ http://www.indusnet.co.in
一家通过 ISO 9001:2008 和 ISO 27001:2005 认证的公司

2008 年被 Dun & Bradstreet 评为印度排名第一的 IT 中小企业

Gtalk : [email protected]

Skype：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/。 它仅适用于接受它的人
被解决。 如果您不是预期的收件人，则您无权
阅读、打印、保留副本、传播、分发或使用此消息
或其任何部分。 如果您错误地收到此消息，请通知
发件人立即删除此邮件的所有副本。 工业网
TECHNOLOGIES http://www.indusnet.co.in/不承担任何责任
病毒感染的邮件。

arindamINT picture arindamINT 于 2015-10-15

@arindamm 是哪一个？ 你能把更新的文件发给我吗？

checking12 picture checking12 于 2015-10-15

@arindamm ：如果您谈论的是上面的代码，而不是确切地添加它的位置。

checking12 picture checking12 于 2015-10-15

已经添加了，查看我之前邮件中附加的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
.

_注意：我们将前往杜尔加法会
https://en.wikipedia.org/wiki/Durga_Puja 20 日至 23 日假期
十月。_

最诚挚的问候
_Arindam Mojumder_

HTML5 和 jQuery 团队负责人

_Indus Net Technologies_ http://www.indusnet.co.in
一家通过 ISO 9001:2008 和 ISO 27001:2005 认证的公司

2008 年被 Dun & Bradstreet 评为印度排名第一的 IT 中小企业

Gtalk : [email protected]

Skype：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/。 它仅适用于接受它的人
被解决。 如果您不是预期的收件人，则您无权
阅读、打印、保留副本、传播、分发或使用此消息
或其任何部分。 如果您错误地收到此消息，请通知
发件人立即删除此邮件的所有副本。 工业网
TECHNOLOGIES http://www.indusnet.co.in/不承担任何责任
病毒感染的邮件。

arindamINT picture arindamINT 于 2015-10-15
👎1

@arindamm @niklasvh你们有关于这个问题的更新吗？ 我正在尝试垂直对齐一些文本，但结果不正确。 在 IE 11 中工作正常，但在 IE 9 中不工作。

rangambr picture rangambr 于 2015-10-19

对不起。

在星期一，2015年10月19日下午3:45，朗高[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 日假期
十月。_

最诚挚的问候
_Arindam Mojumder_

HTML5 和 jQuery 团队负责人

_Indus Net Technologies_ http://www.indusnet.co.in
一家通过 ISO 9001:2008 和 ISO 27001:2005 认证的公司

2008 年被 Dun & Bradstreet 评为印度排名第一的 IT 中小企业

Gtalk : [email protected]

Skype：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/。 它仅适用于接受它的人
被解决。 如果您不是预期的收件人，则您无权
阅读、打印、保留副本、传播、分发或使用此消息
或其任何部分。 如果您错误地收到此消息，请通知
发件人立即删除此邮件的所有副本。 工业网
TECHNOLOGIES http://www.indusnet.co.in/不承担任何责任
病毒感染的邮件。

arindamINT picture arindamINT 于 2015-10-19

@arindamm @niklasvh ：你好先生，溢出：隐藏和左边距：-42px； 未应用于我的图像。 请给我一个解决方案，或者你能更新文件吗？ 请。

checking12 picture checking12 于 2015-10-29

我没有在那个部分工作。 很抱歉，我帮不上忙。 你可以让你的
自己的函数并通过 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
.

最诚挚的问候
_Arindam Mojumder_

HTML5 和 jQuery 团队负责人

_Indus Net Technologies_ http://www.indusnet.co.in
一家通过 ISO 9001:2008 和 ISO 27001:2005 认证的公司

2008 年被 Dun & Bradstreet 评为印度排名第一的 IT 中小企业

Gtalk : [email protected]

Skype：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/。 它仅适用于接受它的人
被解决。 如果您不是预期的收件人，则您无权
阅读、打印、保留副本、传播、分发或使用此消息
或其任何部分。 如果您错误地收到此消息，请通知
发件人立即删除此邮件的所有副本。 工业网
TECHNOLOGIES http://www.indusnet.co.in/不承担任何责任
病毒感染的邮件。

arindamINT picture arindamINT 于 2015-10-29

你可以做一个在这里告诉你的解决方法：
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

jjoe64 picture jjoe64 于 2015-10-31
👎2

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

brcontainer picture brcontainer 于 2015-11-02

估计这个还没看。

有点需要 translateY 用于垂直对齐（本来希望这是一个简单的实现，但显然不是）。

👍

Dayjo picture Dayjo 于 2016-06-06 
          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 创建一个旋转 90 度的 newCanvas。

根据您的用例使用高度、宽度、平移属性

faizmh picture faizmh 于 2016-06-27

box-shadow css3 不行了？ 不过还是谢谢你

ZengTianShengZ picture ZengTianShengZ 于 2017-03-14

1.0.0 部分支持转换

niklasvh picture niklasvh 于 2017-12-12

@niklasvh关于支持和不支持哪些转换的任何信息？

ZachSaucier picture ZachSaucier 于 2018-06-21

旋转似乎不起作用

IshanFx picture IshanFx 于 2019-12-30
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

dking3876 picture dking3876  ·  4评论
anthonymejia picture anthonymejia  ·  4评论
tjchambers32 picture tjchambers32  ·  3评论
Loki180 picture Loki180  ·  4评论
ABHIKSINGHH picture ABHIKSINGHH  ·  3评论