Fabric.js canvas.setHeigth或setWidth推送后如何设置div？答案

【问题标题】：How to set div back after being pushed by Fabric.js canvas.setHeigth or setWidth?Fabric.js canvas.setHeigth或setWidth推送后如何设置div？
【发布时间】：2019-01-11 15:04:16
【问题描述】：

我打算使用 Fabric.js 为我的学校制作一个类似 twibbon 的网站，这样学生就可以发布一张图片并下载它以及我的学校活动图片，然后分享到 Instagram。

要以高分辨率下载图像并保持画布足够小以适合屏幕，我正在使用我从另一个 stackoverflow 问题here 找到的解决方案@

问题是画布仍然很小，但它推动了我的 div 或按钮远离 canvas.setWidth 或 setHeigth 的值。 here's my page 的样子。我该如何解决这个问题并恢复我的按钮？

这是我的代码：

.canvas-container canvas { 
  width: 400px !important; 
  height: 500px !important; 
  border: 1px solid blue;
}
body{
  font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;   
}
h1{
  color: rgb(119, 214, 124);
}
.site{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="cssTest.css">
    <title>Twibbon</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
    <script src="FileSaver.js"></script>
    <script src="canvas-toBlob.js"></script>
    </head>
    <body>
    <div class="site">
        <h1 class="title">Fortafaste Campaign</h1>
        <canvas id="c"></canvas>
        <input type="file" id="d" class="button">
        <input id="download" type="button" value="download" />
        <h2 class="contact">instagram</h2>
    </div>
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setWidth(1080);
        canvas.setHeight(1350);

        var canvasWrapper = document.getElementById('c');
        var canvasWrapperWidth = canvasWrapper.clientWidth;
        $(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
        fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
            img.scaleToWidth(canvas.getWidth());
            canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
        });
        function imageIsLoaded(e) {
            fabric.Image.fromURL(e.target.result,function(img){
                var aspectRatio = 1350/1080;
                var factor = 1080 / img.width;
                img.set({
                    scaleX: factor,
                    scaleY: factor 
                });
                canvas.add(img);
                canvas.sendToBack(img);
            });
        };
       
        $("#download").click(function(){
            $("#c").get(0).toBlob(function(blob){
                saveAs(blob, "myIMG.png");
            });
        });
    </script>
</body>
</html>

【问题讨论】：

您将画布的宽度设置为 1080，这会将其右侧的所有内容推得更远。如果这对于应用程序的功能是绝对必要的，您可以绝对定位您的“选择文件”按钮jsfiddle.net/0Luwkhbz/3 否则，是的，只需减小画布宽度。

标签： javascript html css image canvas

【解决方案1】：

我建议您简化设计...

将所有信息和操作按钮保留在顶部和下方的画布上，这是一个示例：

.canvas-container canvas { 
  width: 400px !important; 
  height: 500px !important; 
  border: 1px solid blue;
}
body{
  font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;   
}
h1{
  color: rgb(119, 214, 124);
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="cssTest.css">
    <title>Twibbon</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
    <script src="FileSaver.js"></script>
    <script src="canvas-toBlob.js"></script>
    </head>
    <body>
    <div class="site">
        <div>
          <h1 class="title">Fortafaste Campaign</h1>
          <input type="file" id="d" class="button">
          <input id="download" type="button" value="download" />
          <h2 class="contact">instagram</h2>
        </div>
        <canvas id="c"></canvas>
    </div>
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setWidth(1080);
        canvas.setHeight(1350);

        var canvasWrapper = document.getElementById('c');
        var canvasWrapperWidth = canvasWrapper.clientWidth;
        $(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
        fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
            img.scaleToWidth(canvas.getWidth());
            canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
        });
        function imageIsLoaded(e) {
            fabric.Image.fromURL(e.target.result,function(img){
                var aspectRatio = 1350/1080;
                var factor = 1080 / img.width;
                img.set({
                    scaleX: factor,
                    scaleY: factor 
                });
                canvas.add(img);
                canvas.sendToBack(img);
            });
        };
       
        $("#download").click(function(){
            $("#c").get(0).toBlob(function(blob){
                saveAs(blob, "myIMG.png");
            });
        });
    </script>
</body>
</html>

【讨论】：