jQuery rotate is not a function 如何实现canvas上传图片拖拽旋转

报错核心原因 #

• 出现$(...).rotate is not a function的本质原因是，当前代码里调用的$().rotate()并非jQuery或jQuery UI的原生方法，这个方法是第三方jQuery Rotate插件提供的能力，没有引入对应插件文件时，自然会抛出方法不存在的错误。
• 你现在的实现思路有个核心误区：要实现“按住鼠标旋转canvas内图片”的效果，根本不需要依赖DOM级别的CSS旋转插件，直接基于Canvas2D原生API做坐标变换即可实现，和交互逻辑完全匹配，也不会和你已经在用的resizable尺寸缩放、draggable拖拽功能产生样式冲突。

现有代码的已知bug修正 #

• 文档级鼠标抬起事件中的判断逻辑存在语法错误：container一开始被定义为字符串类名，不是jQuery实例，没有.is()方法，会导致点击外部隐藏边框的逻辑完全失效。修正方式是先将类名转为jQuery实例：

$(document).mouseup(function(e) {
    // 修正为jQuery实例
    var container = $(".ui-wrapper");
    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");
    }
});

• 直接删掉之前依赖第三方插件的旋转代码段：

// 这段代码在未引入rotate插件的情况下会直接报错，无存在必要
$(".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});
        }
    }
});

适配现有上传逻辑的旋转实现 #

完全不需要改动你已有的本地文件加载、画布初始化的核心链路，只需要补充canvas层的状态存储和交互事件绑定，就能实现按住鼠标拖拽旋转图片的效果：

• 全局存储运行状态：记录已加载的图片实例、当前旋转角度、旋转激活状态，避免每次旋转重复读取文件
• 封装统一的canvas重绘函数：每次交互触发时，清空原有画布内容，将绘图坐标系原点平移到画布中心，应用当前旋转角度后重新绘制图片
• 绑定canvas鼠标事件：鼠标按下时激活旋转状态，鼠标移动时计算当前鼠标位置相对于画布中心的夹角作为旋转角度，触发重绘，鼠标抬起时结束旋转状态

对应实现代码可以直接嵌入现有逻辑中：

// 全局状态定义
let currentLoadedImg = null;
let currentRotateAngle = 0;
let isRotatingActive = false;

// 替换原有的fileOnload函数
function fileOnload(e) {
    var $img = $('<img>', { src: e.target.result });
    $img.load(function() {
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');
        // 存储已加载的图片实例，供后续旋转重绘使用
        currentLoadedImg = this;
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;
        // 首次渲染画布
        redrawCanvas();
    });
}

// 封装通用画布重绘逻辑
function redrawCanvas() {
    if (!currentLoadedImg) return;
    const canvas = $('#canvas')[0];
    const ctx = canvas.getContext('2d');
    // 清空整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 将坐标原点平移到画布中心点
    ctx.translate(canvas.width / 2, canvas.height / 2);
    // 应用当前旋转角度
    ctx.rotate(currentRotateAngle);
    // 绘制图片，偏移量设为图片宽高的一半，让图片中心与画布中心重合
    ctx.drawImage(
        currentLoadedImg,
        -currentLoadedImg.naturalWidth / 2,
        -currentLoadedImg.naturalHeight / 2
    );
}

// 绑定旋转交互事件（在DOM就绪后执行一次即可）
function bindCanvasRotateEvent() {
    const canvas = $('#canvas')[0];
    // 鼠标按下：激活旋转状态
    canvas.addEventListener('mousedown', () => {
        isRotatingActive = true;
    });
    // 鼠标移动：实时计算旋转角度并重绘
    canvas.addEventListener('mousemove', (e) => {
        if (!isRotatingActive || !currentLoadedImg) return;
        const canvasRect = canvas.getBoundingClientRect();
        // 计算画布中心在视口中的坐标
        const centerX = canvasRect.left + canvasRect.width / 2;
        const centerY = canvasRect.top + canvasRect.height / 2;
        // 计算鼠标位置与画布中心的夹角作为当前旋转角度
        currentRotateAngle = Math.atan2(e.clientY - centerY, e.clientX - centerX);
        redrawCanvas();
    });
    // 鼠标抬起：终止旋转状态
    canvas.addEventListener('mouseup', () => {
        isRotatingActive = false;
    });
}

在jQuery的DOM就绪回调里，补充调用一次bindCanvasRotateEvent()即可完成绑定，所有逻辑和你现有的文件上传、尺寸缩放能力完全兼容，最终实现按住鼠标即可旋转画布内已加载图片的效果。

内容的提问来源于stack exchange，提问作者Jackom