Html2canvas: -webkit- تحويل: لا يعمل

تم إنشاؤها على ٣١ مايو ٢٠١٣  ·  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)؛"

أحتاج هذه الميزة بشدة. لقد حاولت تعديل التعليمات البرمجية الخاصة بك عن طريق تنفيذ المصفوفة ، لكنني فشلت.

لقد عملت هذه الوظيفة
الدالة renderImage (ctx ، element ، image ، bounds ، border ، matx) {}
لقد مررت هنا معلمة أخرى "ماتكس". إنها قيمة المصفوفة لتلك الصورة. ولكن لا يمكن تعيين هذه المصفوفة لـ "ctx".
تحدث نفس المشكلة لحقل النص أيضًا.

ساعدني من فضلك.

Feature

التعليق الأكثر فائدة

liteelips لي أيضًا ، أحتاج أيضًا إلى تدوير النص :(

ال 37 كومينتر

التحويلات غير مدعومة حتى الآن.

114 # 184 # 209

هناك حل بديل - ليس جميلًا ، لكنه لا يزال (يعمل مع صور png و jpg). المنطق الأساسي: البحث عن الصور التي تم تدويرها واستبدال مواقعها وتوفير وظائف PHP.

الخطوة 1: قم بتضمين وظيفة jQuery التي توفر دعم تحويل 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));

الخطوة 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- للعمل مع "الدرجات" ، وليس مع عناصر المصفوفة هذه.

شكرا

تحيات،

ماذا عن التحجيم؟ لدي نص تم تحجيمه لا يتم عرضه بشكل صحيح ؛ تتكدس جميع الشخصيات معًا. هل يمكن لأي شخص أن يوجهني إلى الاتجاه الصحيح ربما لتنفيذ ميزة القياس هذه؟

أحتاج إلى تدوير :(

سيكون تنفيذ مقياس التحويل رائعًا. أعتقد أنها نقطة مهمة حقًا ، لأنك قادر على زيادة جودة الخط والصورة. إذا عرضت نصًا على سبيل المثال وقمت بالتكبير / التصغير باستخدام المتصفح ، فإن الجودة سيئة حقًا. قد يجعل ذلك المكون الإضافي html2canvas مفيدًا أيضًا لمحرري النصوص وما إلى ذلك.

@ niklasvh : هل تخطط لتطبيق هذه الميزة في المستقبل القريب؟ سأكون ممتنًا لذلك وسأقدم لك تبرعًا لذلك.

مرحبًا ، هذه الميزة تفتقد حقًا هذه الأداة الممتازة ، أي خطة لهذه الميزة؟

mjaggard - هل هناك أي فرصة لإمكانية دمج كود تدوير الصور في الإصدار الأخير من المكتبة؟
لقد ألقيت نظرة على الكود الخاص بك ويبدو أن له بنية مختلفة تمامًا.
شكرا!

أهلا،

هل تخطط لإضافة هذه الميزة قريبًا؟
وسيكون من المفيد جدا !!

شكرا جزيلا !

أهلا،
التدوير يعمل بالفعل (webkit-transform) في هذا الإصدار لـ
مثال.
أضف هذا الفصل في أي div وتحقق من أنني قمت باختباره بالفعل.

.rt {-ms-transform: rotate (7deg) ؛ / * IE 9 _ /
-webkit- تحويل: تدوير (7deg) ؛ / _ كروم ، سفاري ، أوبرا * /
تحويل: تدوير (7deg) ؛}

يوم الأربعاء ، 7 كانون الثاني (يناير) 2015 ، الساعة 7:02 مساءً ، dscarteland [email protected]
كتب:

أهلا،

هل تخطط لإضافة هذه الميزة قريبًا؟
وسيكون من المفيد جدا !!

شكرا جزيلا !

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.

liteelips لي أيضًا ، أحتاج أيضًا إلى تدوير النص :(

هل يجد أي شخص أي حل لاستدارة لقطة شاشة divs؟

+1

كود العمل الكامل مع الدوران والتحويل لجميع المستعرضات. لا يمكن إرفاق الملف. أرسل لي لتجميع الملف [email protected]

رائع شكرا لك!

هل فكرت في تقديم طلب سحب أو وضع JS Fiddle؟

أهلا ،
هذا عظيم !! هل يمكنني الحصول على الملف من فضلك بالتناوب والتحول
يعمل من أجلك الآن.

يوم الثلاثاء ، 29 سبتمبر 2015 الساعة 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.
_Website: _ 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 إلى 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) ؛
أ

تحديث مع صورة الخلفية ورسومات svg.

// Html إلى Canvas وحفظ الصورة في الخلفية
(وظيفة ($) {

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

$.fn.htmlToCanvas = function(options) {

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

    return this.each(function() {

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

$.fn.htmlToCanvas.toBinrary = function() {
    return cnvs.toDataURL("image/jpeg", 1);
}

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

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

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

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

    $(divobj + " div.text-field").each(function(index) {
        elementArr.push({
            type: 'txt',
            zindex: $(this).css('z-index'),
            imgobj: $(this)
        });
    });
    /*======================== for svg rendar pm7014.10.15 ========================*/
    $(divobj + " div.hotsPot svg").each(function(index) {
        elementArr.push({
            type: 'svg',
            zindex: $(this).parent().css('z-index'),
            imgobj: $(this)
        });
    });
    /*======================== for svg rendar End pm7014.10.15 ========================*/
    elementArr.sort(function(a, b) {
        var dif = Number(a.zindex - b.zindex);
        return (dif);
    });

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

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

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

        background.crossOrigin = "*"; // This enables CORS
        background.src = back_source;

        background.onload = function() {
            for (var w = 0; w < canvas.attr('width'); w += background.width) {
                for (var h = 0; h < canvas.attr('height'); h += background.height) {
                    ctx.drawImage(background, w, h);
                }
            }

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

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

function htmlToCanvas(type, obj) {

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

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

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

        ctx.save();

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

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

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

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

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

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

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

        ctx.restore();
        putAnotherElementToCanvas();
        /*======================== for svg rendar pm7014.10.15 ========================*/
    } else if (type == 'svg') {
        svgObj = setAttributes(obj);
        var data = "data:image/svg+xml;base64," + window.btoa($(obj).parent().html());
        var svg_img = new Image();
        svg_img.src = data;
        var svgMatrix = getObjMatrix(obj.parent());
        svgMatrix = svgMatrix.substring(7, svgMatrix.length - 1).split(', ');
        svg_img.onload = function() {
            ctx.save();
            ctx.transform(svgMatrix[0], svgMatrix[1], svgMatrix[2], svgMatrix[3], svgMatrix[4], svgMatrix[5]);
            ctx.drawImage(svg_img, 0, 0);
            ctx.restore();
            putAnotherElementToCanvas();
        };
    }
    /* ======================== for svg rendar pm7014.10.15 ======================== */

}

function setAttributes(el) {
    el.attr("version", "1.1");
    el.attr("xmlns", "http://www.w3.org/2000/svg");
    el.attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
    return el;
}



function putAnotherElementToCanvas() {

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

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

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

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

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

}) (jQuery) ؛

لا يعمل دوران css والتحويل بشكل مثالي ... لدي هذه الأشياء في الكود الخاص بي
تحويل: تدوير (-13 درجة) ؛
مؤشر z: 40 ؛
. أي تحديثات من فضلك.

لقد استخدمت مصفوفة لهذا. جرب هذه.

في الخميس ، 15 أكتوبر 2015 الساعة 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
اكتوبر._

مع أطيب التحيات
_أريندام موجمدر_

HTML5 & jQuery قائد الفريق

_Indus Net Technologies_ http://www.indusnet.co.in
حاصلة على شهادة ISO 9001: 2008 و ISO 27001: 2005

حصل على المرتبة الأولى في مجال تكنولوجيا المعلومات للشركات الصغيرة والمتوسطة في الهند - 2008 من قبل Dun & Bradstreet

Gtalk: [email protected]

سكايب: 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/ أي مسؤولية عن
رسائل البريد المصابة بالفيروس.

arindamm أي واحد؟ هل يمكنك أن ترسل لي الملف المحدث.

arindamm : إذا كنت تتحدث عن الكود أعلاه من مكان إضافته بالضبط.

تمت إضافته بالفعل ، تحقق من ملف js المرفق في بريدي السابق.

في الخميس ، 15 أكتوبر 2015 الساعة 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
اكتوبر._

مع أطيب التحيات
_أريندام موجمدر_

HTML5 & jQuery قائد الفريق

_Indus Net Technologies_ http://www.indusnet.co.in
حاصلة على شهادة ISO 9001: 2008 و ISO 27001: 2005

حصل على المرتبة الأولى في مجال تكنولوجيا المعلومات للشركات الصغيرة والمتوسطة في الهند - 2008 من قبل Dun & Bradstreet

Gtalk: [email protected]

سكايب: 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/ أي مسؤولية عن
رسائل البريد المصابة بالفيروس.

arindammniklasvh لا يا رفاق لديهم التحديث على هذه المسألة؟ أحاول محاذاة بعض النصوص رأسياً ولا تظهر بشكل صحيح. يعمل بشكل جيد في IE 11 ولكنه لا يعمل في IE 9.

آسف.

يوم الإثنين ، 19 أكتوبر 2015 ، الساعة 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
.

_ ملاحظة: سنذهب إلى دورجا بوجا
https://en.wikipedia.org/wiki/Durga_Puja إجازة من 20 إلى 23
اكتوبر._

مع أطيب التحيات
_أريندام موجمدر_

HTML5 & jQuery قائد الفريق

_Indus Net Technologies_ http://www.indusnet.co.in
حاصلة على شهادة ISO 9001: 2008 و ISO 27001: 2005

حصل على المرتبة الأولى في مجال تكنولوجيا المعلومات للشركات الصغيرة والمتوسطة في الهند - 2008 من قبل Dun & Bradstreet

Gtalk: [email protected]

سكايب: 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/ أي مسؤولية عن
رسائل البريد المصابة بالفيروس.

arindammniklasvh: مرحبا يا سيدي، تجاوز: مخفي وترك هامش: -42px. لا يتم تطبيقه على صوري. يرجى إحالتي إلى حل أو هل يمكنك تحديث الملف. لو سمحت.

لم أعمل في هذا الجزء. آسف لقول لا أستطيع المساعدة. يمكنك جعل
الوظيفة الخاصة واقتصاص الصورة عن طريق وظيفة canvas.draw ().

في الخميس ، 29 أكتوبر 2015 الساعة 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 قائد الفريق

_Indus Net Technologies_ http://www.indusnet.co.in
حاصلة على شهادة ISO 9001: 2008 و ISO 27001: 2005

حصل على المرتبة الأولى في مجال تكنولوجيا المعلومات للشركات الصغيرة والمتوسطة في الهند - 2008 من قبل Dun & Bradstreet

Gtalk: [email protected]

سكايب: 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/ أي مسؤولية عن
رسائل البريد المصابة بالفيروس.

يمكنك عمل حل بديل يقال هنا:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

لم يتم النظر إلى التخمين حتى الآن.

نوع من الترجمة المطلوبة للعمل من أجل المحاذاة الرأسية (كان من الممكن أن يكون هذا تنفيذًا بسيطًا ولكن من الواضح أنه ليس كذلك).

👍

          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 درجة.

استخدم الارتفاع والعرض وترجمة الخاصية وفقًا لحالة الاستخدام الخاصة بك

مربع الظل css3 لا يعمل? ولكن لا يزال شكرا لك

التحويلات مدعومة جزئيًا في 1.0.0

niklasvh @ هل أي معلومات حول التحويلات المدعومة وغير المدعومة بالضبط؟

يبدو التناوب لا يعمل

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات