![](/img/trans.png)
[英]How do I properly transform entire canvas in fabric.js / change fabric's origin?
[英]Fabric.js: How to apply filter to entire canvas?
虽然我已经看到了几种将滤镜应用于图像的方法,但是我还没有看到将织物滤镜应用于整个画布的任何方法。
来自http://fabricjs.com/fabric-intro-part-2/的图像过滤器功能示例
fabric.Image.fromURL('pug.jpg', function(img) {
// add filter
img.filters.push(new fabric.Image.filters.Grayscale());
// apply filters and re-render canvas when done
img.applyFilters(canvas.renderAll.bind(canvas));
// add image onto canvas
canvas.add(img);
});
我想传入整个canvas元素和其中的所有形状,并将过滤器应用于所有对象。
我是否需要展平画布,将其转换为图像,然后应用滤镜? 用户可以在展平并应用后进行更改,必须将画布解耦回“图层”,以便用户可以继续编辑。
Docs for GreyScale过滤器。 http://fabricjs.com/docs/symbols/fabric.Image.filters.Grayscale.html
最终不得不将画布转换为图像,然后从html中的隐藏图像中添加了画布。
<img class="test-image" src="" style="display:none;" />
<img class="test-image" src="" style="display:none;" />
在标记中
var addFilterToCanvas = function (name) {
// remove controls on filter click, have to do it before it creates the image to
// get rid of shape controls
canvas.deactivateAll()
var overlayImageUrl = canvas.toDataURL('png');
$('.test-image').attr('src', overlayImageUrl);
var filterImageUrl = $('.test-image').attr('src');
fabric.Image.fromURL(filterImageUrl, function(img) {
// add filter
switch (name) {
case 'Grayscale':
img.filters.push(new fabric.Image.filters.Grayscale());
break;
case 'Sepia':
img.filters.push(new fabric.Image.filters.Sepia());
break;
case 'Sepia2':
img.filters.push(new fabric.Image.filters.Sepia2());
break;
case 'Invert':
img.filters.push(new fabric.Image.filters.Invert());
break;
}
// apply filters and re-render canvas when done
img.applyFilters(canvas.renderAll.bind(canvas));
// center image
img.top = canvas.getHeight() / 2;
img.left = canvas.getWidth() / 2;
// add image onto canvas
canvas.add(img);
});
// remove controls on after filter applied to get rid of
// new image resize controls
canvas.deactivateAll().renderAll();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.