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

如果我更改上面代码中的指针值,则比剩余图像拉伸.

var pointer = 100 ;

我想在整个杯子上包装图像并左右旋转.

Answer 1

我已经玩了一段时间了,并提出了这个问题: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);
    }
}

我把这个省略方程式http://www.mathopenref.com/coordgeneralellipse.html转换成我可以从相关的X坐标得到Y坐标的形式.

您可以更多地使用我的plunkr来使图像更准确地覆盖杯子,但它仍然远离现实,因为这种方法不考虑杯子表面的不同闪电特征.