Rotate() is not a function

Question

In my project I created a canvas in which:

An image is loaded into the canvas
Possibility of resizing the uploaded image

Now I'm trying to add the rotate function to rotate the loaded image inside the canvas when I hold down the mouse.

I tried to add the rotate () function but the error message it returns is: $(...).rotate is not a function

HTML

<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
<input type="file" id="file-input">

JS

$(function() {
            
            $('#file-input').change(function(e) {
                var file = e.target.files[0],
                    imageType = /image.*/;

                if (!file.type.match(imageType))
                    return;

                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);
            });

            function fileOnload(e) {
                var $img = $('<img>', { src: e.target.result });
                $img.load(function() {
                    var canvas = $('#canvas')[0];
                    var context = canvas.getContext('2d');

                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    context.drawImage(this, 0, 0);
                });
            }
            
            $(document).mouseup(function(e) 
            {
                var container = $(".ui-wrapper");

                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target) && container.has(e.target).length === 0) 
                {
                    $("#canvas").css("border-style","hidden");
                    $(".ui-resizable-handle").attr("style","visibility: hidden");
                } else {
                        $("#canvas").css("border-style","solid");
                        $(".ui-resizable-handle").attr("style","visibility: visible");
                }
            });
            
            
                window.zindex = 30;

                $(".resize").resizable({handles: 'ne, se, sw, nw'});
                $(".resize").parent().draggable({
                    stack: "div"
                });
                
                
        //SCRIPT PER ROTAZIONE LOGO
        $(".resize").rotate({
                    bind: {
                        dblclick: function() {
                            $(this).data('angle', $(this).data('angle')+90);
                            var w = $(this).css('width');
                            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});

                        }
                    }
                });
            
                
                
        
        
        });

This instead is the example of how I would like the effect to come:

http://jsfiddle.net/m1erickson/QqwKR/

In this example, however, the image is immediately loaded into the canvas. Instead, I want the rotate effect to appear when I uploaded the photo into the canvas with the input file.

*I tried to add the rotate() function* - what "rotate" function? Where did you see this? What makes you think it exists? Where's its documentation? — freedomn-m, Jan 27 '21 at 08:53
Does this answer your question? [jQuery .rotate() doesn't work](https://stackoverflow.com/questions/23338620/jquery-rotate-doesnt-work) — freedomn-m, Jan 27 '21 at 08:53
You probably just meant to include the [jqueryroate plugin](https://jqueryrotate.com/) — freedomn-m, Jan 27 '21 at 08:57
Your fiddle doesn't appear to have any "handles" to rotate with — freedomn-m, Jan 27 '21 at 08:58
@freedomn-m exactly my fiddle have not any "handles" because rotate function is not defined. I tried to include jQueryrotate plugin in my fiddle but not work again... — Jackom, Jan 27 '21 at 09:01
Then it's not "an example of how it should work". Looks like it's not working because the image is 404. **edit** yes, that was it - "works" (badly) with an actual image - http://jsfiddle.net/j2uLv37e/ that fiddle is using [canvas rotate](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate) - what exactly do you want to rotate? a canvas or a div? — freedomn-m, Jan 27 '21 at 09:02
In my example that I have put, only the address of the image on which the rotation effect is applied is missing. The rest all works. Please try changing the image link to "img.src" and you will see that everything will work — Jackom, Jan 27 '21 at 09:06

score 0 · Answer 1 · answered Jan 27 '21 at 08:48

0

This post is duplicated. Anyways, there is no method like rotate() in jQuery. You need to use css() method to apply transform.

$(this).css('transform','rotate(45deg)');

answered Jan 27 '21 at 08:48

Alvaro Artano

116
9

Man i tried to use $("#canvas").mousedown(function (e) { $(this).css('transform','rotate(45deg)');}); but not work well because I want to freely rotate the logo with the mouse as in the example – Jackom Jan 27 '21 at 08:55

Rotate() is not a function

1 Answers1