#javascript #canvas #fabricjs
#javascript #холст #fabricjs
Вопрос:
В моем 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"})
}
Здесь я могу легко обрезать холст с заданными левым, верхним, шириной и высотой, но я получаю тот же холст с обрезанной обрезанной частью и удаленной частью другого цвета. Но после обрезки я хочу, чтобы обрезанная часть закрашивала холст или устанавливала обрезанную часть в качестве фона.
Как я могу это сделать??
Ответ №1:
На самом деле вы обрезали рендеринг холста.
Чтобы сохранить обрезанную область, вы должны использовать холст.Как вы можете видеть, в методе 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"})
}