Javascript 如何根据fabric.js中的上画布的下画布调整其大小。？

我在织物画布上添加我的裁剪图像和徽标，裁剪图像和徽标位于下方和上方画布上。现在的问题是如何设置织物画布的最大宽度，以便我可以将徽标拖出画布

我已经实现了现有画布、徽标和裁剪图像的最大宽度。这里的问题是我无法将徽标拖到整个画布上

这是密码

<div class="container"> 

<div style="position: relative;" id="editor">
    <canvas id="canvas" class="img-responsive"></canvas>
</div>

拯救
下载

$（函数（）{
var source=sessionStorage.getItem（“源”）；
$（“#背景”）.attr（“src”，来源）；
});
setTimeout（函数（）{
var myImg=document.querySelector（“背景”）；
var realWidth=myImg.naturalWidth；
var realHeight=myImg.naturalHeight；
$（“画布”）.attr（“宽度”，realWidth）；
$（“画布”）.attr（“高度”，realHeight）；
var source=document.getElementById（'background'）.src；
var canvas=newfabric.canvas（'canvas'）；
canvas.width=realWidth；
canvas.height=realHeight；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.src='images/logo.png'；
var imgInstance=新结构图像（img{
宽度：200
，身高：45
});
canvas.add（imgInstance）；
canvas.setBackgroundImage（源，canvas.renderAll.bind（canvas）{
背景图像不透明度：0.5
，backgroundImageStretch:false
});
}, 2000);
$（“#保存”）。单击（函数（）{
函数blobCallback（iconName）{
返回函数（b）{
var a=document.getElementById（'download'）；
a、 下载=iconName+“.jpg”；
a、 href=window.URL.createObjectURL（b）；
}
}
toBlob（blobCallback（'wallpaper'），'image/vnd.microsoft.jpg'，'-moz解析选项：format=bmp；bpp=32'）；
});

---

作为fabricjs画布，不要直接操纵宽度和高度，而是使用适当的方法：

setTimeout(function () {
    var myImg = document.querySelector("#background");
    var realWidth = myImg.naturalWidth;
    var realHeight = myImg.naturalHeight;
    var source = document.getElementById('background').src;
    var canvas = new fabric.Canvas('canvas');
    canvas.setDimensions({ width: realWidth, height: realHeight });
    var img = new Image();
    // use a load callback to add image to canvas.
    img.src = 'images/logo.png';
    var imgInstance = new fabric.Image(img, {
        width: 200
        , height: 45
    });
    canvas.add(imgInstance);
    canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5
        , backgroundImageStretch: false
    });


}, 2000);

<script>
$(function () {
    var source = sessionStorage.getItem("source");
    $("#background").attr("src", source);
});
setTimeout(function () {
    var myImg = document.querySelector("#background");
    var realWidth = myImg.naturalWidth;
    var realHeight = myImg.naturalHeight;
    $("canvas").attr("width", realWidth);
    $("canvas").attr("height", realHeight);
    var source = document.getElementById('background').src;
    var canvas = new fabric.Canvas('canvas');
    canvas.width=realWidth;
    canvas.height=realHeight;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = 'images/logo.png';
    var imgInstance = new fabric.Image(img, {
        width: 200
        , height: 45
    });
    canvas.add(imgInstance);
    canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5
        , backgroundImageStretch: false
    });


}, 2000);
$("#save").click(function(){
    function blobCallback(iconName) {
        return function (b) {
            var a = document.getElementById('download');
            a.download = iconName + ".jpg";
            a.href = window.URL.createObjectURL(b);
        }
    }
    canvas.toBlob(blobCallback('wallpaper'), 'image/vnd.microsoft.jpg', '-moz-parse-options:format=bmp;bpp=32');
});

setTimeout(function () {
    var myImg = document.querySelector("#background");
    var realWidth = myImg.naturalWidth;
    var realHeight = myImg.naturalHeight;
    var source = document.getElementById('background').src;
    var canvas = new fabric.Canvas('canvas');
    canvas.setDimensions({ width: realWidth, height: realHeight });
    var img = new Image();
    // use a load callback to add image to canvas.
    img.src = 'images/logo.png';
    var imgInstance = new fabric.Image(img, {
        width: 200
        , height: 45
    });
    canvas.add(imgInstance);
    canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5
        , backgroundImageStretch: false
    });


}, 2000);