上傳到畫布后如何處理圖像（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();
      });