The picture

Fabric. Image makes it easy to manipulate images.

For example,

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

Zoom in and out and flip the image in the X direction

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);
 });
Copy the code

Image filter

  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'});
Copy the code

There is a crossOrigin problem to consider

Add multiple parameters to the filter


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'});

Copy the code

reference

  1. The website address

To contact me

Pay attention to wechat: big front-end said, to obtain the code case mentioned in the article. If you have any problem with the library, please contact me and add my WX: MeetBC. Any topic about the front end is welcome.