Question

https://jsfiddle.net/YangChueng/sywh55Ls/

的Javascript

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
    loadImage('http://i.stack.imgur.com/sdCd3.png');

    var $a = document.getElementById('add');
    $a.onclick = function(e){
        var $img = document.getElementById('target');
        loadImage($img.src);
    };

    function loadImage(url){
        fabric.Image.fromURL(url, function(img) {
        img.scale(0.5).set({
            left:100,
            top:100
        })
        canvas.add(img).setActiveObject(img);
   });
   }
})();

当我点击按钮时，如何将添加的图像应用到现有的png图像中？我可以限制png中添加的图像吗？

Answer 1

我认为您需要在布料对象中添加图案。

请查看我创建两个结构对象的示例，并在每个结构上添加一个图像。

var circle = new fabric.Circle({
                  radius: 60, 
                  fill: 'red', 
                  left: 50, 
                  top: 100
                });
            canvas.add(circle);
addPattern(circle);

//create square object
var square = new fabric.Rect({
              left: 180, 
              top: 140,
              fill: 'green',
              width: 140,
              height: 180
            });
            canvas.add(square);
addPattern(square);


function addPattern(obj){
  fabric.util.loadImage('http://fabricjs.com/assets/pug_small.jpg', function (img) {

                obj.fill = new fabric.Pattern({
                    source: img,
                    repeat: 'no-repeat'
                }); 
                canvas.renderAll();
    });
}

jsfiddle：https://jsfiddle.net/tornado1979/t6vf5z5w/

Answer 2

您可以使用 globalCompositeOperation to source-atop

设置相框功能

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs.com/assets/2.svg', function(img){
  img1 = img;
  fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img){
    img1.scaleToWidth(canvas.getWidth());
    img2 = img;
    img2.scaleToHeight(300);
    img2.left = 50;
    img2.top = 50;
    img2.globalCompositeOperation = 'source-atop';
    canvas.add(img1);
    canvas.add(img2);
  });
});

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

如何使用fabricjs实现相框？

2 个答案: