在畫布上保存扭曲的圖像

Question

我可以使用透視變換js來扭曲圖像，然後我試圖在畫布上繪製應該是扭曲圖像的圖像。畫布需要動態生成，並且可能還包含背景圖片。

我無法弄清楚如何重繪畫布上的扭曲圖像。

這裏的fiddle

$('#btnDistort').on('click touchstart', function (e) { 
    if (!jaaliApp.currentJaali.jaali) { 
     jaaliApp.currentJaali.jaali = $('.img'); 
     var url = $('.img').css('backgroundImage'); 
     url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); 
     jaaliApp.currentJaali.url = url; 
    } 
    jaaliApp.distort(jaaliApp.currentJaali.jaali); 
}); 

var jaaliApp = { 
    distort: function (image) { 
     var img; 
     while (!$(image).is('.img')) { 
      image = $(image).parent(); 
     } 
     img = $(image); 
     var container = $(img).parent(); 

     function createHandles() { 
      $(container).find(".pt").remove(); 
      var topLeft = document.createElement("div"); 
      topLeft.className = "pt tl"; 
      $(container).append(topLeft); 
      var topRight = document.createElement("div"); 
      topRight.className = "pt tr"; 
      $(container).append(topRight); 
      var bottomLeft = document.createElement("div"); 
      bottomLeft.className = "pt bl"; 
      $(container).append(bottomLeft); 
      var bottomRight = document.createElement("div"); 
      bottomRight.className = "pt br"; 
      $(container).append(bottomRight); 
     } 
     createHandles(); 
     var pts = $(container).find(".pt"); 
     var IMG_WIDTH = $(img).parent().width(); 
     var IMG_HEIGHT = $(img).parent().height(); 
     var IMG_OFFSET = { 
      left: 0, 
      top: 0 
     }; /*$(img).parent().offset();*/ 
     var transform = new PerspectiveTransform(img[0], IMG_WIDTH, IMG_HEIGHT, true); 
     var tl = pts.filter(".tl").css({ 
      left: transform.topLeft.x + IMG_OFFSET.left, 
      top: transform.topLeft.y + IMG_OFFSET.top 
     }); 
     var tr = pts.filter(".tr").css({ 
      left: transform.topRight.x + IMG_OFFSET.left, 
      top: transform.topRight.y + IMG_OFFSET.top 
     }); 
     var bl = pts.filter(".bl").css({ 
      left: transform.bottomLeft.x + IMG_OFFSET.left, 
      top: transform.bottomLeft.y + IMG_OFFSET.top 
     }); 
     var br = pts.filter(".br").css({ 
      left: transform.bottomRight.x + IMG_OFFSET.left, 
      top: transform.bottomRight.y + IMG_OFFSET.top 
     }); 
     var target; 
     var targetPoint; 

     function onMouseMove(e) { 
      console.log($(this)) 
      targetPoint.x = e.pageX - container.offset().left; 
      targetPoint.y = e.pageY - container.offset().top; 
      target.css({ 
       left: targetPoint.x, 
       top: targetPoint.y 
      }); 
      // check the polygon error, if it's 0, which mean there is no error 
      if (transform.checkError() == 0) { 
       transform.update(); 
       img.show(); 
      } else { 
       img.hide(); 
      } 
      e.stopPropagation(); 
     } 

     $(pts).draggable({ 
      containment: '#jaaliContainer', 
      start: function (e) { 
       console.log(e); 
       target = $(this); 
       targetPoint = target.hasClass("tl") ? transform.topLeft : target.hasClass("tr") ? transform.topRight : target.hasClass("bl") ? transform.bottomLeft : transform.bottomRight; 
       onMouseMove.apply(this, Array.prototype.slice.call(arguments)); 
      }, 
      stop: function (e) { 
       console.log(e) 
      }, 
      drag: onMouseMove 
     }); 
    } 
} 

保存按鈕的點擊圖像如要在畫布上繪製。我怎樣才能達到相同的目標？

Answer 1

不幸的是不能保存CSS失真元素的圖像。在這種情況下，畫布只是其他任何元素，並且失真比我們在更新畫布位圖時暴露的位圖更低。

如果您想要在這裏進行四邊形轉換，您必須自己實現低級數學運算和算法以修改暴露的位圖本身。

只有這樣你才能保存內容。

您可能將來會使用SVG繞過它，但目前有很多限制（例如不允許使用外部引用，如圖像）。