fabricjs set обрезанный объект в качестве фона для холста после обрезки

Question

В моем fabricjs я делаю холст и добавляю изображение к нему и устанавливая изображение в качестве фона. и затем я обрезаю кавы до некоторой ширины и высоты.

После того как я клип холст, я хочу новый холст или же холст с подрезанной областью в качестве фона все покрывающее полотно с шириной и высотой или может сделать новый холст с высотой обрезанной области и ширином

В настоящее время я делаю это ..

function crop(url, name, left, top, width, height, callback) { 
    var c = document.createElement('canvas') 
    var id = "canvas_" + name 
    c.id = id 
    var canvas = new fabric.Canvas(id) 

    fabric.Image.fromURL(url, function(oImg) { 

     oImg.set({ 
      selectable:false, 
     }) 
     canvas.setDimensions({width:oImg.width, height:oImg.height}) 
     canvas.add(oImg) 
     canvas.clipTo = function (ctx) { 
      ctx.rect(left, top, width, height) 
      console.log(ctx) 
     }; 
     canvas.centerObject(oImg) 
     canvas.renderAll() 
     var img = canvas.toDataURL('image/png') 
     console.log(img) 
     callback(img) 
    }, {crossOrigin: "Anonymous"}) 
} 

Здесь я могу easyly клипа холста с моим заданными слева, сверху, шириной и высотой, но я получаю тот же холст с подстриженной подрезанной частью и удалить часть с другим цветом. Но после отсечения я хочу, чтобы обрезанная часть закрасила холст или установила обрезанную часть в качестве фона.

Как это сделать?

Answer 1

На самом деле вы обрезали рендеринг холста.

Чтобы сохранить обрезанную область, которую вы должны использовать Canvas.toDataURL() method, как вы можете видеть, что параметры top, left, width, height просто использовать так же, как вы положили в ctx.rect(left, top, width, height) и он будет возвращает вас строка, представляющая область кадрирования (закодированные base64).

Затем использовать эту строку в качестве холста нового фонового изображения с Canvas.setBackgrounsImage

Вашего кодом должен выглядеть следующим образом:

function crop(url, name, left, top, width, height, callback) { 
    var c = document.createElement('canvas') 
    var id = "canvas_" + name 
    c.id = id 
    var canvas = new fabric.Canvas(id) 

    fabric.Image.fromURL(url, function(oImg) { 

     oImg.set({ 
      selectable:false, 
     }) 
     canvas.setDimensions({width:oImg.width, height:oImg.height}) 
     canvas.add(oImg) 
     canvas.centerObject(oImg) 
     canvas.renderAll() 
     var img = canvas.toDataURL({ 
         format: 'image/png', 
         left: left, 
         right: right, 
         width: width, 
         height: height 
        }) 
     console.log(img) 
     canvas.setBackgroundImage(img) 
     callback(img) 
    }, {crossOrigin: "Anonymous"}) 
}