Skip to content

Instantly share code, notes, and snippets.

@teknosains

teknosains/index.html

Created April 17, 2020 13:31
Show Gist options
  • Save teknosains/76d56830ffb5d5e00ef58de90afe9dd3 to your computer and use it in GitHub Desktop.
Save teknosains/76d56830ffb5d5e00ef58de90afe9dd3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">
</head>
<body style='background-color:#fff;'>
<div class="container" style="border:1px solid #ddd;padding:10px">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Hapus dulu Background photo mahasiswa disini:
<a href="https://www.remove.bg/" target="_blank">www.remove.bg</a>, download imagenya Lalu Upload Transparent filenya <input type="file" id="uploadFile"/>
<hr>
</div>
</div>
<div class="row">
<div clas="col-sm-12 col-md-4 col-lg-4" style="text-align:center;border:1px solid #ddd;padding:10px">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img id="photoMahasiwa" width="265" >
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12" >
<img id="photoTemplate" width="320">
</div>
</div>
</div>
</div>
<div clas="col-sm-12 col-md-8 col-lg-8" style="text-align:center;border:1px solid #ddd;padding:10px">
<button type="button" id="resetCanvas">Reset</button>
<h4>Drag Image Here</h4>
<canvas id="canvas" style="background-color:#3767d7" width="380" height="520" style="border: 1px solid gray" />
</div>
</div>
</div>
<script id="jsbin-javascript">
/*
* Author: Budi K
* Reference: https://stackoverflow.com/users/149636/lostsource
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
// photo url / this should be from DB
photoMahasiwa.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_260/v1587101640/pas-foto-bacground-biru_kygh2e.jpg');
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
// template url/this should be from storage
photoTemplate.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_320/v1587121489/background-jas-final_iwllzp.png');
photoTemplate.draggable = true;
photoTemplate.addEventListener('dragstart', function(e) {
drag(e);
});
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.addEventListener('drop', function(e) {
drop(e);
});
canvas.addEventListener('dragover', function(e) {
allowDrop(e);
});
function renderScene() {
requestAnimationFrame(renderScene);
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0,
canvas.width,
canvas.height
);
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
// render image to canvas
if (obj.fromUpload) {
obj.context.drawImage(obj.image, obj.x, obj.y, obj.width, obj.height);
} else {
obj.context.drawImage(obj.image, obj.x, obj.y);
}
}
}
requestAnimationFrame(renderScene);
window.addEventListener("load", function() {
let canvas = document.getElementById('canvas');
canvas.onmousedown = function(e) {
let downX = e.offsetX;
let downY = e.offsetY;
// scan images on canvas to determin if event hit an object
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
if (!isPointInRange(downX, downY, obj)) {
continue;
}
startMove(obj, downX, downY);
break;
}
}
}, false);
function startMove(obj, downX, downY) {
let canvas = document.getElementById('canvas');
let origX = obj.x,
origY = obj.y;
canvas.onmousemove = function(e) {
let moveX = e.offsetX,
moveY = e.offsetY;
let diffX = moveX - downX,
diffY = moveY - downY;
obj.x = origX + diffX;
obj.y = origY + diffY;
}
canvas.onmouseup = function() {
// stop moving
canvas.onmousemove = function() {};
}
}
function isPointInRange(x, y, obj) {
console.log("X: " + x + " Y: " + y);
console.log("Object Height, width:" + obj.height + ", " + obj.width);
console.log("Object X,Y: " + obj.x + "," + obj.y)
return !(
x < obj.x ||
x > obj.x + obj.width ||
y < obj.y ||
y > obj.y + obj.height
);
}
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x", e.clientX - e.target.offsetLeft);
e.dataTransfer.setData("mouse_position_y", e.clientY - e.target.offsetTop);
e.dataTransfer.setData("image_id", e.target.id);
}
function drop(e) {
e.preventDefault();
let image = document.getElementById(e.dataTransfer.getData("image_id"));
console.log(image);
let mouse_position_x = e.dataTransfer.getData("mouse_position_x");
let mouse_position_y = e.dataTransfer.getData("mouse_position_y");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
imagesOnCanvas.push({
context: ctx,
image: image,
x: e.clientX - canvas.offsetLeft - mouse_position_x,
y: e.clientY - canvas.offsetTop - mouse_position_y,
width: image.offsetWidth,
height: image.offsetHeight,
fromUpload: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
imagesOnCanvas = [];
renderScene();
});
// upload file
let uploadFile = document.getElementById('uploadFile');
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 4,
y: 10,
width: 265,
height: 360,
fromUpload: true
});
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
})(window, document);
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
* Author: Budi K
* Reference: https://stackoverflow.com/users/149636/lostsource
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
// photo url / this should be from DB
photoMahasiwa.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_260/v1587101640/pas-foto-bacground-biru_kygh2e.jpg');
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
// template url/this should be from storage
photoTemplate.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_320/v1587121489/background-jas-final_iwllzp.png');
photoTemplate.draggable = true;
photoTemplate.addEventListener('dragstart', function(e) {
drag(e);
});
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.addEventListener('drop', function(e) {
drop(e);
});
canvas.addEventListener('dragover', function(e) {
allowDrop(e);
});
function renderScene() {
requestAnimationFrame(renderScene);
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0,
canvas.width,
canvas.height
);
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
// render image to canvas
if (obj.fromUpload) {
obj.context.drawImage(obj.image, obj.x, obj.y, obj.width, obj.height);
} else {
obj.context.drawImage(obj.image, obj.x, obj.y);
}
}
}
requestAnimationFrame(renderScene);
window.addEventListener("load", function() {
let canvas = document.getElementById('canvas');
canvas.onmousedown = function(e) {
let downX = e.offsetX;
let downY = e.offsetY;
// scan images on canvas to determin if event hit an object
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
if (!isPointInRange(downX, downY, obj)) {
continue;
}
startMove(obj, downX, downY);
break;
}
}
}, false);
function startMove(obj, downX, downY) {
let canvas = document.getElementById('canvas');
let origX = obj.x,
origY = obj.y;
canvas.onmousemove = function(e) {
let moveX = e.offsetX,
moveY = e.offsetY;
let diffX = moveX - downX,
diffY = moveY - downY;
obj.x = origX + diffX;
obj.y = origY + diffY;
}
canvas.onmouseup = function() {
// stop moving
canvas.onmousemove = function() {};
}
}
function isPointInRange(x, y, obj) {
console.log("X: " + x + " Y: " + y);
console.log("Object Height, width:" + obj.height + ", " + obj.width);
console.log("Object X,Y: " + obj.x + "," + obj.y)
return !(
x < obj.x ||
x > obj.x + obj.width ||
y < obj.y ||
y > obj.y + obj.height
);
}
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x", e.clientX - e.target.offsetLeft);
e.dataTransfer.setData("mouse_position_y", e.clientY - e.target.offsetTop);
e.dataTransfer.setData("image_id", e.target.id);
}
function drop(e) {
e.preventDefault();
let image = document.getElementById(e.dataTransfer.getData("image_id"));
console.log(image);
let mouse_position_x = e.dataTransfer.getData("mouse_position_x");
let mouse_position_y = e.dataTransfer.getData("mouse_position_y");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
imagesOnCanvas.push({
context: ctx,
image: image,
x: e.clientX - canvas.offsetLeft - mouse_position_x,
y: e.clientY - canvas.offsetTop - mouse_position_y,
width: image.offsetWidth,
height: image.offsetHeight,
fromUpload: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
imagesOnCanvas = [];
renderScene();
});
// upload file
let uploadFile = document.getElementById('uploadFile');
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 4,
y: 10,
width: 265,
height: 360,
fromUpload: true
});
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
})(window, document);</script></body>
Raw
jsbin.lijudez.js
/*
* Author: Budi K
* Reference: https://stackoverflow.com/users/149636/lostsource
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
// photo url / this should be from DB
photoMahasiwa.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_260/v1587101640/pas-foto-bacground-biru_kygh2e.jpg');
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
// template url/this should be from storage
photoTemplate.setAttribute('src', 'https://res.cloudinary.com/cepot/image/upload/c_scale,w_320/v1587121489/background-jas-final_iwllzp.png');
photoTemplate.draggable = true;
photoTemplate.addEventListener('dragstart', function(e) {
drag(e);
});
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.addEventListener('drop', function(e) {
drop(e);
});
canvas.addEventListener('dragover', function(e) {
allowDrop(e);
});
function renderScene() {
requestAnimationFrame(renderScene);
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0,
canvas.width,
canvas.height
);
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
// render image to canvas
if (obj.fromUpload) {
obj.context.drawImage(obj.image, obj.x, obj.y, obj.width, obj.height);
} else {
obj.context.drawImage(obj.image, obj.x, obj.y);
}
}
}
requestAnimationFrame(renderScene);
window.addEventListener("load", function() {
let canvas = document.getElementById('canvas');
canvas.onmousedown = function(e) {
let downX = e.offsetX;
let downY = e.offsetY;
// scan images on canvas to determin if event hit an object
for (let x = 0, len = imagesOnCanvas.length; x < len; x++) {
let obj = imagesOnCanvas[x];
if (!isPointInRange(downX, downY, obj)) {
continue;
}
startMove(obj, downX, downY);
break;
}
}
}, false);
function startMove(obj, downX, downY) {
let canvas = document.getElementById('canvas');
let origX = obj.x,
origY = obj.y;
canvas.onmousemove = function(e) {
let moveX = e.offsetX,
moveY = e.offsetY;
let diffX = moveX - downX,
diffY = moveY - downY;
obj.x = origX + diffX;
obj.y = origY + diffY;
}
canvas.onmouseup = function() {
// stop moving
canvas.onmousemove = function() {};
}
}
function isPointInRange(x, y, obj) {
console.log("X: " + x + " Y: " + y);
console.log("Object Height, width:" + obj.height + ", " + obj.width);
console.log("Object X,Y: " + obj.x + "," + obj.y)
return !(
x < obj.x ||
x > obj.x + obj.width ||
y < obj.y ||
y > obj.y + obj.height
);
}
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x", e.clientX - e.target.offsetLeft);
e.dataTransfer.setData("mouse_position_y", e.clientY - e.target.offsetTop);
e.dataTransfer.setData("image_id", e.target.id);
}
function drop(e) {
e.preventDefault();
let image = document.getElementById(e.dataTransfer.getData("image_id"));
console.log(image);
let mouse_position_x = e.dataTransfer.getData("mouse_position_x");
let mouse_position_y = e.dataTransfer.getData("mouse_position_y");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
imagesOnCanvas.push({
context: ctx,
image: image,
x: e.clientX - canvas.offsetLeft - mouse_position_x,
y: e.clientY - canvas.offsetTop - mouse_position_y,
width: image.offsetWidth,
height: image.offsetHeight,
fromUpload: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
imagesOnCanvas = [];
renderScene();
});
// upload file
let uploadFile = document.getElementById('uploadFile');
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 4,
y: 10,
width: 265,
height: 360,
fromUpload: true
});
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
})(window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment