如何弯曲不同形状的图像，就像'm'

Question

我想像衬衫领一样给曲线图像。 Curve image

我有图像。Main image

我使用下面的代码

<script type="text/javascript">
function allcurve(event){   
    topcolrcurve(event);    
}

function topcolrcurve(event){   

    var getImagePath = URL.createObjectURL(event.target.files[0]);
        console.log(getImagePath)

    temp_can1 = document.getElementById('f6258182013');
    temp_can1_ctx = temp_can1.getContext('2d');

    topcolrrotator(getImagePath, '-100');
}

function topcolrrotator(var2, var3) 
{
    var mr_rotator_var = document.getElementById('colrtop_can');
    var mr_rotator_var_ctx = mr_rotator_var.getContext("2d");
    mr_rotator_var.width = mr_rotator_var.width;
    var imageObj_rotator3 = new Image();
    var hpp='';
    imageObj_rotator3.onload = function () {
        var pattern_rotator3 = mr_rotator_var_ctx.createPattern(imageObj_rotator3, "repeat");
        mr_rotator_var_ctx.fillStyle = pattern_rotator3;
        mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height);
        mr_rotator_var_ctx.rotate(var3 * Math.PI / 180);
        mr_rotator_var_ctx.fill();
        hpp = mr_rotator_var.toDataURL('image/png');
        rightcufover(hpp);
    };
   imageObj_rotator3.src = var2;
}

function rightcufover(event)
{
    var getImagePath = event;
    var ctx = e.getContext("2d"); 

    var img = new Image;
    img.onload = slice;
    img.src = getImagePath;

        function slice() {
        var w = e.width = this.width;
        var h = e.height = this.height;
        var step = Math.PI * 1 / w;           
        var scale = -100;                       

            for(var x = 0; x < w; x++) {
            ctx.drawImage(this,
            x, 0, 1, h,                       
            x, Math.sin(step*x)*scale, 1, h); 
            }
            var hp=e.toDataURL('image/png');
            $('#collrtop').attr("value", hp);
        }
}   

请帮助如何弯曲图像。

我以不同的方式尝试它，但它没有显示正确，我也必须保持图像的质量。