ジャバスクリプトhtml5で筒状のカップに画像全体を包み込む

Question

円筒状のカップに画像を包みたい。私はこのソリューションを実現するためにhtml5とJavaスクリプトを使用しています。私はこのリンクからいくつか考えました：https://stackoverflow.com/questions/31424117/。 しかし、私はこのリンクから解決策を得ていません。

私は、金型と同じように、カップの後ろに残りの部分を、残りの画像をラップし、回転のためのいくつかのボタンを追加したいです。

<canvas id="canvas"></canvas> 

     <script> 
      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 

      var productImg = new Image(); 
      productImg.onload = function() { 
       var iw = productImg.width; 
       var ih = productImg.height; 
       console.log("height"); 

       canvas.width = iw; 
       canvas.height = ih; 

       ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih); 

       //start(); 

       // outline 
       /*ctx.beginPath(); 
       ctx.moveTo(88, 235.734375); 
       ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375); 
       ctx.stroke();*/ 
      }; 
      productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg"; 

      var img = new Image(); 
      img.onload = start; 
      img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg"; 
      var pointer = 0;   


      function start() { 

       var iw = img.width;    
       var ih = img.height; 
       //canvas.width = iw + 20; 
       //canvas.height = ih + 20; 

       var x1 = 125; 
       var y1 = 130; 
       var x2 = 180; 
       var y2 = 190; 
       var x3 = 405; 
       var y3 = 150; 

       // calc line equations slope & b (m,b) 
       var unitT = 1/iw; 

       // draw vertical slices 
       for (var X = 0, t = 0; X < iw; X++, t += unitT) { 
        var xTop = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;     
        var yTop = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3; 
        ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih - 600); 
       } 

iが画像 ストレッチを残りよりも、上記のコードでは、ポインタ値を変更した場合。

var pointer = 100 ; 

画像全体をマグカップでラップして左右に回転したいと思います。

Answer 1

私はいくつかの時間のためにあなたのplunkr周りをプレイし、これを思い付いてきた：私はこの省略記号式http://www.mathopenref.com/coordgeneralellipse.htmlを取って、私は関連のY座標を取得することができますフォームにそれを回す http://plnkr.co/edit/83xAr99FjswWg0GHjDvJ?p=preview

function start() { 

    var iw = img.width; 
    var ih = img.height; 

    var xOffset = 125, 
     yOffset = 122; 

    var a = 122.0; 
    var b = 30.0; 

    var scaleFactor = iw/(2*a); //how many times original image is greater compared to our rendering area? 

    // draw vertical slices 
    for (var X = 0; X < iw; X+=1) { 
     var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation 
     ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2); 
    } 
} 

X座標。

あなたは、画像をより正確にカップをカバーするために私のplunkrでさらに多くのを再生することができますが、この方法は、カップの表面の異なる雷特徴を考慮していないので、それは遠く離れて現実からまだあります。

Answer 2

function canvas1() { 
 
    var canvas = document.getElementById("canvas1"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    var productImg = new Image(); 
 
    productImg.onload = function() { 
 
    var iw = productImg.width; 
 
    var ih = productImg.height; 
 
    console.log("height"); 
 

 
    canvas.width = iw; 
 
    canvas.height = ih; 
 

 
    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 
 
     0, 0, iw, ih); 
 
    loadUpperIMage() 
 
    }; 
 

 
    productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpg" 
 

 

 
    function loadUpperIMage() { 
 
    var img = new Image(); 
 

 

 
    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" 
 
    img.onload = function() { 
 

 
     var iw = img.width; 
 
     var ih = img.height; 
 

 
     var xOffset = 102, //left padding 
 
     yOffset = 110; //top padding 
 

 
     //alert(ih) 
 
     var a = 75.0; //image width 
 
     var b = 10; //round ness 
 

 
     var scaleFactor = iw/(4 * a); 
 

 
     // draw vertical slices 
 
     for (var X = 0; X < iw; X += 1) { 
 
     var y = b/a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation 
 
     ctx.drawImage(img, X * scaleFactor, 0, iw/9, ih, X + xOffset, y + yOffset, 1, 174); 
 
     } 
 
    }; 
 
    } 
 

 
}; 
 

 
function canvas2() { 
 

 
    var canvas = document.getElementById("canvas2"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    var productImg = new Image(); 
 
    productImg.onload = function() { 
 
    var iw = productImg.width; 
 
    var ih = productImg.height; 
 
    console.log("height"); 
 

 
    canvas.width = iw; 
 
    canvas.height = ih; 
 

 
    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 
 
     0, 0, iw, ih); 
 
    loadUpperIMage() 
 
    }; 
 

 

 
    productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpg" 
 

 
    function loadUpperIMage() { 
 
    var img = new Image(); 
 

 
    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" 
 

 
    img.onload = function() { 
 

 
     var iw = img.width; 
 
     var ih = img.height; 
 

 
     // alert(iw) 
 

 
     var xOffset = 101, //left padding 
 
     yOffset = 110; //top padding 
 

 
     var a = 75.0; //image width 
 
     var b = 10; //round ness 
 

 
     var scaleFactor = iw/(4 * a); 
 

 
     // draw vertical slices 
 
     for (var X = 0; X < iw; X += 1) { 
 
     var y = b/a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation 
 
     ctx.drawImage(img, X * scaleFactor, 0, iw/3, ih, X + xOffset, y + yOffset, 1, 174); 
 

 
     } 
 
    }; 
 
    } 
 

 
}; 
 

 
function canvas3() { 
 

 
    var canvas = document.getElementById("canvas3"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    var productImg = new Image(); 
 
    productImg.onload = function() { 
 
    var iw = productImg.width; 
 
    var ih = productImg.height; 
 

 
    canvas.width = iw; 
 
    canvas.height = ih; 
 

 
    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 
 
     0, 0, iw, ih); 
 
    loadUpperIMage() 
 
    }; 
 

 
    productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg" 
 

 

 
    function loadUpperIMage() { 
 
    var img = new Image(); 
 

 
    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" 
 

 
    img.onload = function() { 
 

 
     var iw = img.width; 
 
     var ih = img.height; 
 

 
     //alert(iw) 
 

 
     var xOffset = 102, //left padding 
 
     yOffset = 110; //top padding 
 

 
     var a = 75.0; //image width 
 
     var b = 10; //round ness 
 

 
     var scaleFactor = iw/(3 * a); 
 

 
     // draw vertical slices 
 
     for (var X = 0; X < iw; X += 1) { 
 
     var y = b/a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation 
 
     ctx.drawImage(img, X * scaleFactor, 0, iw/1.5, ih, X + xOffset, y + yOffset, 1, 174); 
 
     } 
 
    }; 
 
    } 
 

 
}; 
 

 
setTimeout(function() { 
 
    canvas1() 
 
}, 1000); 
 
setTimeout(function() { 
 
    canvas2() 
 
}, 2000); 
 
setTimeout(function() { 
 
    canvas3() 
 
}, 3000); 
 

 
function updateItems(delta) 
 
{ 
 
    var $items = $('#group').children(); 
 
    var $current = $items.filter('.current'); 
 
    $current = $current.length ? $current : $items.first(); 
 
    var index = $current.index() + delta; 
 
    // Range check the new index 
 
    index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); 
 
    $current.removeClass('current'); 
 
    $current = $items.eq(index).addClass('current'); 
 
    // Hide/show the next/prev 
 
    $("#prev").toggle(!$current.is($items.first()));  
 
    $("#next").toggle(!$current.is($items.last()));  
 
} 
 
$("#next").click(function() { 
 
    updateItems(1); 
 
}); 
 
$("#prev").click(function() { 
 
    updateItems(-1); 
 
}); 
 
// Cause initial selection 
 
updateItems(0);

#group div{ 
 
    display: none; 
 
} 
 
#group div.current{ 
 
    display: block; 
 
    
 
} 
 
#next, #prev{ 
 
    width: 100px; 
 
    height 40px; 
 
    cursor:pointer; 
 
    color:red; 
 
    position:fixed; 
 
} 
 
#next{ 
 
    float: right; 
 
} 
 
#prev{ 
 
    float: left; 
 
    margin-left:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<div id="next">next</div> 
 
<div id="prev">prev</div> 
 
<div id="group" > 
 
    <div> 
 
    <canvas id="canvas1"></canvas> 
 
    </div> 
 

 
    <div> 
 
    <canvas id="canvas2"></canvas> 
 
    </div> 
 

 
    <div> 
 
    <canvas id="canvas3"></canvas> 
 
    </div> 
 
</div>