Javascript 在纸杯上包装图像（背景图像）

我想在样本纸杯上包装图像和文本。 当图像上传到画布上时，我想将其环绕在纸杯的背景图像周围，纸杯的位置始终固定。 我将Fabric JS用于html5画布工具。 这是我的代码，但它只显示了1像素的图像，而且当我点击图像进行拖放时，它消失了

HTML:

删除：

JS:

var offsetY=[0,1,2,3,4,5,6,5,4,3,2,1,0]；
var canvas=new fabric.canvas（'canvas'{
背景颜色：“rgb（240240）”
});
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var image=新图像（）；
image.onload=函数（）{
变量宽度=image.width，
高度=图像高度；
var context=$（“canvas”）[0].getContext（“2d”）；
对于（var x=0；x您可以像这样绘制用户图像：


拿起这个纸杯：


结果如下：


使用此示例代码：

修改此示例以满足您的需要。祝您的项目好运


var faceCanvas=document.getElementById（'face'）；
var faceCtx=faceCanvas.getContext（'2d'）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-cw，ch；
$myslider=$（“#myslider”）；
$myslider.val（50）；
var-PI=Math.PI；
var-cupTop=78；
var cupBottom=295；
var dxx=19；
var-dyy=34；
变量l={
x0:41，
y0:cupTop，
x1:74，
y1：杯底
};
变量r={
x0:249，
y0:cupTop，
x1:218，
y1：杯底
};
变量t={
x0:l.x0，
y0:l.y0，
x1:l.x0+dxx，
y1:r.y0+dyy，
x2:r.x0-dxx，
y2:r.y0+dyy，
x3:r.x0，
y3:r.y0
};
变量b={
x0:l.x1，
y0:l.y1，
x1:l.x1+dxx，
y1:r.y1+dyy，
x2:r.x1-dxx，
y2:r.y1+dyy，
x3:r.x1，
y3:r.y1
};
var-topOffset=40；
var imgCount=2；
var cup=新图像（）；
cup.crossOrigin='匿名'；
cup.onload=启动；
var pic=新图像（）；
pic.crossOrigin='匿名'；
pic.onload=启动；
cup.src=https://image.ibb.co/iKJvyc/VENFv.png';
pic.src=https://image.ibb.co/dJHG4H/Pu7aY.jpg';
函数start（）{
如果（--imgCount>0）{
返回；
}
cw=canvas.width=faceCanvas.width=cup.width；
ch=canvas.height=faceCanvas.height=cup.height；
draw（）；
面（）；
$myslider.change（函数（）{
var value=parseInt（$（this）.val（））/100；
地形偏移=（l.y1-l.y0-图片高度）*值；
draw（）；
面（）；
});
}
函数面（）{
//
var lm=（l.y1-l.y0）/（l.x1-l.x0）；
var lb=l.y1-（lm*l.x1）；
//
var rm=（r.y1-r.y0）/（r.x1-r.x0）；
var rb=r.y1-（rm*r.x1）；
clearRect（0，0，faceCanvas.width，faceCanvas.height）；
对于（变量y=0；y

正文{
背景颜色：象牙色；
}
帆布{
边框：1px纯红；
}

垂直位置：

这里有几个初始错误：您使用CSS设置画布大小（直接使用宽度和高度，仅限），您使用1像素的目标宽度绘制图像（这解释了为什么图像的宽度为1像素），而直接使用画布不会更新结构的内部（您应该使用结构方法）这就是为什么当你与fabric交互时画布会变为空白。你能帮我写下drawImage的代码吗？我想实现这样的效果-谢谢markE。这会有很大帮助。但是可以改用fabric方法吗？这种方法不允许拖放、调整大小和旋转。在你使用html c创建效果之后anvas，您可以使用html画布作为图像源创建fabric.Image。我在回答中添加了示例代码。干杯！太棒了。我想这样可以：）@markE我能问一下为什么吗
<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    Remove:<input type="button" value="remove" id="imageRemove" name="imageRemove" onClick="handleRemove()"/>
    <canvas id="canvas" width="500" height="400" style="width:1000px;height:500px;margin-left:5%;" ></canvas>


</div>

var offsetY=[0,1,2,3,4,5,6,5,4,3,2,1,0];

var canvas = new fabric.Canvas('canvas', {
    backgroundColor: 'rgb(240,240,240)'
});



var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var image = new Image();
    image.onload = function () {
        var width = image.width,
            height = image.height;
        var context = $("canvas")[0].getContext("2d");
        for(var x=0;x<offsetY.length;x++){
            context.drawImage(image,
                x,0,1,image.height,
                x,offsetY[x],1,image.height);           
        }

    };
    image.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

function handleRemove() {
canvas.clear().renderAll();
}