如何在上传到画布后操作图像(FabricJS）

How to Manipulate Image After Uploaded To Canvas (FabricJS)

本文关键字：操作 图像 FabricJS      更新时间：2023-09-26

我已经为此绞尽脑汁了一段时间，但是上传后我似乎无法在 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/

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

首先，没有 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 浏览器），但对于简单页面，这是最简单和最安全的方法（如果有人有 netscape，他们无论如何都无法运行页面，因为没有 canvas 元素）。

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

在这些

类型的情况下，您需要使用开发人员工具。它将显示所有错误，并针对不良习惯向您发出警告（FireFox）。要访问 DevTool，请在大多数浏览器上按 f12。DevTools 控制台将列出错误，并提供直接指向发生错误的代码的链接。您还可以逐行单步执行代码，以便查看正在发生的事情。

我更新了您的 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();
      });
相关文章：