Wrap ganze Bild auf zylindrische Tasse in Javascript html5

Question

Ich möchte Bild auf zylindrische Tasse wickeln. Ich verwende html5 und Java Script um diese Lösung zu erreichen. Ich habe eine Idee von diesem Link: https://stackoverflow.com/questions/31424117/. Aber ich bekomme keine Lösung von diesem Link.

Ich mag hinter der Tasse verbleibende Bild wickeln, wie Form, um den verbleibenden Teil und eine Taste für eine Drehung hinzufügen.

<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); 
       } 

Wenn i den Zeigerwert in obigem Code zu ändern, als Stretch Bild verbleibt.

var pointer = 100 ; 

Ich möchte Bild auf ganze Tasse wickeln und in links und rechts drehen.

Answer 1

ich damit um Ihre plunkr für einige Zeit und kam gespielt haben: 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); 
    } 
} 

Ich nahm diese Auslassungs Gleichung http://www.mathopenref.com/coordgeneralellipse.html und es in der Form, wo ich aus verwandten bekommen Y-Koordinate X-Koordinate.

Sie mit meinem plunkr noch spielen können das Bild genauer deckt die Tasse zu machen, aber es ist von der Realität noch weit entfernt, da diese Methode verschiedene Blitzfunktionen der Oberfläche des Bechers unter Berücksichtigung nicht ist .

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>