Canvas Image Crop

components.image-crop.js

import Ember from 'ember';
import { computed, observer } from '@ember/object';
import { on } from '@ember/object/evented';

export default Ember.Component.extend({
  tagName: 'canvas',
  attributeBindings: ['width', 'height'],
  width: 500,
  height: 300,
  
  scale: 0.35,
  click: false,
  baseX: 0,
  baseY: 0,
  lastPointX: 0,
  lastPointY: -140,
  // cutoutWidth: 300,
  // cutoutHeight: 300,
  
  isClicking: false,

  canvas: computed(function p () { return this.get('element'); }),
  
  canvasCtx: computed(function p () {
    return this.get('element').getContext('2d');
  }),

  _drawImage: on('didRender', observer('lastPointX', 'lastPointY', function o () {
    const image = new Image ();
    const canvas = this.get('canvas');
    const canvasCtx = this.get('canvasCtx');
    const x = this.get('lastPointX');
    const y = this.get('lastPointY');
    const scale = this.get('scale');
    const isClicking = this.get('isClicking');
    image.src = 'https://peopledotcom.files.wordpress.com/2018/08/beyonce-4.jpg';
    
    image.onload = function () {
      canvasCtx.imageSmoothingEnabled = false;   
      canvasCtx.drawImage(image, x, y, Math.floor(image.width * scale), Math.floor(image.height * scale));
    };
    
    // if (isClicking) {
      canvasCtx.canvas.onmousedown = function (e) {
        e.preventDefault();
        console.log(e);
        const scopedCanvas = canvasCtx.canvas;
        const box = scopedCanvas.getBoundingClientRect();
        const obj = {
         x: e.clientX - box.left * (canvas.width / box.width),
         y: e.clientY - box.top * (canvas.height / box.height),
        }

			  // const newX = x - args[0].clientX;
			  // const newY = y - args[0].clientY;
        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

        // This will put the left corner of the image at these coordinates - we need to
        // calculate it from where the user clicked down relative to the image.

        canvasCtx.drawImage(image, obj.x, obj.y, Math.floor(image.width * scale), Math.floor(image.height * scale));
      };
    // }
  })),
  
  _onMouseMove () {
    if (this.get('isClicking')) {
      
    }
  },
  
  mouseDown () {
    this.set('isClicking', true);
  },
  
  mouseUp () {
    this.set('isClicking', false);
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

styles.app.css

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
}

canvas {
  border: 1px solid silver;
}

templates.application.hbs

{{image-crop}}

templates.components.image-crop.hbs

hello

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}