Fabricjs drawImage alternative

Question

ich waren auf der Suche nach einem drawImage() Alternative für fabric.js lib, also habe ich ein function gemacht:

function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) { 
    return new fabric.Image(img, { 
    left: x, 
    top: y, 
    width: width, 
    height: height, 
    id: "rhino", 
    clipTo: function (ctx) { 
     ctx.rect(sx,sy,swidth,sheight); 
    } 
    }); 
} 
var imgElement = new Image(); 
imgElement.onload = function() { 
    var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104); 
    canvas.add(imgInstance); 
}; 
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg"; 

Das Ergebnis sein muss:

Aber ich don bekomme nichts mit meiner benutzerdefinierten Funktion. Wo ist das Problem?

Codepen:http://codepen.io/anon/pen/RaxRqZ

Answer 1

Ich weiß nicht wirklich, was Sie erreichen wollen, aber mit clipTo ist nicht mein Rat, sowohl aus Gründen der Leistung als auch der Komplexität. Zeichnen Sie auf einer temporären Leinwand den Teil des Bildes, den Sie benötigen, und verwenden Sie dann diese temporäre Leinwand als Quelle für Ihr fabricJS-Bild.

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

 
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) { 
 
     var tmpc = document.createElement('canvas'); 
 
     tmpc.width = swidth; 
 
     tmpc.height = sheight; 
 
     ctx = tmpc.getContext("2d"); 
 
     ctx.drawImage(img,-sx,-sy); 
 
     return new fabric.Image(tmpc, { 
 
     left: x, 
 
     top: y, 
 
     width: width, 
 
     height: height, 
 
     id: "rhino" 
 
     }); 
 
    } 
 
    var imgElement = new Image(); 
 
    imgElement.onload = function() { 
 
     var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104); 
 
     canvas.add(imgInstance); 
 
    }; 
 
    imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script> 
 
<canvas id="c" width="500", height="500"></canvas>

Answer 2

Hier finden Sie Lösung,

var canvas = ctx = ''; 
canvas = new fabric.Canvas('canvas'); 
canvas.selection = false; 
ctx = canvas.getContext('2d'); 

function drawImage(imgPath, x, y, width, height) 
{ 
    fabric.Image.fromURL(imgPath, function(img) { 
    img.set({ 
     left: x, 
     top: y, 
     width: width, 
     height: height, 
     id: "rhino", 
     clipTo: function (ctx) { 
     ctx.rect(5,5,50,50); 
     } 
    }); 
    canvas.add(img).renderAll().setActiveObject(img); 
    }); 
} 
var imgElement = new Image(); 
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg"; 
imgElement.onload = function() { 
    drawImage(imgElement.src, 50, 50, 100, 100); 
} 

https://codepen.io/mullainathan/pen/wGpzvY