Question

我现在已经在这方面搁置了一段时间，但我似乎无法在上传后在Canvas上旋转图像。这是相关代码示例：

  // INITIATE & DRAW CANVAS
    var canvas = new fabric.Canvas('CanvasArtArtboard');

    // CREATE OVERLAY GRIDS
    canvas.setOverlayColor('rgba(205, 173, 64, 0.6)', canvas.renderAll.bind(canvas));

    // UPLOAD USER IMAGE TO CANVAS
    document.getElementById('imgLoader').onchange = function handleImage(e) {
        var reader = new FileReader();
                reader.onload = function (event) { 
            var imgObj = new Image();
                    imgObj.src = event.target.result;
                    imgObj.onload = function () {
                // start fabricJS stuff

            var image = new fabric.Image(imgObj);
                image.set({
                    originX:  'left',
                    originY: 'top',
                    padding: 0,
                    cornersize: 10,
                    scaleX: 0.4,
                    scaleY: 0.4,
                });

                //image.scale(getRandomNum(0.1, 0.25)).setCoords();
                canvas.add(image);
                image.sendToBack();
                            canvas.renderAll();

                //end fabricJS stuff
            }
        }
        reader.readAsDataURL(e.target.files[0]);
    }

    // ROTATE UPLOADED IMAGE
           $("#angle-control").click(function(){
            var curAngle = canvas.item(0).getAngle();
            canvas.item(0).setAngle(curAngle+15);
            canvas.renderAll();
          });

我看了下面的例子：

Add image from user computer to canvas（Stack OverFlow Question）
- http://jsfiddle.net/PromInc/3efe2x9j/

用户上传图片后点击＆＃34;旋转90 *＆＃34;按钮，我正在寻找图像然后旋转。

编辑：道歉，这是我的JSFiddle当前状态：http://jsfiddle.net/darnellcreates/oq6htzew/3/

Answer 1

我看了你的小提琴并且有很多错误。旋转的代码是好的（有点），但页面上充满了问题。

首先，没有JQuery，您使用JQuery $函数作为选择器来访问DOM元素。我没有看到使用jQuery的重点如果你所做的只是将它用作选择器，你在某些部分使用document.getElementById而在其他部分使用$。这完全否定了Jquery提供的任何好处。

其次，你要复制DOM元素ID（这是严格的否定）DOM ID必须是页面唯一的。

为了让你在这里有一些改变，

将HTML中的滑块元素更改为

<input type="range" id="angleControl1" value="0" min="-90" max="90">

请注意，该ID对于页面是唯一的。我也避免了命名约定（没有使它angle-control1），因为这是一个简单的页面，我将采用一些快捷方式并直接在JavaScript中访问DOM元素。

接下来，移除范围滑块的单击处理程序，并将其替换为鼠标移动事件侦听器。

 // keep a copy of the last value so there is no needless rotates
 var lastValue = angleControl1.value;  // no need to search the node tree. 
                                      // you can access elements directly by 
                                      // their ID.
 // Listen to the mousemoves of the range control. Click, change will
 // only update at the end of the mouse down up process. This does not 
 // provide good user feedback 
 angleControl1.addEventListener("mousemove",function(){
    if(this.value !== lastValue){  // only update the angle if it has changed
      // set the angle to the absolute angle rather than relative as you had it
      canvas.item(0).setAngle(Number(this.value)); // Number() is me being pedantic
      canvas.renderAll();  // rerender
      lastValue = this.value; // remember the last value
    }
  }); // all done for this function

请注意。直接DOM元素访问在某些情况下可能会有问题（如果您复制ID，在DOM加载之前将该id用作变量，您的页面正在共享全局命名空间，或者有人使用旧的netscape浏览器）但是对于简单的页面，它是最简单和最安全的方式（如果有人有网景，他们无论如何都无法运行页面，因为没有canvas元素。）

同时删除其他Jquery调用$()，因为它们会导致页面崩溃并阻止所有内容运行。

您需要在这些类型的情况下使用DevTools。它会向您显示所有错误，并为您提供不良习惯的警告（FireFox）。要在大多数浏览器上访问DevTool，请访问f12.DevTools控制台将列出错误并直接提供链接到发生的代码。您还可以逐行浏览代码，以便查看正在进行的操作。

Answer 2

我更新了你的jsfiddle，同时使用旋转按钮90o和范围栏，以防你需要它。

link：http://jsfiddle.net/rqevmp3y/1/

$("#angle-control").on('click', function (event) {
       console.log('rotate');
        var curAngle = canvas._objects[0].getAngle();

        canvas._objects[0].setAngle(curAngle+90);
        canvas.renderAll();
      });

$("#rangeControl").on('change', function (event) {
       console.log('rotate from range',$(this).val());
        var curAngle = canvas._objects[0].getAngle();
        canvas._objects[0].setAngle(curAngle+parseInt($(this).val()));

        canvas.renderAll();
      });

上载到画布后如何操作图像（FabricJS）

2 个答案: