I have 2 canvases side by side , and in the first one I have resizable draggable div as a crop region and I want to display the cropped region on the second canvas . But it is not happening in my case. Any help is appreciated
function crop(){
var x = $("#crop_square").width();
var y = $("#crop_square").height();
var ty = $("#crop_square").offset().top -
$("#area_c").offset().top;
var tx = $("#crop_square").offset().left -
$("#area_c").offset().left;
alert(x);
alert(y);
alert(ty);
alert(tx);
var c = document.getElementById("area_c"); //canvaas1
var c2 = document.getElementById("area_c2"); // canvas2
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c,tx,ty,x,y,0,0,x,y );
}
If you need to "crop" a canvas with a div you may use the div's BoundingClientRect data to draw the image on the other canvas:
I hope this is what you were asking.
let cw = (area_c.width = area_c2.width = 400);
let ch = (area_c.height = area_c2.height = 400);
const ctx1 = area_c.getContext("2d");
const ctx2 = area_c2.getContext("2d");
theImg.onload = function() {
ctx1.drawImage(theImg, 0, 0);
let bcr = crop_square.getBoundingClientRect();
ctx2.drawImage(
theImg,
bcr.x,
bcr.y,
bcr.width,
bcr.height,
bcr.x,
bcr.y,
bcr.width,
bcr.height
);
}
.wrap {
width: 300px;
height: 300px;
border: 1px solid;
display: inline-block;
position: relative;
}
#crop_square {
position: absolute;
width: 150px;
height: 75px;
left: 100px;
top: 53px;
border: 5px solid gold;
}
<div class="wrap">
<canvas id="area_c">
<img id="theImg" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAZAAD/4QMBaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM0ODBGMTdBQjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM0ODBGMTc5QjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXA6Q3JlYXRvclRvb2w9IjguMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI3RURCQTlGMDRBOThGQjcwM0QzQzk4MzYwQjAyNDM1QSIgc3RSZWY6ZG9jdW1lbnRJRD0iN0VEQkE5RjA0QTk4RkI3MDNEM0M5ODM2MEIwMjQzNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7QBIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAIAOEJJTQQlAAAAAAAQ/OEfici3yXgvNGI0B1h36//uAA5BZG9i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"/>
</canvas>
<div id="crop_square"></div>
</div>
<div class="wrap">
<canvas id="area_c2"></canvas>
</div>
Related
I am using Jcrop to crop Images, it is working fine with small size images, but Whenever I try to put large image like 2080x2080 or 1600x1600 it covers all my screen, also It cannot be handle with CSS like width and height control in Image tag
Seeking Solution/Suggestion -
Any method to put this image in container/div and then zoom-in/out with mouse event ?
Any method to handle large size image in a fix container and crop so that image maintain it's quality.
P.s: you can try with large image in below working example and see how it behaves with big Image.
var jcp;
var save = document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
imageLoader.onchange = function handleImage(e) { //handling our image picker <input>:
var reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
save.onclick = function() {
if (jcp && jcp.active) {
var i = 0;
for (area of jcp.crops) {
i++;
canvas = document.createElement("canvas");
canvas.setAttribute('width', area.pos.w);
canvas.setAttribute('height', area.pos.h);
ctx = canvas.getContext("2d");
ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
temp = document.createElement('a');
temp.setAttribute('download', 'area' + i + '.jpg');
temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
temp.click();
}
}
};
Jcrop.load('target').then(img => {
jcp = Jcrop.attach(img, {
multi: true
});
});
body {
margin: 0px;
padding: 0px;
background-color: #ededed;
}
.cropapp {
position: absolute;
width: 100%;
height: 100%;
left: 5%;
background: lightgray;
}
.cropbox {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
div {
position: relative;
overflow: hidden;
}
<head>
<title>Jcrop Example</title>
<link href="https://unpkg.com/jcrop#3.0.1/dist/jcrop.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/jcrop#3.0.1/dist/jcrop.js"></script>
</head>
<body>
<div style="width:400px; margin:10px auto; padding:10px 0; overflow:hidden;"><a style="float:right; display:block; padding:10px 15px; color:#fff; background-color:#237dbd; font-size: 14px; font-weight:bold; border-radius:5px;" id="save">Save</a>
<input type="file" id="imageLoader" name="imageLoader" />
<!-- add this for file picker -->
</div>
<div>
<h1 style="font-family:Helvetica,sans-serif;">
Image Crop <span style="color:lightgray;"></span>
</h1>
<img id="target" style="background-size: cover !important;">
</div>
</body>
You can add any fixed width or height value to your <img id="target"/>. Just calculate and apply the change ratio to areas:
canvas = document.createElement("canvas");
displayWidth=img.width;
displayHeight=img.height;
realWidth = img.naturalWidth;
realHeight = img.naturalHeight;
widthRatio = Math.round(realWidth/displayWidth);
heightRatio = Math.round(realHeight/displayHeight);
width=area.pos.w*widthRatio
height=area.pos.h*heightRatio
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
ctx = canvas.getContext("2d");
ctx.drawImage(img, area.pos.x*widthRatio, area.pos.y*heightRatio, width, height, 0, 0, width, height);
and <img width="500" id="target"/> (or with css #target{width:500px})
l do believe to have an issue regarding an if statement that allows for the detection of where the canvas object, being the image that displays , should be located at within the canvas. There is a reproducible demo provided.
NOTE: I do want to KEEP the css alignment, canvasauto, and not remove it if possible.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
x,
y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>
You're using x from the MouseEvent. This is an experimental feature which is an alias of clientX.
The clientX property gives the coordinates relative to the application's viewport.
You probably want offsetX, which is relative to (the padding edge of the) target node.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
offsetX: x,
offsetY: y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>
I'm trying to add Images above another image in the canvas element
What I'm trying to reach:
Here is what I get:
images source: https://imgur.com/gallery/jaSdhQ9
and this my code:
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,0,0 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>
you can set this like ctx.drawImage(draw,100,30,90,50 );
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,80,25,135,55 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas"></canvas>
I think what you're looking for it's flex-box
#canvas{
display:flex;
justify-content: center;
align-content: center;
}
Here you can read more about the flex-box
thanks to #tokage-dizayn and https://stackoverflow.com/a/19473880/7511165
I came to this code
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
console.log(draw.height,draw.width);
var maxSize = 160;
var ratio = Math.min(maxSize / draw.width, maxSize / draw.height);
var width= draw.width*ratio,
height= draw.height*ratio;
console.log(ratio,width,height);
ctx.drawImage(draw,95,90,width,height);
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>
I try to make drawing app on canvas. It works well in full screen but when I set its width and height according to a div container. It didn't work correctly. It starts painting from the right rather than the top left.
Here is my code pen link: https://codepen.io/pranaysharma995/pen/GRpGVmG.
div class="container">
<div class="col-md-4 col-md-offset-4 " id="canvas-container">
<canvas id="canvas">
</canvas></div>
#canvas-container{
position: relative;
width: 600px;
height: 600px;
background-color: #f3f6f7;
}
You have to offset the mouse position with the canvas.getBoundingClientRect
var canvas = document.querySelector("#canvas");
var container = document.querySelector(".col-md-4");
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var c = canvas.getContext('2d');
c.fillStyle = "red";
c.strokeStyle = "red";
c.lineWidth = 5;
c.lineCap = "round";
function draw(e) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left
var y = e.clientY - rect.top
c.lineTo(x, y);
c.stroke();
}
canvas.addEventListener("mousemove", draw);
.container {
position: absolute;
left: 50px;
top: 25px
}
#canvas-container {
position: relative;
width: 200px;
height: 200px;
background-color: #f3f6f7;
}
<div class="container">
<div class="col-md-4 col-md-offset-4 " id="canvas-container">
<canvas id="canvas"></canvas>
</div>
</div>
I'm having trouble trying to figure out how to center the canvas in the page. The canvas's code is in a javascript file. Here's the html for the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game Tut</title>
</head>
<body>
<script src="game.js"></script>
</body>
</html>
I've tried something like this in the javascript file.
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.tabindex = 0;
canvas.style = "position: absolute; top: 50px; left: 50px; border:2px solid blue"
document.addEventListener('keydown', doKeyDown, true);
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
For some reason the blue border or the positioning don't seem to show up in Google Chrome.
var canvas = document.getElementsByName("canvas")[0];
var style = canvas.style;
style.marginLeft = "auto";
style.marginRight = "auto";
var parentStyle = canvas.parentElement.style;
parentStyle.textAlign = "center";
parentStyle.width = "100%";
OR
canvas.style = "position:absolute; left: 50%; width: 400px; margin-left: -200px;";
Try this:
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.tabindex = 0;
canvas.setAttribute('style', "position: absolute; left: 50%;margin-left:-400px; top: 50%;margin-top:-300px; border:2px solid blue");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener('keydown', doKeyDown, true);
Try this
the code below made the canvas center
canvas.style = "position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:2px solid blue";
By the way
document.addEventListener('keydown', doKeyDown, true);
I posted your code but chrome showed the 'doKeyDown' function is undefined so maybe you need to fix this error then your canvas will show correctly.
Error showed