Scribd Logo
Upload

Welcome to Scribd!

  • 497 views

    Paste Tool

    Uploaded by

    Poyraz Özsoy
    This document defines a paste tool for an online pixel art editor. The tool allows users to paste an image by: 1) Creating a file input when the mouse button is pressed 2) Loading the selected image into a canvas 3) Getting the image data from the canvas and passing it to a paste function along with the mouse position 4) The paste function then adds pixels from the image data to the drawing queue to paste the image onto the canvas at the given position.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Paste Tool

    Uploaded by

    Poyraz Özsoy
    497 views1 page
    This document defines a paste tool for an online pixel art editor. The tool allows users to paste an image by: 1) Creating a file input when the mouse button is pressed 2) Loading the selected image into a canvas 3) Getting the image data from the canvas and passing it to a paste function along with the mouse position 4) The paste function then adds pixels from the image data to the drawing queue to paste the image onto the canvas at the given position.

    Original Description:

    Perfect past tool for (y)ourowordofpixels.com

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document defines a paste tool for an online pixel art editor. The tool allows users to paste an image by: 1) Creating a file input when the mouse button is pressed 2) Loading the selected image into a canvas 3) Getting the image data from the canvas and passing it to a paste function along with the mouse position 4) The paste function then adds pixels from the image data to the drawing queue to paste the image onto the canvas at the given position.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    497 views1 page

    Paste Tool

    Uploaded by

    Poyraz Özsoy
    This document defines a paste tool for an online pixel art editor. The tool allows users to paste an image by: 1) Creating a file input when the mouse button is pressed 2) Loading the selected image into a canvas 3) Getting the image data from the canvas and passing it to a paste function along with the mouse position 4) The paste function then adds pixels from the image data to the drawing queue to paste the image onto the canvas at the given position.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 1

    OWOP.tool.addToolObject(new OWOP.tool.class('paste', OWOP.cursors.

    paste,
    OWOP.fx.player.RECT_SELECT_ALIGNED(1), false, function(tool){
    tool.setEvent('mousedown', (mouse, event) => {
    if(event.button === 1) return;
    let fileinp = document.createElement('input');
    fileinp.type = 'file';
    fileinp.accept = 'image/*';
    fileinp.click();
    let c = document.createElement('canvas');
    let ctx = c.getContext('2d');
    fileinp.addEventListener('change', () => {
    if(fileinp.files.length === 0) return;
    const file = fileinp.files[0];
    let img = new Image;
    img.onload = () => {
    c.height = img.height;
    c.width = img.width ;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, img.width, img.height);
    ctx.drawImage(img, 0, 0);
    paste(ctx.getImageData(0, 0, img.width, img.height), [mouse.tileX,
    mouse.tileY]);
    URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(file);
    });
    });
    let paste = (imgdata, pos) => {
    for(let y = 0; y < imgdata.height; ++y){
    for(let x = 0; x < imgdata.width; ++x){
    const idx = (x + y*imgdata.width) << 2;
    const color = [
    imgdata.data[idx],
    imgdata.data[idx+1],
    imgdata.data[idx+2]
    ];
    pixqueue.unshift({pos: [x+pos[0], y+pos[1]], color: color});
    }
    }
    };
    }));

    You might also like