untitled

untitled.carbide.md

undefined

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

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

ImageEditor.js

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

class ImageEditor extends React.Component { ///Define new 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) => {
    	ctx.clearRect(0, 0, canvas.width, canvas.height)
    }
    
    handleZoom = (direction) => {}
    
    render () {
        const {width, height} = this.props;
        
        return (
        	<div>
            	<canvas
                    ref="canvas"
                    width={width}
                    height={height}
                />
            </div>
        )
    }
}

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

render();

export function __render() {
    render();
}