diff --git a/changelog.html b/changelog.html index 07008190..2b670327 100644 --- a/changelog.html +++ b/changelog.html @@ -113,6 +113,7 @@
  • + Place it on the canvas at any scale
  • + Choose its element or disable smoothing in Settings
  • + Burn it, blow it up, or make it a powder!
  • +
  • + Paste or Drag-and-Drop images!
  • [Stay tuned for bigger updates in the coming months!]
  • [Bug Fixes]
  • ~ Fixed: Old browsers that don't support ECMAScript 2016 crash
  • diff --git a/changelog.txt b/changelog.txt index ff3e971f..f5951614 100644 --- a/changelog.txt +++ b/changelog.txt @@ -14,6 +14,7 @@ A fancier version of this changelog can be found here: https://sandboxels.r74n.c + Place it on the canvas at any scale + Choose its element or disable smoothing in Settings + Burn it, blow it up, or make it a powder! + + Paste or Drag-and-Drop images! [Bug Fixes] ~ Fixed: Old browsers that don't support ECMAScript 2016 crash Stay tuned for bigger updates in the coming months! diff --git a/controls.html b/controls.html index 49ec034e..cceda08f 100644 --- a/controls.html +++ b/controls.html @@ -101,6 +101,7 @@ Smooth view (Low performance) 4 Toggle GUI F1 Capture screenshot C or F2 + Paste Image Ctrl + V or Drag and Drop

    Button Info

    diff --git a/index.html b/index.html index f3eac500..e523782f 100644 --- a/index.html +++ b/index.html @@ -10692,48 +10692,7 @@ } if ((e.button === 0 || e.touches) && placingImage) { if (e.touches) { mouseMove(e); } - // downscale the placingImage.height) { - canvas.width = mouseSize; - canvas.height = Math.round(placingImage.height/placingImage.width*mouseSize); - } - else { - canvas.height = mouseSize; - canvas.width = Math.round(placingImage.width/placingImage.height*mouseSize); - } - var newWidth = canvas.width; - var newHeight = canvas.height; - var ctx = canvas.getContext("2d"); - if (settings.imagesmooth === 0) { - ctx.webkitImageSmoothingEnabled = false; - ctx.mozImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - } - ctx.drawImage(placingImage,0,0,newWidth,newHeight); - var newImage = ctx.getImageData(0,0,newWidth,newHeight); - // loop through each pixel in the ImageData - for (var x = 0; x < newWidth; x++) { - for (var y = 0; y < newHeight; y++) { - var i = (y*newWidth+x)*4; - var r = newImage.data[i]; - var g = newImage.data[i+1]; - var b = newImage.data[i+2]; - var a = newImage.data[i+3]; - if (a > 0.33) { - // mousePos is the center of the image - var pixelX = mousePos.x - Math.round(newWidth/2) + x+1; - var pixelY = mousePos.y - Math.round(newHeight/2) + y+1; - if (isEmpty(pixelX,pixelY)) { - var elem = (settings.imageelem || "wood"); - if (!elements[elem]) { elem = "wood";} - createPixel(elem,pixelX,pixelY); - pixelMap[pixelX][pixelY].color = pixelColorPick(pixelMap[pixelX][pixelY], RGBToHex([r,g,b])); - } - } - } - } + placeImage(); return false; } else if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) { @@ -10743,6 +10702,51 @@ mouseMove(e); return false; } + function placeImage(placementX,placementY,scale) { + if (!scale) { scale = mouseSize } + // downscale the placingImage.height) { + canvas.width = mouseSize; + canvas.height = Math.round(placingImage.height/placingImage.width*mouseSize); + } + else { + canvas.height = mouseSize; + canvas.width = Math.round(placingImage.width/placingImage.height*mouseSize); + } + var newWidth = canvas.width; + var newHeight = canvas.height; + var ctx = canvas.getContext("2d"); + if (settings.imagesmooth === 0) { + ctx.webkitImageSmoothingEnabled = false; + ctx.mozImageSmoothingEnabled = false; + ctx.imageSmoothingEnabled = false; + } + ctx.drawImage(placingImage,0,0,newWidth,newHeight); + var newImage = ctx.getImageData(0,0,newWidth,newHeight); + // loop through each pixel in the ImageData + for (var x = 0; x < newWidth; x++) { + for (var y = 0; y < newHeight; y++) { + var i = (y*newWidth+x)*4; + var r = newImage.data[i]; + var g = newImage.data[i+1]; + var b = newImage.data[i+2]; + var a = newImage.data[i+3]; + if (a > 0.33) { + // mousePos is the center of the image + var pixelX = (placementX||mousePos.x) - Math.round(newWidth/2) + x+1; + var pixelY = (placementY||mousePos.y) - Math.round(newHeight/2) + y+1; + if (isEmpty(pixelX,pixelY)) { + var elem = (settings.imageelem || "wood"); + if (!elements[elem]) { elem = "wood";} + createPixel(elem,pixelX,pixelY); + pixelMap[pixelX][pixelY].color = pixelColorPick(pixelMap[pixelX][pixelY], RGBToHex([r,g,b])); + } + } + } + } + } function mouseUp(e) { mouseIsDown = false; if (shaping) { @@ -12627,6 +12631,55 @@ for (var k = 0; k < b0.split(" AND ").length; k++) { if (e.touches) e = e.touches[0]; return false; } + gameCanvas.addEventListener("dragenter", function(e){e.stopPropagation(); e.preventDefault();}) + gameCanvas.addEventListener("dragover", function(e){e.stopPropagation(); e.preventDefault();}) + gameCanvas.addEventListener("drop", function(e){ + e.stopPropagation(); + e.preventDefault(); + var url = e.dataTransfer.getData('text/plain'); + if (url) { + var img = new Image(); + img.onload = function(){placingImage = img; placeImage(); placingImage = null;} + img.src = url; + // for img file(s), read the file & draw to canvas + } else { + console.log(e.dataTransfer.files) + if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) { return; } + var file = e.dataTransfer.files[0]; + if (file.type.indexOf('image/') === -1) { return; } + var img = document.createElement("img"); + img.classList.add("obj"); + img.file = file; + var reader = new FileReader(); + reader.onload = (function(aImg){ + return function(e) { + aImg.onload=function(){ + placingImage = aImg; + placeImage(); + placingImage = null; + } + // e.target.result is a dataURL for the image + aImg.src = e.target.result; + }; + })(img); + reader.readAsDataURL(file); + } + }, false); + // if pasted image, draw to canvas + window.addEventListener("paste", function(e){ + if (e.clipboardData) { + var items = e.clipboardData.items; + if (!items) { return; } + var item = items[items.length-1]; + if (item.type.indexOf('image/') === -1) { return; } + var blob = item.getAsFile(); + var URLObj = window.URL || window.webkitURL; + var source = URLObj.createObjectURL(blob); + var img = new Image(); + img.onload = function(){placingImage = img; placeImage(); placingImage = null;} + img.src = source; + } + }, false); window.onbeforeunload = function(){ // Confirm leaving page if there are pixels on-screen if (currentPixels.length > 0){ return 'Are you sure you want to leave?';