单击来自 canvas HTML5 的按钮后，上传的图像显示为背景图像

Question

我正在使用 HTML5 和 fabric js。我正在拍摄拖曳背景图片并在此背景图片上上传图片。但是当我将 canvas 转换为图像时，只有上传的图像来了。我给你看截图。

点击提交按钮后：

在第二个屏幕截图中，只会出现上传的图像。但是我希望上传的图片应该带有背景图片。

代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
</head>
<body>
 <style>
            canvas{
                border: 1px solid black;
            }
            #canvascolor input {
                height:50px;
                width:50px;
            }
        </style>
         <input type="file" id="file">
                    <canvas id="canvas" width="520" height="520"></canvas>
                    <section id="canvascolor">                      
                        <input  class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg">
                        <input  class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg">
                    </section>
                    <button href='' id='txt' target="_blank">submit</button>
                    <br />
                    <img id="preview" />
           <script>
             var canvas = new fabric.Canvas('canvas');
            $("#canvascolor > input").click(function () {
                var img = $(this).attr('src');
                $('#canvas').css("background-image", "url(" + img + ")");
            });
            document.getElementById('file').addEventListener("change", function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                console.log("reader   " + reader);
                reader.onload = function (f) {
                    var data = f.target.result;
                    fabric.Image.fromURL(data, function (img) {
                        var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
                        canvas.add(oImg).renderAll();
                        var a = canvas.setActiveObject(oImg);
                        var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
                    });
                };
                reader.readAsDataURL(file);
            });
            document.querySelector('#txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();
                document.querySelector('#preview').src = canvas.toDataURL();
            };
           </script>         
</body>
</html>

你可以看到两件黑色和白色的T恤。您可以 select 点击后两件 T 恤的背景图片。

 var canvas = new fabric.Canvas('canvas');
            $("#canvascolor > input").click(function () {
                var img = $(this).attr('src');
                $('#canvas').css("background-image", "url(" + img + ")");
            });
            document.getElementById('file').addEventListener("change", function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                console.log("reader   " + reader);
                reader.onload = function (f) {
                    var data = f.target.result;
                    fabric.Image.fromURL(data, function (img) {
                        var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
                        canvas.add(oImg).renderAll();
                        var a = canvas.setActiveObject(oImg);
                        var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
                    });
                };
                reader.readAsDataURL(file);
            });
            document.querySelector('#txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();
                document.querySelector('#preview').src = canvas.toDataURL();
            };

 canvas{
                border: 1px solid black;
            }
            #canvascolor input {
                height:50px;
                width:50px;
            }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>

 <input type="file" id="file">
                    <canvas id="canvas" width="520" height="520"></canvas>
                    <section id="canvascolor">                      
                        <input  class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg">
                        <input  class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg">
                    </section>
                    <button href='' id='txt' target="_blank">submit</button>
                    <br />
                    <img id="preview" />

Answer 1

您正在将图像设置为您 <canvas> 元素的 background-image CSS 属性。

toDataURL() 方法只获取 canvas 的内容。适用于它的 css 规则不是其内容的一部分。

您可以使用 fabricjs.setBackgroundImage() 方法：

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 70,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>

<input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

单击来自 canvas HTML5 的按钮后，上传的图像显示为背景图像

Uploaded image display with background image after click on button from canvas HTML5

html

javascript

jquery

fabricjs