Как перевернуть изображения по горизонтали с помощью HTML5

Ответ 1

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
this.canvasContext.drawImage(image, 0, 0);

Вот фрагмент из объекта спрайта, который используется для тестирования, и он дает результаты, которые, как вам кажется, ожидаются.

Здесь другой сайт с более подробной информацией. http://andrew.hedges.name/widgets/dev/

Ответ 2

Вам не нужен HTML5, это можно сделать с помощью CSS так же, как в IE:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;

Ответ 3

Мне нравится функция Eschers выше. Я сделал это немного аккуратнее и лучше. Я добавил флоп (по вертикали), кроме флип. Также возможно рисовать/вращать вокруг центра изображения вместо левого верхнего. Наконец, функция не требует всех аргументов. img, x и y требуются, но остальные не являются.

Если вы использовали что-то вроде context.drawImage(...), теперь вы можете просто использовать drawImage (...) и добавить команду rotate/flip/функции флопа, описанные здесь:

function drawImage(img, x, y, width, height, deg, flip, flop, center) {

context.save();

if(typeof width === "undefined") width = img.width;
if(typeof height === "undefined") height = img.height;
if(typeof center === "undefined") center = false;

// Set rotation point to center of image, instead of top/left
if(center) {
    x -= width/2;
    y -= height/2;
}

// Set the origin to the center of the image
context.translate(x + width/2, y + height/2);

// Rotate the canvas around the origin
var rad = 2 * Math.PI - deg * Math.PI / 180;    
context.rotate(rad);

// Flip/flop the canvas
if(flip) flipScale = -1; else flipScale = 1;
if(flop) flopScale = -1; else flopScale = 1;
context.scale(flipScale, flopScale);

// Draw the image    
context.drawImage(img, -width/2, -height/2, width, height);

context.restore();
}

Примеры:

var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d"); // i use context instead of ctx

var img = document.getElementById("myImage"); // your img reference here!

drawImage(img, 100, 100); // just draw it 
drawImage(img, 100, 100, 200, 50); // draw it with width/height specified
drawImage(img, 100, 100, 200, 50, 45); // draw it at 45 degrees
drawImage(img, 100, 100, 200, 50, 0, true); // draw it flipped
drawImage(img, 100, 100, 200, 50, 0, false, true); // draw it flopped
drawImage(img, 100, 100, 200, 50, 0, true, true); // draw it flipflopped
drawImage(img, 100, 100, 200, 50, 45, true, true, true); // draw it flipflopped and 45 degrees rotated around the center of the image :-)

Ответ 4

Попробуйте этот плагин

Демо: http://dmadan.in/imageflip.html

Источник: https://github.com/dmadan86/imageflip

Он работает как в css3, так и в Canvas.

Ответ 5

Я наткнулся на эту страницу, и никто не записал какую-то функцию, чтобы делать то, что я хотел, так что вот мой. Он рисует масштабированные, повернутые и перевернутые изображения (я использовал это для разграничения элементов DOM на холсте, которые применяли эти такие преобразования).

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = document.getElementById("myimage.jpg"); //or whatever
var deg = 13; //13 degrees rotation, for example
var flip = "true";

function drawImage(img, x, y, width, height, deg, flip){
    //save current context before applying transformations
    ctx.save();
    //convert degrees to radians
    if(flip == "true"){ 
        var rad = deg * Math.PI / 180;
    }else{
        var rad = 2*Math.PI - deg * Math.PI / 180;
    }
    //set the origin to the center of the image
    ctx.translate(x + width/2, y + height/2);
    //rotate the canvas around the origin
    ctx.rotate(rad);
    if(flip == "true"){
        //flip the canvas
        ctx.scale(-1,1);
    }
    //draw the image    
    ctx.drawImage(img, -width/2, -height/2, width, height);
    //restore the canvas
    ctx.restore();
}

Ответ 6

Зеркальное изображение или рендеринг с помощью холста.

Примечание. Это можно сделать и с помощью CSS.

Зеркальное

Вот простая функция утилиты, которая будет отображать изображение по горизонтали, по вертикали или по обеим.

function mirrorImage(ctx, image, x = 0, y = 0, horizontal = false, vertical = false){
    ctx.save();  // save the current canvas state
    ctx.setTransform(
        horizontal ? -1 : 1, 0, // set the direction of x axis
        0, vertical ? -1 : 1,   // set the direction of y axis
        x + horizontal ? image.width : 0, // set the x origin
        y + vertical ? image.height : 0   // set the y origin
    );
    ctx.drawImage(image,0,0);
    ctx.restore(); // restore the state as it was when this function was called
}

Использование

mirrorImage(ctx, image, 0, 0, true, false); // horizontal mirror
mirrorImage(ctx, image, 0, 0, false, true); // vertical mirror
mirrorImage(ctx, image, 0, 0, true, true);  // horizontal and vertical mirror

Подходящее изображение.

Много раз вам нужно рисовать изображения. Мне нравится называть их доступными изображениями. Чтобы сделать обратный образ, вы конвертируете его в холст

Преобразование изображения в холст.

function makeImageDrawable(image){
    if(image.complete){ // ensure the image has loaded
        var dImage = document.createElement("canvas"); // create a drawable image
        dImage.width = image.naturalWidth;      // set the resolution
        dImage.height = image.naturalHeight;
        dImage.style.width = image.style.width; // set the display size
        dImage.style.height = image.style.height; 
        dImage.ctx = dImage.getContext("2d");   // get drawing API
                                                // and add to image
                                                // for possible later use
        dImage.ctx.drawImage(image,0,0);
        return dImage;
    }
    throw new ReferenceError("Image is not complete.");
 }

Объединяя все это

 var dImage = makeImageDrawable(image);  // convert DOM img to canvas
 mirrorImage(dImage.ctx, dImage, 0, 0, false, true); // vertical flip
 image.replaceWith(dImage);  // replace the DOM image with the flipped image

Больше зеркал

Если вы хотите иметь возможность зеркалировать произвольную строку, см. ответ Зеркало вдоль строки

Ответ 7

Один из вариантов - горизонтально перевернуть пиксели изображений, хранящихся в объектах ImageData, например,   

function flip_image (canvas) {
   	var context   = canvas.getContext ('2d') ;
   	var imageData = context.getImageData (0, 0, canvas.width, canvas.height) ;
   	var imageFlip = new ImageData (canvas.width, canvas.height) ;
   	var Npel      = imageData.data.length / 4 ;

   	for ( var kPel = 0 ; kPel < Npel ; kPel++ ) {
   	   	var kFlip      = flip_index (kPel, canvas.width, canvas.height) ;
   	   	var offset     = 4 * kPel ;
   	   	var offsetFlip = 4 * kFlip ;
   	   	imageFlip.data[offsetFlip + 0] = imageData.data[offset + 0] ;
   	   	imageFlip.data[offsetFlip + 1] = imageData.data[offset + 1] ;
   	   	imageFlip.data[offsetFlip + 2] = imageData.data[offset + 2] ;
   	   	imageFlip.data[offsetFlip + 3] = imageData.data[offset + 3] ;
   	}

   	var canvasFlip = document.createElement('canvas') ;
   	canvasFlip.setAttribute('width', width) ;
   	canvasFlip.setAttribute('height', height) ;

   	canvasFlip.getContext('2d').putImageData(imageFlip, 0, 0) ;
   	return canvasFlip ;
}

function flip_index (kPel, width, height) {
   	var i     = Math.floor (kPel / width) ;
   	var j     = kPel % width ;
   	var jFlip = width - j - 1 ;
   	var kFlip = i * width + jFlip ;
   	return kFlip ;
}

Ответ 8

Я нашел эту страницу, но хотел бы перевернуть только часть изображения, и я не нашел способа сделать это.

Это возможно?

Вот другой пример, найденный в интернете, где я пытался это сделать. Моя цель - перевернуть только левую или правую часть изображения. Спасибо за вашу помощь

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    flipButton = document.getElementById('flipButton'),
    img = new Image(),
    width = 500,
    height = 328;

function flipImage(image, ctx, flipH, flipV) {
    var scaleH = flipH ? -1 : 1, // Set horizontal scale to -1 if flip horizontal
        scaleV = flipV ? -1 : 1, // Set verical scale to -1 if flip vertical
        posX = flipH ? width * -1 : 0, // Set x position to -100% if flip horizontal 
        posY = flipV ? height * -1 : 0; // Set y position to -100% if flip vertical

    ctx.save(); // Save the current state
    ctx.scale(scaleH, scaleV); // Set scale to flip the image
    ctx.drawImage(img, posX, posY, width/2, height, posX, posY, width/2, height); // draw the part 1
    // how can i flip only the 2nd part ?
    //scaleH = flipH ? 1 : -1; // reverse condition !
    //posX = flipH ? 0 : width * -1; // reverse condition !
    ctx.scale(scaleH, scaleV); // Set scale to flip the image
    ctx.drawImage(img, posX+width/2, posY, width/2, height, 10+posX+width/2, posY, width/2, height); // draw the part 2
    ctx.restore(); // Restore the last saved state
}

function flipNinjas() {
    var flipH = document.getElementById('horizontalCheckbox').checked,
        flipV = document.getElementById('verticalCheckbox').checked;

    flipImage(img, ctx, flipH, flipV);

    return false;
}

flipButton.onclick = flipNinjas;
img.onload = flipNinjas;

img.src = 'http://3.bp.blogspot.com/-h_hVjcMqx8Q/TdSbVhT18sI/AAAAAAAAACQ/y-egUR0AtRM/s1600/ninja_true-ninjas.gif';