Fabric JS 色调过滤器在应用时调整图像 Ember 项目

Question

我在 Emberjs 项目中实现了 Fabric，对放置的图像进行着色会导致图像在较大的标记中减少。 **更新，这可能是一个 CORS 问题，因为添加用户图像可以着色并正确保持其尺寸。

组件把手

<div id="select-image-dimensions" class="placeholder canvas-size" {{did-insert this.renderWallCanvas}}>
</div>

组件javascript

import Component from '@glimmer/component';
import ENV from '../config/environment';
import AWS from 'aws-sdk';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { fabric } from 'fabric';
import Picker from 'vanilla-picker';

export default class WallToDecorateComponent extends Component {
  @service('captured-image') capturedImage;
  @tracked canvasToDecorate = null;
  @tracked isDown = false;
  @tracked currentColor = null;

  @action
  renderWallCanvas() {
    var canvasAspect, imgAspectLandscape, imgAspectPortrait, left, top, scaleFactor, rect;
    let elemSize = document.querySelector('#select-image-dimensions');

    if(elemSize) {
      rect = elemSize.getBoundingClientRect();
      var canvas = document.createElement('canvas');
      canvas.id = 'fabric-canvas-to-decorate';
      canvas.width = rect.width;
      canvas.height = rect.height;
      elemSize.appendChild(canvas);
    }
    canvasAspect = rect.width / rect.height;
    imgAspectLandscape = this.capturedImage.wallImage.width / this.capturedImage.wallImage.height;
    imgAspectPortrait =  this.capturedImage.wallImage.height / this.capturedImage.wallImage.width;

    if (this.capturedImage.wallImage.width > this.capturedImage.wallImage.height) {

      if (canvasAspect >= imgAspectLandscape) {
          scaleFactor = rect.width / this.capturedImage.wallImage.width;
          left = 0;
          top = -((this.capturedImage.wallImage.height * scaleFactor) - rect.height) / 2;
      } else {
          scaleFactor = rect.height / this.capturedImage.wallImage.height;
          top = 0;
          left = -((this.capturedImage.wallImage.width * scaleFactor) - rect.width) / 2;
      }
    } else {

      if (canvasAspect >= imgAspectPortrait) {
          scaleFactor = rect.height / this.capturedImage.wallImage.height;
          left = -((this.capturedImage.wallImage.width * scaleFactor) - rect.width) / 2;
          top = -((this.capturedImage.wallImage.height * scaleFactor) - rect.height) / 2;
      } else {
          scaleFactor = rect.width / this.capturedImage.wallImage.width;
          top = 0;
          left = -((this.capturedImage.wallImage.width * scaleFactor) - rect.width) / 2;
      }
    }

    var canvas = new fabric.Canvas('fabric-canvas-to-decorate');
    canvas.setBackgroundImage(this.capturedImage.wallImage.src, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 1,
        backgroundImageStretch: false,

        top: top,
        left: left,
        originX: 'left',
        originY: 'top',
        scaleX: scaleFactor,
        scaleY: scaleFactor
    });
    this.canvasToDecorate = canvas;
  }

  @action
  addImageTemplateToCanvas(event) {
    let targetElement = document.getElementById(event.target.id);
    var imgInstance = new fabric.Image(targetElement, {
      left: 100,
      top: 100,
      angle: 0,
      opacity: 1
    });
    this.canvasToDecorate.add(imgInstance);
  }

...    
  @action
  setColor() {
    if (!this.canvasToDecorate.getActiveObject()) {
      return;
    }

    var canvas2dBackend = new fabric.Canvas2dFilterBackend()
    fabric.filterBackend = canvas2dBackend;
    fabric.filterBackend = fabric.initFilterBackend();

    var colorButton = document.querySelector('#select-color');
    var obj = this.canvasToDecorate.getActiveObject();

    var filter = new fabric.Image.filters.BlendColor({
      color: colorButton.style.background,
      mode: 'tint',
      alpha: 0.5
    });

    obj.filters[16] = filter;
    obj.applyFilters();
    this.canvasToDecorate.renderAll();
  }

  @action
  selectColor() {
    var parent = document.querySelector('#select-color');
    var picker = new Picker(parent);

    picker.onDone = function(color) {
      parent.style.background = color.rgbaString;
    };
    this.currentColor = parent.style.background;
  }

当我 select 织物上的图像 canvas 更改颜色时，当应用 'Tint' 时，图像会根据模型提供的图像调整大小。下面的关键部分。

  setColor() {
    if (!this.canvasToDecorate.getActiveObject()) {
      return;
    }

    var canvas2dBackend = new fabric.Canvas2dFilterBackend()
    fabric.filterBackend = canvas2dBackend;
    fabric.filterBackend = fabric.initFilterBackend();

    var colorButton = document.querySelector('#select-color');
    var obj = this.canvasToDecorate.getActiveObject();

    var filter = new fabric.Image.filters.BlendColor({
      color: colorButton.style.background,
      mode: 'tint',
      alpha: 0.5
    });

    obj.filters[16] = filter;
    obj.applyFilters();
    this.canvasToDecorate.renderAll();

图片的轮廓不会改变大小，但实际图片会改变，除了用户提供的图片，

  @action
  addUserImageFile(){
    let preview = document.getElementById('imageToUpload');
    let file = document.getElementById('image-file-upload').files[0];
    const reader = new FileReader();

    if (file.size > 5242880 || !file.name.match(/.(jpg|jpeg|png|gif)$/i)) {
        return alert("The file must be an image (jpg|jpeg|png|gif) and less than " + (5242880/1024/1024) + "MB");
    } else {
      reader.addEventListener("load", function () {
        // convert image file to base64 string
        preview.src = reader.result;

      }, false);

      if (file) {
        reader.readAsDataURL(file);
      }
    }
  }

  @action
  async addImageCanvas() {
    let preview = document.getElementById('imageToUpload')
    var imgInstance = new fabric.Image(preview, {
      left: 100,
      top: 100,
      angle: 0,
      opacity: 1
    });
    this.canvasToDecorate.add(imgInstance);
  }

Answer 1

这是一个图像 COR 问题，Fabric 确实具有忽略图像 CORS 加载图像的功能，在我的例子中，必须为持有结构 canvas 的服务分配回调变量 canvas找到它。

  @action
  addImageTemplateToCanvas(event) {

    var canvas = <what ever your fabric canvas variable is, my case its a service>;

    fabric.util.loadImage(event.target.src,
        function (img) {
           var fab_image = new fabric.Image(img);
           canvas.add(fab_image);
           canvas.renderAll();
        },{left:100, top:100, angle: 0, opacity: 1});
  }

Fabric JS 色调过滤器在应用时调整图像 Ember 项目

Fabric JS Tint Filter when applied resizes image Ember project

fabricjs

ember.js