FabricJs使用 -- 图片

图片

使用 fabric.Image 可以方便的对图片做一些处理。

举例

var imgElement = document.getElementById('dog');
var imgInstance = new fabric.Image(imgElement, {
                left: 50,
                top: 50,
                angle: 10,
                opacity: 0.85
            });
canvas.add(imgInstance);

对图片做放大缩小和X方向翻转

fabric.Image.fromURL('dog.png', function(oImg) {
    // scale image down, and flip it, before adding it onto canvas
    oImg.scale(0.5).set('flipX', true);
    canvas.add(oImg);
 });

图片滤镜

  fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
    img.filters.push(new fabric.Image.filters.Grayscale());
    img.applyFilters();
    canvas.add(img);
}, {crossOrigin: 'anonymous'});

需要考虑一个 crossOrigin的问题

给滤镜加多个参数

fabric.Image.fromURL('https://i.loli.net/2020/10/11/uI4qfivbyAKsOQ9.png', (img) => {
       img.filters.push(new fabric.Image.filters.Sepia());
       new fabric.Image.filters.Brightness({ brightness: 100 });
       img.applyFilters();
       canvas.add(img);
   }, {crossOrigin: 'anonymous'});

参考

1. 官网地址

联系我

关注微信号:大前端说，获取文章中提到的代码案例。库使用过程有什么问题，可以跟我沟通，加我的wx:meetbc。欢迎交流关于前端的任何话题。