上传到画布后如何处理图像（FabricJS）

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

我看了以下示例：

• 将图像从用户计算机添加到画布 （堆栈溢出问题）

  • http://jsfiddle.net/PromInc/3efe2x9j/

用户上载图像并单击“旋转90 *”按钮后，我正在寻找要旋转的图像。

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

Answer 1

我看了你的小提琴，有很多错误。 旋转代码可以（某种），但是页面上充满了问题。

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

其次，您正在复制DOM元素ID（这是严格的否定）。DOMID必须对页面唯一。

为了让您上路，这里做了一些更改，

将HTML中的Slider元素更改为

<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浏览器），但是对于简单页面而言是最简单，最安全的方法（如果某人拥有netscape，则由于没有canvas元素，他们无论如何也无法运行该页面）。

还要删除其他Jquery调用$()因为它们会导致页面崩溃并停止所有运行。

您需要在这些情况下使用DevTools。 它将向您显示所有错误，并警告您（FireFox）不良习惯。 要在大多数浏览器中访问f12，请访问DevTools控制台。DevTools控制台将列出错误，并提供直接链接到发生错误的代码。 您也可以逐行浏览代码，以便查看发生了什么。

Answer 2

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

链接： 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();
      });