vinyll / pictup

Drag and drop an image to replace one in a webpage.

Pictup.js, drap and drop an image to replace it

Drag an image from your desktop. Drop in on another image in a website. Boom, it's replaced! 8th Wonder of the world!

Let's show off with the demo!

Installation

Add Pictup to your scripts:

<script>https://cdn.rawgit.com/vinyll/anywhere/master/dist/anywhere.js</script>

Usage

Load Pictup on an image DOM:

<img src="/my/default/image.png" />

<script>
  var img = document.querySelector('img');
  new Pictup(img);
</script>

Now open you favorite browser and drag an image from your desktop onto the displayed image.

Configuration

These options are available:

• resize: should the image be resized? defaults to true
• replace: should the dropped image replace the existing image? defaults to true
• maxwidth: if resized, what is the maimum width?
• maxheight: if resized, what is the maimum height?

Events

• ready: triggered when the image is loaded and resized (if applicable)