如何根据fabric.js中较低的画布调整上层画布的大小？

Question

我在布料画布上添加裁剪后的图像和徽标，裁剪后的图像和徽标是较低和较高的画布。现在的问题是如何将最大宽度设置为织物画布，以便我可以将徽标拖出画布。

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

下面是代码

<div class="container"> 

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

<div class="container"> 
<a class="btn btn-primary" id="save">Save</a> 
<a class="btn btn-primary" id="download">Download</a> 

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

Answer 1

是一个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);