Not working in Safari

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create document with one image and JavaScript link to rotate it 90 degrees
2. Click the JavaScript link

What is the expected output? 
The image is rotated over 90 degrees

What do you see instead?
The canvas is rotated, but no image is shown inside.

What version of the product are you using? On what operating system?
Latest version of Safari on Mac OS X 10

Please provide any additional information below.
No JavaScript errors are thrown.

Original issue reported on code.google.com by webmas...@muvee.com on 19 Mar 2007 at 9:57

[GoogleCodeExporter]

With the following diff, it does work on safari too:

@@ -25,6 +25,8 @@
                canvas.width = p.width;

                canvas.style.filter =
"progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M
21="+sintheta+",M22="+costheta+",SizingMethod='auto
expand')";
+               p.parentNode.replaceChild(canvas, p);
+
        } else {
                var canvas = document.createElement('canvas');
                if (!p.oImage) {
@@ -33,11 +35,13 @@
                } else {
                        canvas.oImage = p.oImage;
                }
-
-               canvas.style.width = canvas.width =
Math.abs(costheta*canvas.oImage.width) + 
Math.abs(sintheta*canvas.oImage.height);
-               canvas.style.height = canvas.height =
Math.abs(costheta*canvas.oImage.height) + 
Math.abs(sintheta*canvas.oImage.width);
+               canvas.width = Math.abs(costheta*canvas.oImage.width) +
Math.abs(sintheta*canvas.oImage.height);
+               canvas.style.width =   canvas.width + 'px';
+               canvas.height = Math.abs(costheta*canvas.oImage.height) +
Math.abs(sintheta*canvas.oImage.width);
+               canvas.style.height =  canvas.height + 'px';

                var context = canvas.getContext('2d');
+               p.parentNode.replaceChild(canvas, p);
                context.save();
                if (rotation <= Math.PI/2) {
                        context.translate(sintheta*canvas.oImage.height,0);

Original comment by chr...@gmail.com on 6 Apr 2007 at 6:25

[GoogleCodeExporter]

problem seemed to me that when using safari the dimensions of the image are not 
known
yet when the canvas is being instantiated.  I just intercept the onload fort the
canvas' oImage and at that point evaluate the height/width...  attached my 
version of
the JS (based on 1.1 iteration), seems to work fine.

        canvas.oImage.onload = function() {
            canvas.style.width = canvas.width =
Math.abs(costheta*canvas.oImage.width) + 
Math.abs(sintheta*canvas.oImage.height);
            canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) +
Math.abs(sintheta*canvas.oImage.width); 

            var context = canvas.getContext('2d');
            context.save();
            if (rotation <= Math.PI/2) {
                context.translate(sintheta*canvas.oImage.height,0);
            } else if (rotation <= Math.PI) {
                context.translate(canvas.width,-costheta*canvas.oImage.height);
            } else if (rotation <= 1.5*Math.PI) {
                context.translate(-costheta*canvas.oImage.width,canvas.height);
            } else {
                context.translate(0,-sintheta*canvas.oImage.width);
            }
            context.rotate(rotation);
            context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
            context.restore();
        }

Original comment by mark.b...@gmail.com on 17 Jul 2008 at 10:05

Attachments:

• jquery.rotate.1-1.js

[GoogleCodeExporter]

this Javsscript work fine in Mozilla && IE without Problem (Tested)

// 
jQuery.fn.rotate = function(angle,whence) {
    var p = this.get(0);

    // we store the angle inside the image tag for persistence
    if (!whence) {
        p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
    } else {
        p.angle = angle;
    }

    if (p.angle >= 0) {
        var rotation = Math.PI * p.angle / 180;
    } else {
        var rotation = Math.PI * (360+p.angle) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);

    if (document.all && !window.opera) {
        var canvas = document.createElement('img');

        canvas.src = p.src;
        canvas.height = p.height;
        canvas.width = p.width;

        canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix
(M11="+costheta+",M12="+(-sintheta)
+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
    } else {

    $('body').append($(document.createElement('canvas')).attr('id','canvas'));
    var canvas = document.getElementById('canvas');
    // var canvas = $(canvas);
                 //oImage = new Image();
                 //oImage.src = p.src;

            canvas.style.width = canvas.width = Math.abs(costheta*p.width) + 
Math.abs(sintheta*p.height);
        canvas.style.height = canvas.height = Math.abs(costheta*p.height) + 
Math.abs(sintheta*p.width);

        var context = canvas.getContext('2d');
        context.save();
        if (rotation <= Math.PI/2) {
            context.translate(sintheta*p.height,0);
        } else if (rotation <= Math.PI) {
            context.translate(canvas.width,-costheta*p.height);
        } else if (rotation <= 1.5*Math.PI) {
            context.translate(-costheta*p.width,canvas.height);
        } else {
            context.translate(0,-sintheta*p.width);
        }
        context.rotate(rotation);
        context.drawImage(p, 0, 0, p.width, p.height);
        context.restore();
    }
     canvas.id = p.id;
      canvas.angle = p.angle;
    p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
    this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
    this.rotate(angle==undefined?-90:-angle);
}
This is a very simple HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
</head>
<body>
<table>
<tr><td align="left"><input type="button" value="<-Rotate" name="RotateL" 
class="inputSubmit" id="RotateL" onclick="$('#pic').rotateLeft();"><input 
type="button" class="inputSubmit" value="Rotate->" name="RotateR" id="RotateR" 
onclick="$('#pic').rotateRight();"></td></tr>
</table>
<p>
<img border="0" width='300' height='230' src="images/mustang.jpg" name="pic" 
id="pic">

    </p>

</body>
</html>

Original comment by kari...@hotmail.de on 21 Aug 2008 at 12:07

Attachments:

• jquery.rotate.1-1.js
• rotate.html

[GoogleCodeExporter]

Well, a simple fix for safari would be to use the    -webkit-transform: 
rotate(45deg); property. 

Its a 2 line fix
e.g. 

} else if ($.browser.safari){
        this.css("-webkit-transform", "rotate(" + angle + "deg)");

Reference site:
http://css-tricks.com/css3-clock/

Original comment by patrick....@gmail.com on 20 Dec 2008 at 10:23

[GoogleCodeExporter]

Thanks!! I loved this fix.

What about the Google Chrome? The images are not affected :(

Original comment by nunomigu...@gmail.com on 31 Jan 2009 at 2:12