HTML5 Canvas Flip Vertical работает в Firefox, но не в Chrome или Safari. Зачем? - PullRequest
Новая
       9

HTML5 Canvas Flip Vertical работает в Firefox, но не в Chrome или Safari. Зачем?

1 голос
/ 11 августа 2010

Вот код, который отлично работает в Firefox, но я просто не понимаю, почему он не работает в браузерах Webkit! Примечание: я использую jQuery для выбора элемента canvas. 

    (function()
    {
        flipV=function(imageData)
        {
            var n = new Array();
            var d = imageData.data;
        // loop through over row of pixels
            for (var row=0;row<imageData.height;row++)
            {
            // loop over every column
                for (var col=0;col<imageData.width;col++)
                {
                    var si,di,sp,dp;

                // source pixel
                    sp=(imageData.width*row)+col; 

                // destination pixel
                dp=(imageData.width*((imageData.height-1)-row))+col; 

                // source and destination indexes, will always reference the red pixel
                si=sp*4;
                    di=dp*4;

                    n[di]=d[si]; // red
                    n[di+1]=d[si+1]; // green
                    n[di+2]=d[si+2]; // blue
                    n[di+3]=d[si+3]; // alpha
                }
            }
            imageData.data=n;

            return imageData;
        };

        var imgs = ['/images/myimage.png'];

        var $c=$('#canvas');
        var cxt=$c[0].getContext('2d');


        var w=$c.width();
        var h=$c.height();

        var img1 = new Image();
        img1.onload=function()
        {   
            cxt.drawImage(img1,0,0,img1.width,img1.height,0,0,w,h);
            imageData = flipV(cxt.getImageData(0,0,w,h));
            cxt.putImageData(imageData,0,0)

        };
        img1.src=imgs[0];

    }
)();

1 Ответ

4 голосов
/ 11 августа 2010

Редактировать: Я немного поиграл с этим и заставил его работать. Проблема в том, когда вы устанавливаете imageData.data = n. Похоже, что Chrome / WebKit не будет работать с другим массивом data. Чтобы заставить его работать, я передал объект контекста flipV и вызвал createImageData(imageData.width, imageData.height), чтобы получить свежий объект ImageData, установил n = newImageData.data и возвратил newImageData.

Остальное я оставлю здесь для справки:

Существует более простой и, скорее всего, более быстрый способ перевернуть изображение, который будет работать в разных доменах. Вы можете использовать функцию scale для автоматического переворачивания всего, что вы рисуете вдоль оси y. Вам просто нужно обязательно позвонить save() и restore() и не забудьте изменить местоположение, так как все перевернуто. 

function drawVFlipped(ctx, img) {
    ctx.save();
    // Multiply the y value by -1 to flip vertically
    ctx.scale(1, -1);
    // Start at (0, -height), which is now the bottom-left corner
    ctx.drawImage(img, 0, -img.height);
    ctx.restore();
}
...