Change the aspect ratio for canvas with set number of pixels
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have an image (well data) that is m = 3600 n = 512. It has to stay like this. The data really starts as an array but is then broken down into m,n chunks. I would like to change the aspect ratio in canvas. If I change canvas.width, it gives me more available space that I don’t use. If I change canvas.style.width, it increases both height and width.
I want the image to be wider while keeping its same length.
<!doctype html>
<html class=”no-js” lang=”en”>
<head>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<!– Font Awesome –>
<link
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.css”
rel=”stylesheet”
/>
<!– Google Fonts –>
<link
href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap”
rel=”stylesheet”
/>
<!– MDB –>
<link
href=”https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css”
rel=”stylesheet”
/>
<!– MDB –>
<script
type=”text/javascript”
src=”https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js”
></script>
<style>
body {
max-width: 910px;
margin: 0 auto;
background-color:#FFFFFF;
text-align:center;
}
</style>
</head>
<body>
<label class=”form-label” for=”customRange1″>X frequency</label>
<div class=”range”>
<input type=”range” class=”form-range” id=”customRange1″ />
</div>
<label class=”form-label” for=”customRange2″>Y frequency</label>
<div class=”range”>
<input type=”range” class=”form-range” id=”customRange2″ />
</div>
<canvas style=”outline: black 2px solid;” id=”leftcanvas” ></canvas>
<script>
function pixel(array){
var inc = 0;
var buffer = new Uint8ClampedArray(width * height * 4); // have enough bytes
for(var y = 0; y < height; y++) {
for(var x = 0; x < width; x++) {
var pos = (y * width + x) * 4; // position in buffer based on x and y
buffer[pos ] = 0; // some R value [0, 255]
buffer[pos+1] = 0; // some G value
buffer[pos+2] = 0; // some B value
buffer[pos+3] = array[inc]; // set alpha channel
inc++
}
}
return buffer;
};
function makecanvas(idtag,height,imgdata){
var canvas = document.getElementById(idtag),
ctx = canvas.getContext(‘2d’);
ctx.imageSmoothingEnabled = false;
canvas.height = height;
canvas.width = width;
/* THIS PART I CANT FIGURE OUT */
/* increases canvas but not image */
canvas.width = width*1.25;
/* increases width and length */
//canvas.style.width = 1.25* Math.round(512) + “px”;
var idata = ctx.createImageData(width, height);
idata.data.set(imgdata);
ctx.putImageData(idata, 0, 0);
return [idata,ctx];
};
function freq(hzx,hzy){
data = [];
for (var y = 0; y < 3600; y+= 1){
for (var x = 0; x < 512; x+= 1){
data.push(Math.round((255/4*(Math.sin(hzy*2*Math.PI*y/3600) + Math.sin(hzx*2*Math.PI*x/511)+2))))
}
}
return data;
}
trace = freq(1,1)
var width = 512,
height = trace.length/512;
imgmatrix = pixel(trace);
CI = makecanvas(“leftcanvas”,height,imgmatrix);
var idata = CI[0];
const ictx = CI[1];
var slideX = document.getElementById(‘customRange1’);
var slideY = document.getElementById(‘customRange2’);
slideX.onchange = function() {
hzx = slideX.value;
hzy = slideY.value;
trace = freq(hzx,hzy)
imgmatrix = pixel(trace);
idata.data.set(imgmatrix);
ictx.putImageData(idata, 0, 0);
}
slideY.onchange = function() {
hzx = slideX.value;
hzy = slideY.value;
trace = freq(hzx,hzy)
imgmatrix = pixel(trace);
idata.data.set(imgmatrix);
ictx.putImageData(idata, 0, 0);
}
</script>
</body>
</html>
أضف إجابة