Transformasi belum didukung.

114 #184 #209

Ada solusi - tidak cantik, tapi tetap (berfungsi untuk gambar png dan jpg). Logika dasar: temukan gambar yang diputar, ganti lokasinya, dan sediakan fungsionalitas PHP.

Langkah 1: sertakan fungsi jQuery yang menyediakan dukungan transformasi CSS.

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle < 0 ? angle+360 : angle;
   };
}(jQuery));

Langkah 2: ganti lokasi gambar yang diputar dengan URL PHP (sertakan ini sebelum render html2canvas).

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

Langkah 3: buat rotateimg.php yang menyediakan fungsionalitas putar

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

?>

Saya harap ini membantu. =)

Saya telah menambahkan dukungan untuk gambar yang diputar 90, 180 atau 270 derajat. https://github.com/mjaggard/html2canvas/tree/simple-rotation

Rotasi non-gambar umumnya tidak didukung dan juga transformasi lainnya (walaupun saya beberapa terjemahan dan rotasi didukung oleh html2canvas karena memungkinkan browser melakukan pekerjaan).

Berlangganan. Mencari solusi rotasi yang lebih baik untuk gambar/html di sini juga. Kami membutuhkan -webkit-transform untuk bekerja dengan "derajat", bukan hal matriks ini.

Terima kasih

Salam pembuka,

Bagaimana dengan penskalaan? Saya memiliki teks berskala yang tidak ditampilkan dengan benar; karakter mendapatkan semua sempit bersama-sama. Adakah yang bisa mengarahkan saya ke arah yang benar untuk menerapkan fitur penskalaan ini?

aku butuh rotasi :(

Implementasi skala transformasi akan sangat bagus. Saya pikir ini adalah poin yang sangat penting, karena Anda dapat meningkatkan kualitas font dan gambar. Jika Anda membuat misalnya teks dan memperbesar dengan browser, kualitasnya sangat buruk. Itu bisa membuat plugin html2canvas Anda juga berguna untuk editor teks dan sebagainya.

@niklasvh : Apakah Anda berencana untuk mengimplementasikan fitur ini dalam waktu dekat? Saya akan menghargai itu dan akan memberikan sumbangan untuk itu.

Hai, fitur ini sangat merindukan alat yang luar biasa ini, ada rencana untuk fitur ini?

@mjaggard - apakah ada kemungkinan kode rotasi gambar Anda dapat diintegrasikan dalam versi perpustakaan terbaru?
Saya telah melihat kode Anda dan tampaknya memiliki struktur yang sangat berbeda.
Terima kasih!

Hai,

Apakah Anda berencana untuk menambahkan fitur ini segera?
Itu akan sangat berguna!!

Terima kasih banyak !

Hai,
Rotasi sudah (webkit-transform) bekerja di versi ini untuk
contoh.
Tambahkan kelas ini di div apa pun dan periksa saya sudah mengujinya.

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

Pada hari Rabu, 7 Januari 2015 jam 19:02, dscarteland [email protected]
menulis:

Hai,

Apakah Anda berencana untuk menambahkan fitur ini segera?
Itu akan sangat berguna!!

Terima kasih banyak !

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

@liteelips saya juga, saya juga perlu rotasi teks :(

Adakah yang menemukan solusi untuk tangkapan layar div yang diputar?

+1

Kode kerja penuh dengan rotasi dan transformasi untuk semua browser. Tidak dapat melampirkan file. Mail saya untuk mengumpulkan file [email protected]

Luarbiasa, terimakasih!

Sudahkah Anda mempertimbangkan untuk membuat permintaan tarik atau memasang JS Fiddle?

Hai ,
hebat itu!! bisakah saya mendapatkan filenya sebagai rotasi dan transformasi?
bekerja untuk Anda sekarang.

Pada Selasa, 29 Sep 2015 jam 15:32, Arindam Mojumder [email protected]
menulis:

Kode kerja penuh dengan rotasi dan transformasi untuk semua browser. Tidak bisa
lampirkan filenya. Kirimkan saya email untuk mengumpulkan file atau kunjungi tautan ini.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.

_Amar Singh_
_Pengembang PHP/MySQL_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_

_Email:_ amar. [email protected] [email protected]
_Seluler: *+91 7040980700
*Departemen: *Pengembangan
*Dukungan:_ [email protected]
_Alamat:_ E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
_Website:_ www.kodework.com

Hai, Saya juga berjuang agar transformasi (putar) berfungsi, khususnya di IE. Kanvas yang telah selesai sebenarnya mengandung elemen yang diputar, tetapi biasanya hanya setengah dari elemen yang ditampilkan.

Ini adalah gaya skrip:

$('#<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 ke Canvas dan simpan gambar ke backend

htmlToCanvas.js file

(fungsi($){

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

Diperbarui dengan gambar latar belakang dan grafik svg.

// HTML ke Canvas dan simpan gambar ke backend
(fungsi($) {

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

rotasi css dan Transform tidak berfungsi dengan sempurna ... Saya memiliki hal-hal ini dalam kode saya
mengubah: memutar (-13deg);
indeks-z: 40;
. Setiap pembaruan silakan.

Saya telah menggunakan matriks untuk ini. coba yang ini.

Pada Kam, 15 Oktober 2015 pukul 13.57, Yo Yo [email protected] menulis:

rotasi css dan Transform tidak berfungsi dengan sempurna ... Saya punya barang ini
dalam kode saya
mengubah: memutar (-13deg);
indeks-z: 40;
. Setiap pembaruan silakan.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.

_Catatan: Kami akan berangkat ke Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja liburan dari tanggal 20 hingga 23
Oktober._

Salam hangat
_Arindam Mojumder_
​​
Pemimpin Tim HTML5 & jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Perusahaan bersertifikat ISO 9001:2008 & ISO 27001:2005

Dinilai #1 UKM IT di India - 2008 oleh Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Massa:+919830307843,+918420200614
Telepon: +91-33-32902857/23576070
Bebas Pulsa (AS dan Kanada): +1-888-652-2121
Inggris: +44-020-81444070

Faks: +1-760-284-6062

Pesan ini berisi informasi yang mungkin diistimewakan atau dirahasiakan
dan merupakan milik INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Ini ditujukan hanya untuk orang yang kepadanya
ditujukan. Jika Anda bukan penerima yang dimaksud, Anda tidak berwenang
untuk membaca, mencetak, menyimpan salinan, menyebarkan, mendistribusikan, atau menggunakan pesan ini
atau bagiannya. Jika Anda menerima pesan ini karena kesalahan, harap beri tahu
pengirim segera dan hapus semua salinan pesan ini. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ tidak bertanggung jawab atas
email yang terinfeksi virus.

@arindamm yang mana? dapatkah Anda mengirimi saya file yang diperbarui.

@arindamm : Jika Anda berbicara tentang kode di atas daripada di mana menambahkannya dengan tepat.

sudah ditambahkan, periksa file js terlampir di email saya sebelumnya.

Pada Kam, 15 Oktober 2015 pukul 15.52, Yo Yo [email protected] menulis:

@arindamm https://github.com/arindamm : Jika Anda berbicara tentang
kode di atas daripada di mana menambahkannya dengan tepat.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.

_Catatan: Kami akan berangkat ke Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja liburan dari tanggal 20 hingga 23
Oktober._

Salam hangat
_Arindam Mojumder_
​​
Pemimpin Tim HTML5 & jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Perusahaan bersertifikat ISO 9001:2008 & ISO 27001:2005

Dinilai #1 UKM IT di India - 2008 oleh Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Massa:+919830307843,+918420200614
Telepon: +91-33-32902857/23576070
Bebas Pulsa (AS dan Kanada): +1-888-652-2121
Inggris: +44-020-81444070

Faks: +1-760-284-6062

Pesan ini berisi informasi yang mungkin diistimewakan atau dirahasiakan
dan merupakan milik INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Ini ditujukan hanya untuk orang yang kepadanya
ditujukan. Jika Anda bukan penerima yang dimaksud, Anda tidak berwenang
untuk membaca, mencetak, menyimpan salinan, menyebarkan, mendistribusikan, atau menggunakan pesan ini
atau bagiannya. Jika Anda menerima pesan ini karena kesalahan, harap beri tahu
pengirim segera dan hapus semua salinan pesan ini. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ tidak bertanggung jawab atas
email yang terinfeksi virus.

@arindamm @niklasvh apakah kalian memiliki pembaruan tentang masalah ini? Saya mencoba menyelaraskan beberapa teks secara vertikal dan hasilnya tidak benar. Berfungsi dengan baik di IE 11 tetapi tidak berfungsi di IE 9.

maaf.

Pada Senin, 19 Oktober 2015 pukul 15:45, Ranga [email protected] menulis:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh apakah kalian memiliki pembaruan tentang masalah ini?
Saya mencoba menyelaraskan beberapa teks secara vertikal dan hasilnya tidak benar.
Berfungsi dengan baik di IE 11 tetapi tidak berfungsi di IE 9.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.

_Catatan: Kami akan berangkat ke Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja liburan dari tanggal 20 hingga 23
Oktober._

Salam hangat
_Arindam Mojumder_
​​
Pemimpin Tim HTML5 & jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Perusahaan bersertifikat ISO 9001:2008 & ISO 27001:2005

Dinilai #1 UKM IT di India - 2008 oleh Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Massa:+919830307843,+918420200614
Telepon: +91-33-32902857/23576070
Bebas Pulsa (AS dan Kanada): +1-888-652-2121
Inggris: +44-020-81444070

Faks: +1-760-284-6062

Pesan ini berisi informasi yang mungkin diistimewakan atau dirahasiakan
dan merupakan milik INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Ini ditujukan hanya untuk orang yang kepadanya
ditujukan. Jika Anda bukan penerima yang dimaksud, Anda tidak berwenang
untuk membaca, mencetak, menyimpan salinan, menyebarkan, mendistribusikan, atau menggunakan pesan ini
atau bagiannya. Jika Anda menerima pesan ini karena kesalahan, harap beri tahu
pengirim segera dan hapus semua salinan pesan ini. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ tidak bertanggung jawab atas
email yang terinfeksi virus.

@arindamm @niklasvh : halo pak , overflow :hidden dan margin-left: -42px; tidak diterapkan pada gambar saya. Mohon beri saya solusi atau Bisakah Anda memperbarui file . Tolong.

Saya tidak bekerja di bagian itu. Maaf untuk mengatakan saya tidak bisa membantu. Anda bisa membuat Anda
fungsi sendiri dan potong gambar dengan fungsi canvas.draw().

Pada Kamis, 29 Oktober 2015 pukul 11:12, Yo Yo [email protected] menulis:

@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : halo pak , overflow : tersembunyi bukan
diterapkan pada gambar saya. Mohon beri saya solusi atau Bisakah Anda
memperbarui file. Tolong.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.

Salam hangat
_Arindam Mojumder_
​​
Pemimpin Tim HTML5 & jQuery

_Indus Net Technologies_ http://www.indusnet.co.in
Perusahaan bersertifikat ISO 9001:2008 & ISO 27001:2005

Dinilai #1 UKM IT di India - 2008 oleh Dun & Bradstreet

Gtalk : [email protected]

skype : arindam_mojumder

Massa:+919830307843,+918420200614
Telepon: +91-33-32902857/23576070
Bebas Pulsa (AS dan Kanada): +1-888-652-2121
Inggris: +44-020-81444070

Faks: +1-760-284-6062

Pesan ini berisi informasi yang mungkin diistimewakan atau dirahasiakan
dan merupakan milik INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Ini ditujukan hanya untuk orang yang kepadanya
ditujukan. Jika Anda bukan penerima yang dimaksud, Anda tidak berwenang
untuk membaca, mencetak, menyimpan salinan, menyebarkan, mendistribusikan, atau menggunakan pesan ini
atau bagiannya. Jika Anda menerima pesan ini karena kesalahan, harap beri tahu
pengirim segera dan hapus semua salinan pesan ini. INDUS NET
TECHNOLOGIES http://www.indusnet.co.in/ tidak bertanggung jawab atas
email yang terinfeksi virus.

anda dapat melakukan solusi yang diceritakan di sini:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

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

Menebak ini masih belum dilihat.

Jenis terjemahan yang diperlukan agar berfungsi untuk penyelarasan vertikal (seharusnya ini akan menjadi implementasi yang sederhana tetapi jelas tidak).

👍

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

Dari html2canvas, saya mendapatkan kanvas. Saya kemudian menggunakan javascript di atas untuk membuat kanvas baru yang diputar 90 derajat.

gunakan tinggi, lebar, terjemahkan properti sesuai dengan kasus penggunaan Anda

css3 box-shadow tidak berfungsi Tapi tetap terima kasih

Transform sebagian didukung di 1.0.0

@niklasvh Adakah info tentang transformasi mana yang didukung dan tidak didukung?

putar sepertinya tidak berfungsi