aico-image-editor/src/utilities/cropControls.js

Combine multiple image into and create single combined image

import fabric from "fabric";
import { getObjectControlImages } from "../getImages";


function renderIcon(icon, size, x, y) {
    return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(icon, x, y);
        ctx.restore();
      }
}

export function addCropRectangleControls(cropSelectionRect) {

    // top left
    fabric.Image.fromURL(getObjectControlImages().cropTopLeftImage,function(img, isError) {
        img.scaleToWidth(30);
        const cropTopLeftIconDataUrl = img.toDataURL();
        const cropTopLeftIcon = document.createElement('img');
        cropTopLeftIcon.src = cropTopLeftIconDataUrl;
        cropSelectionRect.cornerSize = 30;
        cropSelectionRect.controls.tl.render = renderIcon(cropTopLeftIcon, 20, 0 , 0)
        
    }, {crossOrigin: 'anonymous'});


    // top right
    fabric.Image.fromURL(getObjectControlImages().cropTopRightImage,function(img, isError) {
        img.scaleToWidth(30);
        const cropTopRightIconDataUrl = img.toDataURL();
        const cropTopRightIcon = document.createElement('img');
        
        cropTopRightIcon.src = cropTopRightIconDataUrl;
    
        cropSelectionRect.controls.tr.render = renderIcon(cropTopRightIcon, 20, -30 , 0)
        
    }, {crossOrigin: 'anonymous'});

    
    // bottom left 
    fabric.Image.fromURL(getObjectControlImages().cropBottomLeftImage,function(img, isError) {
        img.scaleToWidth(30);
        const cropBottomLeftIconDataUrl = img.toDataURL();
        const cropBottomLeftIcon = document.createElement('img');
        
        cropBottomLeftIcon.src = cropBottomLeftIconDataUrl;
    
        cropSelectionRect.controls.bl.render = renderIcon(cropBottomLeftIcon, 20, 0 , -30)
        
    }, {crossOrigin: 'anonymous'});


    // bottom right
    fabric.Image.fromURL(getObjectControlImages().cropBottomRightImage,function(img, isError) {
        img.scaleToWidth(30);
        const cropBottomRightIconDataUrl = img.toDataURL();
        const cropBottomRightIcon = document.createElement('img');
        
        cropBottomRightIcon.src = cropBottomRightIconDataUrl;
    
        cropSelectionRect.controls.br.render = renderIcon(cropBottomRightIcon, 20, -30 , -30)
        
    }, {crossOrigin: 'anonymous'});

    // middle left
    fabric.Image.fromURL(getObjectControlImages().cropMiddleLeftImage,function(img, isError) {
        img.scaleToHeight(40);
        const cropMiddleLeftIconDataUrl = img.toDataURL();
        const cropMiddleLeftIcon = document.createElement('img');
        
        cropMiddleLeftIcon.src = cropMiddleLeftIconDataUrl;
    
        cropSelectionRect.controls.ml.render = renderIcon(cropMiddleLeftIcon, 20, -1 , -20)
        
    }, {crossOrigin: 'anonymous'});


    // middle right
    fabric.Image.fromURL(getObjectControlImages().cropMiddleLeftImage,function(img, isError) {
        img.scaleToHeight(40);
        const cropMiddleRightIconDataUrl = img.toDataURL();
        const cropMiddleRightIcon = document.createElement('img');
        
        cropMiddleRightIcon.src = cropMiddleRightIconDataUrl;
    
        cropSelectionRect.controls.mr.render = renderIcon(cropMiddleRightIcon, 20, -1 , -20)
        
    }, {crossOrigin: 'anonymous'});


     // middle top
     fabric.Image.fromURL(getObjectControlImages().cropMiddleTopImage,function(img, isError) {
        img.scaleToWidth(40);
        const cropMiddleTopIconDataUrl = img.toDataURL();
        const cropMiddleTopIcon = document.createElement('img');
        
        cropMiddleTopIcon.src = cropMiddleTopIconDataUrl;
    
        cropSelectionRect.controls.mt.render = renderIcon(cropMiddleTopIcon, 20, -20 , -1)
        
    }, {crossOrigin: 'anonymous'});
    
    // middle bottom
     fabric.Image.fromURL(getObjectControlImages().cropMiddleTopImage,function(img, isError) {
        img.scaleToWidth(40);
        const cropMiddleBottomIconDataUrl = img.toDataURL();
        const cropMiddleBottomIcon = document.createElement('img');
        
        cropMiddleBottomIcon.src = cropMiddleBottomIconDataUrl;
    
        cropSelectionRect.controls.mb.render = renderIcon(cropMiddleBottomIcon, 20, -20 , -1)
        
    }, {crossOrigin: 'anonymous'});


   
}