Блог

В моем 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"})
}
 

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

Как я могу это сделать??

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

Чтобы сохранить обрезанную область, вы должны использовать холст.Как вы можете видеть, в методе toDataURL() есть параметры 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"})
}