Javascript 画布旋转isn'；他没有按预期工作_Javascript_Html_Canvas_Rotation

Javascript 画布旋转isn'；他没有按预期工作

javascript html canvas

Javascript 画布旋转isn'；他没有按预期工作,javascript,html,canvas,rotation,Javascript,Html,Canvas,Rotation,HTML JAVASCRIPT var context; var canvas; var nHeight; //the new height after resizing var nWidth; //the new width after resizing var TO_RADIANS = Math.PI / 180; var imageObj = new Image(); //USE ONLY ONE OF THE BELOW IMAGES AT A TIME //square im

HTML

JAVASCRIPT

var context;
var canvas;
var nHeight;  //the new height after resizing
var nWidth;   //the new width after resizing
var TO_RADIANS = Math.PI / 180;
var imageObj = new Image();

//USE ONLY ONE OF THE BELOW IMAGES AT A TIME

//square image which does not distort after rotation
imageObj.src = "http://i.stack.imgur.com/hwxO6.png";


//rectangular image which distorts after rotation
<!-- imageObj.src = "http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; -->


var originalWidth = imageObj.width;
var originalHeight = imageObj.height;

$('#myCanvas').remove();


//used by context.rotate and updated after every rotation
$("#uploaded-image-container").attr({
    rotation: 0
});

$("#uploaded-image-container").append("<canvas id='myCanvas'></canvas>");


$("#uploaded-image-container").css({
    "position": "absolute",
        "height": originalHeight / 3, //one-third size of the original height of the uploaded image
        "width": originalWidth / 3,
        "top": $('#print-region').height() / 3,
        "left": $('#print-region').width() / 3
});

canvas = document.getElementById('myCanvas');

context = canvas.getContext('2d');
nHeight = canvas.height = originalHeight / 3;
nWidth = canvas.width = originalWidth / 3;


imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, originalWidth / 3, originalHeight / 3);
};

$("#uploaded-image-container").draggable({
    snap: false,
    scroll: false,
    cursor: "move",
    containment: '#print-region'
});


$("#uploaded-image-container").resizable({
    handles: 'nw, ne, sw, se',
    aspectRatio: true,
    containment: '#print-region',

    resize: function (e, ui) {
        nHeight = ui.size.height;
        nWidth = ui.size.width;
    }
});


$("#rotate").click(function () {
    updateRotation($("#uploaded-image-container"));
});


var imageRotation = 0; // the angle that the image is rotated
var updateRotation = function (elem) {
    var angle = parseInt(elem.attr('rotation'));

//after rotation, the nWidth and nHeight are interchanged hence temp variables
    var tempHeight, tempWidth;

    if (angle == 0) {
        imageRotation = 90;
        elem.attr('rotation', 90);
        tempHeight = nWidth;
        tempWidth = nHeight;
    } else if (angle == 90) {
        imageRotation = 180;
        elem.attr('rotation', 180);
        tempHeight = nHeight;
        tempWidth = nWidth;
    } else if (angle == 180) {
        imageRotation = 270;
        elem.attr('rotation', 270);
        tempHeight = nWidth;
        tempWidth = nHeight;
    } else {
        imageRotation = 0;
        elem.attr('rotation', 0);
        tempHeight = nHeight;
        tempWidth = nWidth;
    }

    $("#uploaded-image-container").css({
        "height": tempHeight,
            "width": tempWidth
    });

    canvas.width = tempWidth;
    canvas.height = tempHeight;
    context.translate(tempWidth / 2, tempHeight / 2);
    context.rotate(imageRotation * TO_RADIANS);
    context.translate(-tempWidth / 2, -tempHeight / 2);
    context.drawImage(imageObj, 0, 0, tempWidth, tempHeight);
};

var上下文；
var帆布；
var nHeight//调整大小后的新高度
var nWidth//调整大小后的新宽度
var TO_弧度=Math.PI/180；
var imageObj=新图像（）；
//一次仅使用以下图像之一
//旋转后不会变形的方形图像
imageObj.src=”http://i.stack.imgur.com/hwxO6.png";
//旋转后变形的矩形图像
var originalWidth=imageObj.width；
变量原始高度=图像对象高度；
$（“#myCanvas”）.remove（）；
//由context.rotate使用，并在每次旋转后更新
$（“#上载的图像容器”）.attr({
轮换：0
});
$（“#上载的图像容器”）。追加（“”）；
$（“#上载的图像容器”）.css({
“位置”：“绝对”，
“高度”：原始高度/3，//上传图像原始高度的三分之一大小
“宽度”：原始宽度/3，
“顶部”：$（“#打印区域”）.height（）/3，
“左”：$（“#打印区域”）.width（）/3
});
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（'2d'）；
n高度=画布高度=原始高度/3；
nWidth=canvas.width=originalWidth/3；
imageObj.onload=函数（）{
drawImage（imageObj，0,0，原始宽度/3，原始高度/3）；
};
$（“#上载的图像容器”）.draggable({
快照：错，
卷轴：错，
光标：“移动”，
包含：“#打印区域”
});
$（“#上载的图像容器”）。可调整大小({
手柄：“西北、东北、西南、东南”，
是的，
包含：“#打印区域”，
调整大小：功能（e、ui）{
nHeight=ui.size.height；
nWidth=ui.size.width；
}
});
$（“#旋转”）。单击（函数（）{
updateRotation（$（“#上载的图像容器”）；
});
var imageRotation=0；//图像旋转的角度
var updateRotation=函数（元素）{
变量角度=parseInt（元素属性（“旋转”）；
//旋转后，nWidth和nHeight互换，因此使用临时变量
变量tempHeight，tempWidth；
如果（角度==0）{
图像旋转=90；
元素属性（“旋转”，90）；
tempHeight=nWidth；
tempWidth=nHeight；
}否则，如果（角度==90）{
图像旋转=180；
元素属性（“旋转”，180）；
tempHeight=nHeight；
tempWidth=nWidth；
}否则，如果（角度==180）{
图像旋转=270；
元素属性（“旋转”，270）；
tempHeight=nWidth；
tempWidth=nHeight；
}否则{
图像旋转=0；
元素属性（“旋转”，0）；
tempHeight=nHeight；
tempWidth=nWidth；
}
$（“#上载的图像容器”）.css({
“高度”：温度高度，
“宽度”：tempWidth
});
canvas.width=tempWidth；
canvas.height=临时高度；
翻译（tempWidth/2，tempHeight/2）；
旋转（图像旋转*到_弧度）；
translate（-tempWidth/2，-tempHeight/2）；
drawImage（imageObj，0，0，tempWidth，tempHeight）；
};

我想使用html2canvas插件拍摄JSFIDLE结果中显示的部分的快照。但是html2canvas不支持CSS3旋转属性。所以我使用画布来旋转图像，html2canvas成功地捕获了旋转

在上面的代码中，当我使用正方形图像时，它会完美地旋转，但当考虑矩形图像时，图像的宽度和高度会发生扭曲

调整大小、拖动和旋转的任何组合都不应扭曲图像

有什么问题吗？

试试这把小提琴

默认情况下，html5会将图像缩小到画布大小，因此您必须手动管理图像大小。

您应该进一步解释一下您要做什么。我认为旋转并没有那么复杂

无论如何。我在33、34行发现了一个错误

nHeight = canvas.height = originalHeight / 3;
nWidth = canvas.width = originalWidth / 3;

也许你的意思是加法或乘法？？因为更改后会出现蓝色画布并进行旋转

    nHeight = canvas.height + originalHeight / 3;
    nWidth = canvas.width + originalWidth / 3;

这是因为在绘制和缩放图像时使用临时值（宽度和高度）作为方向。然后将方向的值应用于setContainerHeight和setContainerWidth；简而言之：使用与坐标和缩放相同的值

我看不到你的第一张照片（在我的国家被封锁了），可能是因为它是正方形的（宽度=高度）；因此不会出现问题，但矩形的宽度=2*高度；所以使用图像比率。这应该适用于任何长方体形状

    var context;
    var canvas;
    var nHeight;
    var nWidth;
    var TO_RADIANS = Math.PI / 180;
    var imageObj = new Image();
     imageObj.src = "http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; 


    var originalWidth = imageObj.width;
    var originalHeight = imageObj.height;

    $('#myCanvas').remove();
    $("#uploaded-image-container").attr({
        rotation: 0
    });

    $("#uploaded-image-container").append("<canvas id='myCanvas'></canvas>");


    $("#uploaded-image-container").css({
        "position": "absolute",
            "height": originalHeight / 3,
            "width": originalWidth / 3,
            "top": $('#print-region').height() / 3,
            "left": $('#print-region').width() / 3
    });

    canvas = document.getElementById('myCanvas');

    context = canvas.getContext('2d');
    nHeight = canvas.height ;
    nWidth = canvas.width ;


    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0, originalWidth / 3, originalHeight / 3);
    };

    $("#uploaded-image-container").draggable({
        snap: false,
        scroll: false,
        cursor: "move",
        containment: '#print-region'
    });


    $("#uploaded-image-container").resizable({
        handles: 'nw, ne, sw, se',
        aspectRatio: true,
        containment: '#print-region',

        resize: function (e, ui) {
            nHeight = ui.size.height;
            nWidth = ui.size.width;
        }
    });


    $("#rotate").click(function () {
        updateRotation($("#uploaded-image-container"));
    });

 var imageRotation = 0; // the angle that the image is rotated
var updateRotation = function (elem) {
    var angle = parseInt(elem.attr('rotation'));
    var ratio = nWidth/nHeight;
    var customX = nWidth, scaleX = nWidth;
    var customY = nHeight, scaleY = nHeight;
    var tempHeight, tempWidth;
    //the problem is in number 1 and 3 
    if (angle == 0) { //number 1
        imageRotation = 90;
        elem.attr('rotation', 90);
        tempHeight = nWidth;
        tempWidth = nHeight; customY = ratio*customY;
    } else if (angle == 90) { //number 2
        imageRotation = 180;
        elem.attr('rotation', 180);
        tempHeight = nHeight;
        tempWidth = nWidth ;
    } else if (angle == 180) {
        imageRotation = 270;
        elem.attr('rotation', 270);
        tempHeight = nWidth;
        tempWidth = nHeight;  customY = ratio*customY;
    } else { // number 4 handle 
        imageRotation = 0;
        elem.attr('rotation', 0);
        tempHeight = nHeight;
        tempWidth = nWidth;
    }

    $("#uploaded-image-container").css({
        "height": tempHeight,
        "width": tempWidth
    });

    canvas.width = customX;
    canvas.height = customY;
    context.translate(customX / 2, customY / 2);
    context.rotate(imageRotation * TO_RADIANS);
    context.translate( -customX / 2, -customY / 2);        
    context.drawImage(imageObj, 0, 0, customX, customY);
};

var上下文；
var帆布；
var nHeight；
var nWidth；
var TO_弧度=Math.PI/180；
var imageObj=新图像（）；
imageObj.src=”http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; 
var originalWidth=imageObj.width；
变量原始高度=图像对象高度；
$（“#myCanvas”）.remove（）；
$（“#上载的图像容器”）.attr({
轮换：0
});
$（“#上载的图像容器”）。追加（“”）；
$（“#上载的图像容器”）.css({
“位置”：“绝对”，
“高度”：原始高度/3，
“宽度”：原始宽度/3，
“顶部”：$（“#打印区域”）.height（）/3，
“左”：$（“#打印区域”）.width（）/3
});
canvas=document.getElementById（'myCanvas'）；
context=canvas.getContext（'2d'）；
nHeight=画布高度；
nWidth=canvas.width；
imageObj.onload=函数（）{
drawImage（imageObj，0,0，原始宽度/3，原始高度/3）；
};
$（“#上载的图像容器”）.draggable({
快照：错，
卷轴：错，
光标：“移动”，
包含：“#打印区域”
});
$（“#上载的图像容器”）。可调整大小({
手柄：“西北、东北、西南、东南”，
是的，
包含：“#打印区域”，
调整大小：功能（e、ui）{
nHeight=ui.size.height；
nWidth=ui.size.width；
}
});
$（“#旋转”）。单击（函数（）{
updateRotation（$（“#上载的图像继续）
nHeight = canvas.height = originalHeight / 3;
nWidth = canvas.width = originalWidth / 3;

    nHeight = canvas.height + originalHeight / 3;
    nWidth = canvas.width + originalWidth / 3;

    var context;
    var canvas;
    var nHeight;
    var nWidth;
    var TO_RADIANS = Math.PI / 180;
    var imageObj = new Image();
     imageObj.src = "http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"; 


    var originalWidth = imageObj.width;
    var originalHeight = imageObj.height;

    $('#myCanvas').remove();
    $("#uploaded-image-container").attr({
        rotation: 0
    });

    $("#uploaded-image-container").append("<canvas id='myCanvas'></canvas>");


    $("#uploaded-image-container").css({
        "position": "absolute",
            "height": originalHeight / 3,
            "width": originalWidth / 3,
            "top": $('#print-region').height() / 3,
            "left": $('#print-region').width() / 3
    });

    canvas = document.getElementById('myCanvas');

    context = canvas.getContext('2d');
    nHeight = canvas.height ;
    nWidth = canvas.width ;


    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0, originalWidth / 3, originalHeight / 3);
    };

    $("#uploaded-image-container").draggable({
        snap: false,
        scroll: false,
        cursor: "move",
        containment: '#print-region'
    });


    $("#uploaded-image-container").resizable({
        handles: 'nw, ne, sw, se',
        aspectRatio: true,
        containment: '#print-region',

        resize: function (e, ui) {
            nHeight = ui.size.height;
            nWidth = ui.size.width;
        }
    });


    $("#rotate").click(function () {
        updateRotation($("#uploaded-image-container"));
    });

 var imageRotation = 0; // the angle that the image is rotated
var updateRotation = function (elem) {
    var angle = parseInt(elem.attr('rotation'));
    var ratio = nWidth/nHeight;
    var customX = nWidth, scaleX = nWidth;
    var customY = nHeight, scaleY = nHeight;
    var tempHeight, tempWidth;
    //the problem is in number 1 and 3 
    if (angle == 0) { //number 1
        imageRotation = 90;
        elem.attr('rotation', 90);
        tempHeight = nWidth;
        tempWidth = nHeight; customY = ratio*customY;
    } else if (angle == 90) { //number 2
        imageRotation = 180;
        elem.attr('rotation', 180);
        tempHeight = nHeight;
        tempWidth = nWidth ;
    } else if (angle == 180) {
        imageRotation = 270;
        elem.attr('rotation', 270);
        tempHeight = nWidth;
        tempWidth = nHeight;  customY = ratio*customY;
    } else { // number 4 handle 
        imageRotation = 0;
        elem.attr('rotation', 0);
        tempHeight = nHeight;
        tempWidth = nWidth;
    }

    $("#uploaded-image-container").css({
        "height": tempHeight,
        "width": tempWidth
    });

    canvas.width = customX;
    canvas.height = customY;
    context.translate(customX / 2, customY / 2);
    context.rotate(imageRotation * TO_RADIANS);
    context.translate( -customX / 2, -customY / 2);        
    context.drawImage(imageObj, 0, 0, customX, customY);
};