应用时的 Fabric JS 色调过滤器会调整图像 Ember 项目的大小

如何解决应用时的 Fabric JS 色调过滤器会调整图像 Ember 项目的大小

我在 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;
  }

当我在 Fabric 画布上选择图像以更改颜色时，当应用“色调”时，图像会针对模型提供的图像调整大小。下面的关键部分。

  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,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,opacity: 1
    });
    this.canvasToDecorate.add(imgInstance);
  }

解决方法

这是一个图像 COR 问题，Fabric 确实具有加载图像的功能，而忽略图像 CORS，但我在服务中存储/更新的 Fabric 画布实例对 Fabric 回调函数不可用。

车把组件

<img src="" alt="Carousel Image..." id="carousel-image" {{on "load" this.addImageToFabric}} hidden>

组件类

  @action
  addImageTemplateToCanvas(event) {
    let preview = document.getElementById('carousel-image');
    var img = document.getElementById(event.target.id);

    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");

      c.width = img.naturalWidth;     // update canvas size to match image
      c.height = img.naturalHeight;
      ctx.drawImage(img,0);       // draw in image
      c.toBlob(function(blob) {        // get content as JPEG or PNG blob
        // here the image is a blob
        preview.src = URL.createObjectURL(blob);
      },"image/png",0.75);
  }    
      @action
      addImageToFabric() {
        let preview = document.getElementById('carousel-image');
        var imgInstance = new fabric.Image(preview,{
          left: 100,top: 100,angle: 0,opacity: 1
        });
        this.canvasToDecorate.add(imgInstance);
      }