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

How to save fabricjs canvas image on another background image?

本文关键字：图像 保存 存在 另一个 背景 fabricjs 布图像      更新时间：2023-09-26

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

$(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
        }));
});

在这里我可以得到canvas image。但我想把它保存在背景图像上。如何做到这一点?

使用data url作为某事的背景属性

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

运行代码片段并点击点击我然后将画布转换为图像。我想这对你有帮助。

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>

我已经解决了我的问题如下。我的背景图像在另一个画布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);
    }
};
相关文章：