Image Drop

Drag and drop images onto the canvas to load them
当前为 2020-06-02 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Image Drop
// @version      1
// @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==

(function() {
    'use strict';
    document.querySelector("body > div.game > div.gameParent > div.gameHeader").remove();
    document.querySelector("body > div.game > div.gameParent").style.marginTop = "20px";

    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);

    function handleDrop(e) {
        e.preventDefault();
        sketchCanvas.style.filter = "";
        let dt = e.dataTransfer;
        let files = dt.files;

        if (files.length && files !== null) {
            handleFiles(files)
        }
    }

    function handleFiles(files) {
        files = [...files];
        files.forEach(previewFile);
        files.forEach(previewFile); // Doesn't work unless I do this terribleness
    }

    function previewFile(file) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
            let img = document.createElement('img');
            img.src = reader.result;
            loadImage(img);
        }
    }

    function loadImage(img) {
        if (img.height && img !== null && sketchCanvas.height) {
            let 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
            let startX = Math.floor(sketchCanvas.width/2 - img.width/2);

            sketchCtx.drawImage(img, startX, 0, img.width, img.height);
        }
    }

    function highlight(e) {
        e.preventDefault();
        sketchCanvas.style.filter = "brightness(0.5)";
    }

    function unhighlight(e) {
        e.preventDefault();
        sketchCanvas.style.filter = "";
    }
})();