Question

我正在通过javascript创建多个canvas对象。我已经为背景颜色，背景图像，旋转，缩放，对象顶部，左边等等转换应用了一些内联样式。

示例：

function draw(image,flag) {
    image = image.get(0);
    can_cnt = $("#canvases").children('canvas').length;
    $("#canvases").append('<canvas id="case_canvas'+can_cnt+'" data-type="image" width="301" height="501" align="center" style="position: absolute; left: 0px; top: 0px; border:0px solid transparent; z-index:-1; "></canvas>');
    var ctx = document.getElementById('case_canvas'+can_cnt).getContext('2d');
    if(flag) {
        ctx.drawImage(image,0,0,image.height,image.width);
    } else {
        ctx.drawImage(image,startX,startY,200,200);
    }
}

通过这种方法，我可以根据需要添加多个画布并在其上应用样式。

现在，我希望一个图像中的所有画布对象。我尝试了多种方式，如

$("#temp_canvas_div").html('<canvas id="temp_canvas" width="301" height="501" align="center" >');
        can1 = document.getElementById('temp_canvas');
        ctx1 = can1.getContext("2d");
        $("#canvases canvas").each(function() {

            var coll = document.getElementById($(this).attr('ID'));

            var el = document.getElementById($(this).attr('ID'));
            var st = window.getComputedStyle(el, null);

            var tr = st.getPropertyValue("-webkit-transform") ||
            st.getPropertyValue("-moz-transform") ||
            st.getPropertyValue("-ms-transform") ||
            st.getPropertyValue("-o-transform") ||
            st.getPropertyValue("transform") ||
            "FAIL";

            // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
            var a = 0;
            var b = 0;
            if(tr != 'none') {
                var values = tr.split('(')[1].split(')')[0].split(',');
                var a = values[0];
                var b = values[1];
                var c = values[2];
                var d = values[3];
            }

            var scale = Math.sqrt(a*a + b*b) ?  Math.sqrt(a*a + b*b) : 1;

            var h = (500 * scale)
            var w = (300 * scale)

            var x = parseInt((300 - w) / 2);
            var y = parseInt((500 - h) / 2);

            var sx = 0;
            var sy = 0;
            if(parseInt($("#"+$(this).attr('ID')).css('left')) != 0) {
                sx = x + parseInt($("#"+$(this).attr('ID')).css('left'));
            }

            if(parseInt($("#"+$(this).attr('ID')).css('top')) != 0) {
                sy = y + parseInt($("#"+$(this).attr('ID')).css('top'));
            }

            sx = sx != x ? sx : x;
            sy = sy != y ? sy : y;

            ctx1.drawImage(coll, sx, sy, 300,500, x,y,w,h);
        });
        window.open(temp_canvas.toDataURL("image/png"));

但是我无法获得像我在屏幕上显示的精确图像。

有没有办法将所有画布打印到一个图像或画布上，并且应用了当前的样式。

谢谢，

如何打印应用了内联样式的html5画布？

0 个答案: