Question

http://chrishorsnell.co.uk/emblem/rotate.php

我想让图片旋转。 jquery旋转插件（code.google.com/p/jquery-rotate/# sorry只能做1个超链接）插件工作正常，我已经让它在图像上工作（参见示例2），但我正在尝试实现它变成了其他东西，图像已经是画布（见例1）。

插件以图像开始，然后将其转换为画布并使用从第二个旋转开始的画布。当我尝试让它在我之前已经创建的画布上运行它不会工作。

同样在旋转第一个例子时，萤火虫抛出了这个

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://chrishorsnell.co.uk/emblem/jquery.rotate.1-1.js :: anonymous :: line 57" data: no]

这是jquery.rotate.1-1.js

的第57行

context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);

我认为问题出在jquery.rotate.1-1.js的第29-34行之间，但是无法弄清楚如何对其进行排序

    if (!p.oImage) {
        canvas.oImage = new Image();
        canvas.oImage.src = p.src;
    } else {
        canvas.oImage = p.oImage;
    }

有什么建议吗？

Answer 1

查看jquery.rotate.1-1.js的第2行：

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

如果您查看firebug，当您（尝试）旋转图片时，它会向undefined发送多个查询。

所以？好吧，你似乎无形地调用rotate()，所以它的内部函数有this == $。

并调用this.get(0)，因此将其解释为$.get(0)并执行XHR至undefined。

让我们解决部分问题：将第2行替换为：

var p = $(this).get(0); // don't do this. Instead:

if ( this === jQuery ) { throw new Exception("Don't pass jQuery object here!"); }
var p = this.get(0);

~~通过这种方式，您不会无意中调用$.get()：它会因递归过多而失败。~~

编辑：我是个傻瓜。检查this != jQuery，然后抛出错误。好多了。

现在它失败了：

rotate插件想要一个图像。如果它没有那个，它会尝试做非法的事情，然后失败。因此，给它一个图像。或者，自己编写旋转代码。

如果初始元素是图像，则Jquery-rotate工作，但如果是canvas，则不工作

1 个答案: