ImageEditor

ImageEditor.carbide.md

ImageEditor

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "whatwg-fetch";

class ImageEditor extends React.Component {
	static defaultProps = {
    	width: 300,
        height: 300,
    }
    
    state = {
        zoom: 1,
        offset: {x: 0, y: 0},
        dragged: false,
        dragStart: null,
        canvas: null,
        ctx: null
    }
    
    componentDidMount() {
        this.setupCanvas();
    }

    setupCanvas = () => {
    	const {image} = this.props;
        const img = new Image();
        const canvas = this.refs.canvas;
        const ctx = canvas.getContext("2d");
        
        img.onload = () => {
            this.setState({img, ctx}, () => this.updateCanvas());
        };
        img.src = image;
    }
    
    updateCanvas = () => {
        const {width, height} = this.props;
        const {zoom, offset, img, ctx, canvas} = this.state;
        
        if (!ctx || !canvas) return

        this.renderCanvas();
    }
    
    renderCanvas = (canvas, ctx, img, zoom, offset) => {
    	const imageAspectRatio = image.width / image.height;
        const canvasAspectRatio = canvas.width / canvas.heith
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);    
    }
    
    handleZoom = (direction) => {}
    
    render () {
        const {width, height} = this.props;
        
        return (
        	<div>
            	<canvas
                    ref="canvas"
                    width={width}
                    height={height}
                />
            </div>
        )
    }
}

ReactDOM.render(
    <ImageEditor image={"http://www.highreshdwallpapers.com/wp-content/uploads/2013/12/Cool-Cat-1280x960.jpg"} />,
    document.getElementById("root")
);