Javascript Rotate（）不是一个函数

在我的项目中，我创建了一个画布，其中：

• 将图像加载到画布中
• 调整上传图像大小的可能性

现在，我试图添加旋转功能，以便在按住鼠标时旋转画布内加载的图像

我试图添加rotate（）函数，但它返回的错误消息是：$（…）。rotate不是函数

HTML

JS

$（函数（）{
$（“#文件输入”）.change（函数（e）{
var file=e.target.files[0]，
imageType=/image.*/；
如果（！file.type.match（imageType））
返回；
var reader=new FileReader（）；
reader.onload=文件onload；
reader.readAsDataURL（文件）；
});
函数fileOnload（e）{
变量$img=$（'
这是我希望效果如何实现的示例：


但是，在本例中，图像会立即加载到画布中。相反，我希望在使用输入文件将照片上载到画布时显示旋转效果。
这篇文章是重复的。无论如何，没有类似于
rotate（）的方法
在jQuery中。您需要使用方法来应用
转换

$（this.css（'transform'，'rotate（45度））；
我尝试添加rotate（）函数-什么“rotate”函数？您在哪里看到的？您认为它存在的原因是什么？它的文档在哪里？这是否回答了您的问题？您可能只是想包括您的小提琴似乎没有旋转的“手柄”with@freedomn-我的小提琴没有任何“把手”因为没有定义旋转函数。我试图在我的小提琴中包含jQueryrotate插件，但没有再次工作…我尝试使用$（“#canvas”）.mousedown（函数（e）{$（this）.css（'transform'，'rotate（45deg）；}）；但是工作不好，因为我想像示例中那样用鼠标自由旋转徽标
<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
<input type="file" id="file-input">

$(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});

                        }
                    }
                });
            
                
                
        
        
        });