Fabric JS html 5 вариантов изгибания изображения

Question

Я хочу сделать графическую кривую с помощью инструмента html5.

Я использую Fabric.js для инструмента холста html5.

Пожалуйста, помогите мне, как сделать изогнутое изображение на изображении, например кружкой, стеклом, цилиндрическим или круглым типом продуктов.

Реф. Изображение ниже:

http://vsdemo.cwwws.com/Images/ProductImages/asdasd.jpg

Answer 1

Что вы желая называется «перспектива перекос» и не доступен в родной 2D холст.

Вы можете добиться своего эффекта, рисуя вертикальные полосы шириной 1 пиксель вашего изображения с соответствующими Y-смещениями.

Вот схема того, как сделать это, чтобы дать вам отправную точку:

• Создать массив у-смещений, образующих нужную кривую:

  // Just an example, you would define much better y-offsets! 
  // Hint: Better offsets can be had by fetching y-values from a quadratic curve. 
  
  var yOffsets=[0,1,2,3,4,5,6,5,4,3,2,1,0]; 
  

• Создание холста в памяти:

  var canvas=document.createElement('canvas') 
  var context=canvas.getContext('2d'); 
  

• Используйте версию отсечения context.drawImage рисовать 1 пиксельные широкие вертикальные срезы изображения с «искривлением» у-зачеты:

  for(var x=0;x<offsetY.length;x++){ 
      context.drawImage(img, 
       // clip 1 pixel wide slice from the image 
       x,0,1,img.height, 
       // draw that slice with a y-offset 
       x,offsetY[x],1,img.height 
      );   
  } 
  

• Создать изображение из временного холста и создать объект изображения в FabricJS :

  var perspectiveImage=new Image(); 
  perspectiveImage.onload=function(){ 
      // This is the mug-shaped image you wanted! 
      // Use it in FabricJS as desired. 
  } 
  perspectiveImage.src=canvas.toDataURL();