-webkit-transform: not working

[arindamINT]

The transfor css is not working.

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

I need this feature badly. I have tried to edit your code by implementing the matrix, but failed.

I have worked this this function
function renderImage(ctx, element, image, bounds, borders, matx) {}
Here I have passed one more parameter "matx". It is the matrix value of that image. But can't assign this matrix to the "ctx".
The same issue is happening for text field also.

Please help me.

[niklasvh]

Transforms aren't supported yet.
#114 #184 #209

[schtr4jh]

There's workaround - not pretty, but still (works for png and jpg pictures). Basic logic: find rotated images, replace their location and provide PHP functionality.

Step 1 : include jQuery function which provides CSS transform support.

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

Step 2 : replace location of rotated images with PHP URL (include this before html2canvas render).

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

Step 3 : create rotateimg.php which provides rotate functionality

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

?>

I hope it helps. =)

[mjaggard]

I've added support for images rotated by 90, 180 or 270 degrees. https://github.com/mjaggard/html2canvas/tree/simple-rotation

Non-image rotation is not generally supported and nor are other transformations (although I some translations and rotations are supported by html2canvas anyway because it lets the browser do the work).

[panthar1]

Subscribing. Looking for a better rotation solution for images/html here as well. We need -webkit-transform to work with "degrees", not this matrix stuff though.

Thanks

[paulinosantos]

Greetings,

What about scaling? I have a scaled text that doesn't renders properly; the characters get all cramped together. Can anyone point me to the right direction for maybe implementing this scaling feature?

[liteelips]

I need rotate :(

[ak4784]

The implementation of transform scale would be great. I think it is a really important point, because you are able to increase font- and image-quality. If you render for a example a text and zoom with the browser, the quality is really bad. That could make your html2canvas-plugin also useful for text-editors and so on.

@niklasvh : Do you plan to implement this feature in near future? I would appreciate that and would give u a donate for that.

[Kixell-NicolasJardillier]

Hi, this feature really miss this excellent tool, any plan to this feature ?

[xims]

@mjaggard - is there any chance your image rotation code can be integrated in the recent version of the library?
I've looked at your code and it seems to have very different structure.
Thanks!

[dscarteland]

Hi,

Do you plan to add this feature soon ?
It would be very useful !!

Thanks a lot !

[chamanrastogi]

Hi,
The rotation is already(webkit-transform) working in this version for
example.
Add this class in any div and check i already tested it.

.rt{-ms-transform: rotate(7deg); /* IE 9 /
-webkit-transform: rotate(7deg); / Chrome, Safari, Opera */
transform: rotate(7deg);}

On Wed, Jan 7, 2015 at 7:02 PM, dscarteland notifications@github.com
wrote:

Hi,

Do you plan to add this feature soon ?
It would be very useful !!

Thanks a lot !

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

[luck2011]

@liteelips me too, i also need text rotation :(

[checking12]

Does anyone find any solution for rotated divs screenshot?

[CrazyEraserUK]

+1

[arindamINT]

Full working code with rotation and transform for all browser. Can't attach the file. Mail me to collect the file arindamm@indusnet.co.in

[CrazyEraserUK]

Awesome, thank you!

Have you considered making a pull request or putting on JS Fiddle?

[checking12]

hi ,
that great !! can i get the file please as the rotation and transformation
is working for you now.

On Tue, Sep 29, 2015 at 3:32 PM, Arindam Mojumder notifications@github.com
wrote:

Full working code with rotation and transform for all browser. Can't
attach the file. Mail me to collect the file or visit this link.

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

Amar Singh
PHP/MySQL Developer
Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework

Email: amar.singh@kodework.com caleb@kodework.com
Mobile: *+91 7040980700
*Department: *Development
*Support: support@kodework.com
Address: E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
Website: www.kodework.com

[hakonkrogh]

Hi, I am also struggling to get transforms (rotate) to work, specifically in IE. The finished canvas does in fact contain a rotated element, but typically only half of the element is shown.

[arindamINT]

This is the style of the script:

$('#<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 to Canvas and saving image to backend

htmlToCanvas.js file

(function($){

var canvasCounter = 0;
var canvas, cnvs, ctx, elementArr, callback, _this;

$.fn.htmlToCanvas = function(options){

    var defaults    = {width: 1000, height: 600, complete: null};
    callback        = $.extend(defaults, options);
    _this           = this;

    return this.each(function(){

        createImage('#'+$(this)[0].id);
    });
}

$.fn.htmlToCanvas.toBinrary = function() {
    return cnvs.toDataURL("image/jpeg",1);
// return   cnvs.toDataURL({
//      format: 'png',
//      left: 0,
//      top: 0,
//      width: 200,
//      height: 150
//  })
}

$.fn.htmlToCanvas.removeCanvas = function() {
    canvas.remove();
}

function createImage(divobj)
{
    ////console.log(divobj);

    if(canvas) canvas.remove();
    canvas = $('<canvas id="canvas" width="' + callback.width + '" height="'+ callback.height +'" style="display: block;"></canvas>');
    $('body').append(canvas);
    cnvs    = document.getElementById('canvas')
    ctx     = cnvs.getContext("2d");

    ctx.fillStyle = $(divobj).css('background-color');
    ctx.fillRect(0,0,callback.width, callback.height);
    canvasCounter = 0;
    elementArr      = [];

    $(divobj + " img").each(function(index){
        elementArr.push({type: 'img', zindex: $(this).css('z-index'), imgobj: $(this)});
        console.log($(this));
    });

    $(divobj + " div").each(function(index){
        elementArr.push({type: 'txt', zindex: $(this).css('z-index'), imgobj: $(this)});
    });

    elementArr.sort(function (a, b) {
         //var a_zindex = a && a.zindex || "",
            //b_zindex = b && b.zindex || "";
        //return a_zindex.localeCompare(b_zindex);
        var dif = Number(a.zindex - b.zindex);
        //alert('cal '+dif);
        return (dif);
    });

    //--------- background images ----------

    if($(divobj).css('background-image') != 'none'){

        var background = new Image();
        var back_source = $(divobj).css('background-image');
        back_source = back_source.substring(4, back_source.length-1);
        back_source = back_source.replace('"', '');
        back_source = back_source.replace('"', '');
        //background.src = back_source;

        $.ajax({
            type: 'POST',
            url: 'data/imagedata.php',
            data: {'imgurl': back_source},
            success: function(_data){
                //console.log(_data);
                var imagedata = 'data:image/jpeg;base64,' + _data;
                background.src = imagedata;
                background.onload = function(){
                    for (var w = 0; w < canvas.attr('width'); w += background.width) {
                        for (var h = 0; h < canvas.attr('height'); h  += background.height){
                            ctx.drawImage(background, w, h);
                        }
                    }

                    if(elementArr.length > 0){
                        htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
                    } else {
                        postCanvas();
                    }
                }
            },
            error: function(xhr, textstatus){
                ////console.log(textstatus);
            }
        });

    } else {
        if(elementArr.length > 0){
            htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
        } else {
            postCanvas();
        }
    }
}

function htmlToCanvas(type, obj){

    if(type == 'img'){
        var canvas_img = new Image();
        canvas_img.crossOrigin = "*";  // This enables CORS
        canvas_img.src = obj.attr('src');
        //console.log(canvas_img.src);
        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7,matrix.length-1).split(', ');

            canvas_img.onload = function(){
                //console.log('onload');
                ctx.save();
                ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
                ctx.drawImage(canvas_img, 0, 0);
                ctx.restore();
                putAnotherElementToCanvas();
        }

    /*  $.ajax({
            type: 'POST',
            url: 'data/imagedata.php',
            data: {'imgurl': obj.attr('src')},
            success: function(_data){

                var imagedata = 'data:image/png;base64,' + _data;
                canvas_img.src = imagedata;

                canvas_img.onload = function(){
                    ctx.save();
                    ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
                    ctx.drawImage(canvas_img, 0, 0);
                    ctx.restore();
                    putAnotherElementToCanvas();
                }
            },
            error: function(xhr, textstatus){
                ////console.log(textstatus);
            }
        });*/

    } else if(type == 'txt'){

        ctx.save();

        var matrix = getObjMatrix(obj);
        matrix = matrix.substring(7,matrix.length-1).split(', ');

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
        ctx.fillStyle = obj.css('background-color');
        ctx.fillRect(0, -7, obj.width(), obj.height());

        ctx.fillStyle = obj.css('color');
        ctx.font = (obj.css('font-size') + ' '  + obj.css('font-family')).toString();
        ctx.textAlign = obj.css('text-align');

        var xpos;
        if(obj.css('text-align') == 'left'){
            xpos = matrix[4];
        } else if(obj.css('text-align') == 'center'){
            xpos = Number(matrix[4]) + (obj.width()*matrix[0])/2;

        } else if(obj.css('text-align') == 'right'){
            xpos = Number(matrix[4]) + (obj.width()*matrix[0]);
        }

        ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], xpos, matrix[5]);
        var lh = obj.css('font-size').replace('px', '')*1.2;

        wrapText(ctx, obj.text(), 0, lh/2, obj.width()+25, lh);

        ctx.restore();
        putAnotherElementToCanvas();
    }
}

function putAnotherElementToCanvas(){

    canvasCounter++;
    console.log(canvasCounter+ ' - ' +elementArr.length)
    if(canvasCounter < elementArr.length){
        htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
    } else {
        postCanvas();
    }
}

function postCanvas()
{
    var tempCanvas      = document.createElement('canvas');
    tempCanvas.width    = cnvs.width;
    tempCanvas.height = cnvs.height;
    tempCanvas.getContext('2d').drawImage(cnvs, 0, 0);
//  cnvs.width              = 170;
//  cnvs.height             = 102;
    cnvs.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cnvs.width, cnvs.height);
    $.isFunction(callback.complete) && callback.complete.call(_this);
    canvas.remove();
}

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if(testWidth > maxWidth) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
}

function getObjMatrix(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
    return matrix;
}

})(jQuery);
a

[arindamINT]

Updated with background image and svg graphics.

// Html to Canvas and saving image to backend
(function($) {

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

[checking12]

css rotation and Transform does not work perfectlly ...I have these stuff in my code
transform: rotate(-13deg);
z-index: 40;
. Any updates please.

[arindamINT]

I have used matrix for this. try this one.

On Thu, Oct 15, 2015 at 1:57 PM, Yo Yo notifications@github.com wrote:

css rotation and Transform does not work perfectlly ...I have these stuff
in my code
transform: rotate(-13deg);
z-index: 40;
. Any updates please.

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

Note: We will be off for Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacation from 20th to 23rd
October.

With best regards
Arindam Mojumder
​​
HTML5 & jQuery Team Lead

Indus Net Technologies http://www.indusnet.co.in
An ISO 9001:2008 & ISO 27001:2005 certified company

Rated #1 IT SME in India - 2008 by Dun & Bradstreet

Gtalk : arindamm@indusnet.co.in

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Phone: +91-33-32902857/23576070
Toll-Free (US and Canada): +1-888-652-2121
UK : +44-020-81444070

Fax : +1-760-284-6062

This message contains information that may be privileged or confidential
and is the property of the INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. It is intended only for the person to whom it
is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain copy, disseminate, distribute, or use this message
or any part thereof. If you receive this message in error, please notify
the sender immediately and delete all copies of this message. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ does not accept any liability for
virus infected mails.

[checking12]

@arindamm which one ? can you send me the updated file .

[checking12]

@arindamm : If you are talking about the above code than where to add it exactly.

[arindamINT]

already added, check the attached js file in my previous mail.

On Thu, Oct 15, 2015 at 3:52 PM, Yo Yo notifications@github.com wrote:

@arindamm https://github.com/arindamm : If you are talking about the
above code than where to add it exactly.

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

Note: We will be off for Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacation from 20th to 23rd
October.

With best regards
Arindam Mojumder
​​
HTML5 & jQuery Team Lead

Indus Net Technologies http://www.indusnet.co.in
An ISO 9001:2008 & ISO 27001:2005 certified company

Rated #1 IT SME in India - 2008 by Dun & Bradstreet

Gtalk : arindamm@indusnet.co.in

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Phone: +91-33-32902857/23576070
Toll-Free (US and Canada): +1-888-652-2121
UK : +44-020-81444070

Fax : +1-760-284-6062

This message contains information that may be privileged or confidential
and is the property of the INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. It is intended only for the person to whom it
is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain copy, disseminate, distribute, or use this message
or any part thereof. If you receive this message in error, please notify
the sender immediately and delete all copies of this message. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ does not accept any liability for
virus infected mails.

[rangambr]

@arindamm @niklasvh do you guys have a update on this issue? I'm trying to vertically align some text and it doesn't come out right. Works fine in IE 11 but not working in IE 9.

[arindamINT]

sorry.

On Mon, Oct 19, 2015 at 3:45 PM, Ranga notifications@github.com wrote:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh do you guys have a update on this issue?
I'm trying to vertically align some text and it doesn't come out right.
Works fine in IE 11 but not working in IE 9.

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

Note: We will be off for Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja vacation from 20th to 23rd
October.

With best regards
Arindam Mojumder
​​
HTML5 & jQuery Team Lead

Indus Net Technologies http://www.indusnet.co.in
An ISO 9001:2008 & ISO 27001:2005 certified company

Rated #1 IT SME in India - 2008 by Dun & Bradstreet

Gtalk : arindamm@indusnet.co.in

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Phone: +91-33-32902857/23576070
Toll-Free (US and Canada): +1-888-652-2121
UK : +44-020-81444070

Fax : +1-760-284-6062

This message contains information that may be privileged or confidential
and is the property of the INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. It is intended only for the person to whom it
is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain copy, disseminate, distribute, or use this message
or any part thereof. If you receive this message in error, please notify
the sender immediately and delete all copies of this message. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ does not accept any liability for
virus infected mails.

[checking12]

@arindamm @niklasvh : hello sir , overflow :hidden and margin-left: -42px; is not getting applied to my images . Kindly refer me a solution or Can you please update the file . Please.

[arindamINT]

I didn't work in that part. Sorry to say I can't help. you can make your
own function and crop the image by canvas.draw() function.

On Thu, Oct 29, 2015 at 11:12 AM, Yo Yo notifications@github.com wrote:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : hello sir , overflow :hidden is not
getting applied to my images . Kindly refer me a solution or Can you please
update the file . Please.

—
Reply to this email directly or view it on GitHub
#220 (comment)
.

With best regards
Arindam Mojumder
​​
HTML5 & jQuery Team Lead

Indus Net Technologies http://www.indusnet.co.in
An ISO 9001:2008 & ISO 27001:2005 certified company

Rated #1 IT SME in India - 2008 by Dun & Bradstreet

Gtalk : arindamm@indusnet.co.in

skype : arindam_mojumder

Mob:+919830307843,+918420200614
Phone: +91-33-32902857/23576070
Toll-Free (US and Canada): +1-888-652-2121
UK : +44-020-81444070

Fax : +1-760-284-6062

This message contains information that may be privileged or confidential
and is the property of the INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. It is intended only for the person to whom it
is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain copy, disseminate, distribute, or use this message
or any part thereof. If you receive this message in error, please notify
the sender immediately and delete all copies of this message. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ does not accept any liability for
virus infected mails.

[jjoe64]

you can do a workaround which is told here:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

[brcontainer]

@jjoe64 #209 (comment)

[Dayjo]

Guessing this still hasn't been looked at.

Kind of needed translateY to work for vertical aligning (would have hoped this would have been a simple implementation but obviously not).

👍

[faizmh]

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

From html2canvas, I get canvas. I then use the above javascript to create a newCanvas which is rotated 90 degrees.

use height, width, translate property according to your use case

[ZengTianShengZ]

The box-shadow css3 is not working ？ But still thank you

[niklasvh]

Transforms are partially supported in 1.0.0

[ZachSaucier]

@niklasvh Any info on exactly which transforms are and are not supported?

[IshanFx]

rotate seems not working