ReactJS: Preview Image

This entry is part 22 of 35 in the series React JS

See the Pen React Image Preview & Upload by Brian Emil Hartz (@hartzis) on CodePen.0

class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: '',imagePreviewUrl: ''};
  }

  _handleSubmit(e) {
    e.preventDefault();
    // TODO: do something with -> this.state.file
    console.log('handle uploading-', this.state.file);
  }

  _handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)
  }

  render() {
    let {imagePreviewUrl} = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} />);
    } else {
      $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
    }

    return (
      <div className="previewComponent">
        <form onSubmit={(e)=>this._handleSubmit(e)}>
          <input className="fileInput" 
            type="file" 
            onChange={(e)=>this._handleImageChange(e)} />
          <button className="submitButton" 
            type="submit" 
            onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
        </form>
        <div className="imgPreview">
          {$imagePreview}
        </div>
      </div>
    )
  }
}
  
ReactDOM.render(<ImageUpload/>, document.getElementById("mainApp"));

iOS: First App from Apple

This entry is part 3 of 33 in the series iOS Apps

A video by Apple on how to build an iOS app in Swift language from scratch, in less than ten minutes.

Below is the source code and I am using the latest version of Swift.

import UIKit

class ViewController: UIViewController {

    @IBOutlet var photoImageView: UIImageView!
    
    let context = CIContext(options: nil)
    
    
    @IBAction func appFilter(sender: AnyObject) {
        
        let inputImage = CIImage(image: photoImageView.image!)
        
        let randomColor = [kCIInputAngleKey: (Double(arc4random_uniform(314))/100)]
        
        let filteredImage = inputImage?.imageByApplyingFilter("CIHueAdjust", withInputParameters: randomColor)
        
        let renderedImage = context.createCGImage(filteredImage!, fromRect: filteredImage!.extent)
        
        photoImageView.image = UIImage(CGImage: renderedImage)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

 

jQuery: Check if an image is loaded successfully

An easy method to check if an image is loaded successfully using the load function.

You can edit the image source path to generate a loading image error.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Check image load</title>      
        <script>
            $(function () {
                $('img').load(function () {
                    $('p').html('image loaded successfully')
                });
            })
        </script>
    </head>
    <body>
        <img src='https://codecrawl.com/code/images/drawing.png'>
        <p>Loading image.....</p>
    </body>
</html>

button

JavaFX: Blending of 2 images

Blending of 2 images.

If you look at line 36, we are using the difference mode:

top.setBlendMode(BlendMode.DIFFERENCE);

The DIFFERENCE mode is defined as: The darker of the color components from the two inputs are subtracted from the lighter ones to produce the resulting color.

So in the screenshot below, the image in the middle is the blended image.

package pepsichallenge;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
 * Blend a coke can and a pepsi can to find the difference.
 */
public class PepsiChallenge extends Application {

    @Override
    public void start(Stage stage) {
        Image coke = new Image(
                "http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Coca-Cola-Can-icon.png"
        );

        Image pepsi = new Image(
                "http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Pepsi-Can-icon.png"
        );

        ImageView bottom = new ImageView(coke);
        ImageView top = new ImageView(pepsi);
        top.setBlendMode(BlendMode.DIFFERENCE);

        Group blend = new Group(
                bottom,
                top
        );

        HBox layout = new HBox(10);
        layout.getChildren().addAll(
                new ImageView(coke),
                blend,
                new ImageView(pepsi)
        );
        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

pepsi

HTML5 Canvas: Using an image to fill the canvas background

This entry is part 17 of 17 in the series HTML5 Canvas

The canvas API provides a way for us to fill the background with an image.

Using the createPattern method, you canĀ use an image to fill the background of a shape.

Syntax:

Context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Image in canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function createImagePattern() {
        var pattern = canvas.createPattern(canvasImage, 'repeat');
        canvas.rect(0, 0, 640, 480);
        canvas.fillStyle = pattern;
        canvas.fill();
    }
        canvasImage.addEventListener('load',createImagePattern,false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia1.jpg';
</script>
</body>
</html>

The repeat parameter can have the following values:

  • repeat: Repeats the pattern horizontally and vertically
  • repeat-x: Repeats the pattern horizontally
  • repeat-y: Repeats the pattern vertically
  • no-repeat: Does not repeat the pattern