如何在织物画布中使用背景图像获取绘图路径中的图像?
Posted
技术标签:
【中文标题】如何在织物画布中使用背景图像获取绘图路径中的图像?【英文标题】:how to get the image in drawing path with background image in fabric canvas? 【发布时间】:2017-03-20 08:48:23 【问题描述】:我想要织物帆布上的套索裁剪。 现在我可以在画布上绘制路径。 但我不知道如何用背景图像剪切路径。 有什么办法可以保存剪切的图像吗? 这是我的代码
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const img = document.createElement('IMG');
const base64data = canvas.toDataURL("image/jpeg")
img.onload = function()
const OwnCanv = new fabric.Canvas('c',
isDrawingMode: true
);
canvas.width = img.width;
canvas.height = img.height;
const imgInstance = new fabric.Image(img,
async: false,
left: 0,
top: 0,
lockMovementX: true,
lockMovementY: true
);
OwnCanv.add(imgInstance);
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 5
OwnCanv.on('path:created', function(option)
const path = option.path;
OwnCanv.isDrawingMode = false;
OwnCanv.remove(imgInstance);
OwnCanv.remove(path);
OwnCanv.clipTo = function(ctx)
path.render(ctx);
;
OwnCanv.add(imgInstance);
);
img.src = base64data
【问题讨论】:
【参考方案1】:你可以这样做:
OwnCanv.on('path:created', function(option)
var path = option.path;
imgInstance.clipTo = function(ctx)
//save context state
ctx.save();
//reset context tranformation matrix
ctx.setTransform(1,0,0,1,0,0);
//render the path
path.render(ctx);
//restore context state
ctx.restore();
;
OwnCanv.renderAll();
);
请看这里:https://jsfiddle.net/f82omjsr/
【讨论】:
以上是关于如何在织物画布中使用背景图像获取绘图路径中的图像?的主要内容,如果未能解决你的问题,请参考以下文章