canva旋转图片 js_js canvas 照片旋转 demo详解

照片旋转

var img = document.querySelector("img");

var canvas = document.querySelector("canvas");

var context = canvas.getContext('2d');

var imgHeight = 200;

var imgWidth = 200;

img.onload = function(){

imgHeight = img.height;

imgWidth = img.width;

}

function fileChangeEvent(file){

var URL = window.URL || window.webkitURL;

img.src = URL.createObjectURL(file);

img.onload = function(){

imgHeight = img.height;

imgWidth = img.width;

}

}

function rotate90()

{

img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题

canvas.width = imgHeight;

canvas.height = imgWidth;

context.translate(canvas.width * 0.5, canvas.height * 0.5);

context.rotate(Math.PI * 0.5);

context.translate(-canvas.height * 0.5, -canvas.width * 0.5);

context.drawImage(img, 0, 0, imgWidth, imgHeight);

img.src = canvas.toDataURL("image/png");

}

function rotate180()

{

canvas.width = imgWidth;

canvas.height = imgHeight;

context.rotate(Math.PI);

context.translate(-canvas.width, -canvas.height);

context.drawImage(img, 0, 0, imgWidth, imgHeight);

img.src = canvas.toDataURL("image/png");

}

function rotate270()

{

img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题

canvas.width = imgHeight;

canvas.height = imgWidth;

// 以中心点为基准旋转，所有的旋转只改变了 canvas 画笔的坐标轴，对画布没有任何影响

context.translate(canvas.width * 0.5, canvas.height * 0.5);

context.rotate(-Math.PI * 0.5);

context.translate(-canvas.height * 0.5, -canvas.width * 0.5);

context.drawImage(img, 0, 0, imgWidth, imgHeight);

img.src = canvas.toDataURL("image/png");

}

document.querySelectorAll("input[type='button']")[0].onclick = function(){

rotate90();

};

document.querySelectorAll("input[type='button']")[1].onclick = function(){

rotate180();

};

document.querySelectorAll("input[type='button']")[2].onclick = function(){

rotate270();

};

document.querySelectorAll("input[type='button']")[3].onclick = function(){

history.back();

};