Drag and drop images onto the canvas to load them
// ==UserScript==
// @name Image Drop
// @version 1.2
// @description Drag and drop images onto the canvas to load them
// @author Bell
// @namespace https://greasyfork.org/users/281093
// @match https://sketchful.io/
// @grant none
// jshint esversion: 6
// ==/UserScript==
document.querySelector('#private').style.display = 'inline';
const sketchCanvas = document.querySelector('#canvas');
const sketchCtx = sketchCanvas.getContext('2d');
sketchCanvas.addEventListener('dragenter', highlight, false);
sketchCanvas.addEventListener('dragleave', unhighlight, false);
sketchCanvas.addEventListener('drop', handleDrop, false);
sketchCanvas.addEventListener('dragover', function(event) {
event.preventDefault();
}, false);
sketchCanvas.save = () => {
canvas.dispatchEvent(new MouseEvent('pointerup', {
bubbles: true,
clientX: 0,
clientY: 0,
button: 0
}));
};
function handleDrop(e) {
e.preventDefault();
sketchCanvas.style.filter = '';
const dt = e.dataTransfer;
const files = dt.files;
if (files.length && files !== null) {
handleFiles(files);
}
}
function handleFiles(files) {
([...files]).forEach(previewFile);
}
function previewFile(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
const img = document.createElement('img');
img.src = reader.result;
img.onload = () => { loadImage(img); };
};
}
function loadImage(img) {
if (img.height && img !== null && sketchCanvas.height) {
const heightRatio = img.height / sketchCanvas.height;
// Scale the image to fit the canvas
if (heightRatio && heightRatio != 1) {
img.height /= heightRatio;
img.width /= heightRatio;
}
// Center the image
const startX = Math.floor(sketchCanvas.width / 2 - img.width / 2);
sketchCtx.drawImage(img, startX, 0, img.width, img.height);
sketchCanvas.save();
}
}
function highlight(e) {
e.preventDefault();
sketchCanvas.style.filter = 'brightness(0.5)';
}
function unhighlight(e) {
e.preventDefault();
sketchCanvas.style.filter = '';
}