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?';