Skip to content

Instantly share code, notes, and snippets.

@teknosains

teknosains/index.html

Created April 20, 2020 11:09
Show Gist options
  • Save teknosains/55ced38b0c15f7725e51bb136291eece to your computer and use it in GitHub Desktop.
Save teknosains/55ced38b0c15f7725e51bb136291eece to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Image Editor // source https://jsbin.com/lijudez
Raw
index.html
<html>
<head>
<title>Canvas Image Editor</title>
<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>
, Lalu Upload file transparannya <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"
title="Copy Image url lalu paste di www.remove.bg untuk hapus background">
</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" title="Template Jas harus transparan">
</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 Canvas</button>
<h4>Drag Image Here</h4>
<canvas id="canvas" style="sbackground-color:#3767d7;border: 1px solid #3767d7" width="320" height="440"/>
</div>
</div>
</div>
<script id="jsbin-javascript">
/*
* Author: Budi K
* Foto Binusian Card designer
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// upload file
const uploadFile = document.getElementById('uploadFile');
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
photoMahasiwa.src = 'https://res.cloudinary.com/cepot/image/upload/c_scale,h_360,w_265/v1587114925/pas-foto-bacground-biru-removebg-preview_k9z26a.png';
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
photoTemplate.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');
// render background
let imbg = new Image();
imbg.onload = function() {
// push backgorund blue
imagesOnCanvas.push({
context: ctx,
image: imbg,
x: 0,
y: 0,
width: 265,
height: 360,
fromUpload: false,
isBackground: true
});
};
// background blue
imbg.src = 'https://res.cloudinary.com/cepot/image/upload/v1587379039/blue-background_wfjjio.png';
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];
console.log('Is Backgroynd: ' + obj.isBackground);
if (!isPointInRange(downX, downY, obj) || obj.isBackground === true) {
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"));
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,
isBackground: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
uploadFile.value = '';
imagesOnCanvas = [];
renderScene();
});
/**
* Upload file
*/
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// read and push uploaded file
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 28,
y: 10,
width: 265,
height: 360,
fromUpload: true,
isBackground: false
});
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
* Foto Binusian Card designer
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// upload file
const uploadFile = document.getElementById('uploadFile');
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
photoMahasiwa.src = 'https://res.cloudinary.com/cepot/image/upload/c_scale,h_360,w_265/v1587114925/pas-foto-bacground-biru-removebg-preview_k9z26a.png';
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
photoTemplate.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');
// render background
let imbg = new Image();
imbg.onload = function() {
// push backgorund blue
imagesOnCanvas.push({
context: ctx,
image: imbg,
x: 0,
y: 0,
width: 265,
height: 360,
fromUpload: false,
isBackground: true
});
};
// background blue
imbg.src = 'https://res.cloudinary.com/cepot/image/upload/v1587379039/blue-background_wfjjio.png';
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];
console.log('Is Backgroynd: ' + obj.isBackground);
if (!isPointInRange(downX, downY, obj) || obj.isBackground === true) {
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"));
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,
isBackground: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
uploadFile.value = '';
imagesOnCanvas = [];
renderScene();
});
/**
* Upload file
*/
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// read and push uploaded file
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 28,
y: 10,
width: 265,
height: 360,
fromUpload: true,
isBackground: false
});
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
})(window, document);</script></body>
Raw
jsbin.lijudez.js
/*
* Author: Budi K
* Foto Binusian Card designer
*/
(function(window, document, undefined) {
'use strict';
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// upload file
const uploadFile = document.getElementById('uploadFile');
let imagesOnCanvas = [];
// buat photo mahasiswa bisa di Drag/Drop
let photoMahasiwa = document.getElementById('photoMahasiwa');
photoMahasiwa.src = 'https://res.cloudinary.com/cepot/image/upload/c_scale,h_360,w_265/v1587114925/pas-foto-bacground-biru-removebg-preview_k9z26a.png';
photoMahasiwa.draggable = true;
photoMahasiwa.addEventListener('dragstart', function(e) {
drag(e);
});
// buat template bisa di drag/drop
let photoTemplate = document.getElementById('photoTemplate');
photoTemplate.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');
// render background
let imbg = new Image();
imbg.onload = function() {
// push backgorund blue
imagesOnCanvas.push({
context: ctx,
image: imbg,
x: 0,
y: 0,
width: 265,
height: 360,
fromUpload: false,
isBackground: true
});
};
// background blue
imbg.src = 'https://res.cloudinary.com/cepot/image/upload/v1587379039/blue-background_wfjjio.png';
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];
console.log('Is Backgroynd: ' + obj.isBackground);
if (!isPointInRange(downX, downY, obj) || obj.isBackground === true) {
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"));
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,
isBackground: false
});
}
// reset Canvas
document.getElementById('resetCanvas')
.addEventListener('click', function(e) {
uploadFile.value = '';
imagesOnCanvas = [];
renderScene();
});
/**
* Upload file
*/
uploadFile.addEventListener('change', function(e) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// read and push uploaded file
let reader = new FileReader();
reader.onload = function(event){
let img = new Image(265, 360);
imagesOnCanvas.push({
context: ctx,
image: img,
x: 28,
y: 10,
width: 265,
height: 360,
fromUpload: true,
isBackground: false
});
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