如何将fabricjs画布图像保存在另一个背景图像上？答案

【问题标题】：How to save fabricjs canvas image on another background image?如何将fabricjs画布图像保存在另一个背景图像上？
【发布时间】：2016-10-06 13:43:13
【问题描述】：

我想将我的画布图像保存在另一个图像上。

$(document).on('click','#local-save', function(event) {    

var imgURL  = "assets/images/bg.png";

        canvas.overlayImage.filters = [];
        canvas.overlayImage.applyFilters();


        canvas.renderAll();

     window.open(canvas.toDataURL({
            format: 'png',
            multiplier: 2,
            left: 300,
            height: 500,
            width: 500
        }));
});

在这里我可以得到画布图像。但我想将它保存在背景图像上。这个怎么做？

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

使用您的数据 url 作为某事的背景属性..

    var dataurl = canvas.toDataURL({
        format: 'png',
        multiplier: 2,
        left: 300,
        height: 500,
        width: 500
    });
    someElement.style.background = "url("+dataurl+")";

【讨论】：

【解决方案2】：

运行 sn-p 并单击 click me 然后将画布转换为图像。我觉得这对你有帮助

var canvas = new fabric.Canvas('canvas');

canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg', 
    canvas.renderAll.bind(canvas),
    // here set the crossOrigin attribute
    {crossOrigin: 'anonymous'}
    );



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();
      canvas.setActiveObject(oImg);
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

<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>
<div class="col-sm-12">
  <div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong>
  </div>
  <input type="file" id="file">
  <br/>
  <canvas id="canvas" width="750" height="550" style="border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
  <a href='' id='txt' target="_blank">Click Me!!</a>
  <br />
  <img id="preview" />
</div>

【讨论】：

【解决方案3】：

我已经解决了我的问题如下。我的背景图片在另一个画布 ID MyID 下打开。我的正常画布 ID 是 canvas 。

    var MaskImg = canvas.toDataURL({
    format: 'png',
    multiplier: 2,
    left: 300,
    height: 400,
    width: 400
});

var c=document.getElementById("MyID");
var ctx=c.getContext("2d");

c.width = 1748;
c.height = 2481;
var imageObj1 = new Image();
var imageObj2 = new Image();

imageObj1.src = "assets/images/bg.png"

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, 1748, 2480);
    imageObj2.src = MaskImg;
    imageObj2.onload = function() {
       event.preventDefault();
       ctx.drawImage(imageObj2, (100, 100 , 400, 400);
       event.preventDefault();
                   var img = c.toDataURL({
                        format: 'png',
                   });

    window.open(img);

    }

};

【讨论】：