0
65
ViewsConfiguración del tamaño de la imagen dentro de Canvas con JS
Hola, todos,
Entonces hay un lienzo HTML con una herramienta de edición de fotos. Que se parece a esto -
<div class="col-md-12 col-lg-8 col-sm-12" id="mainDiv"> <div id="canvas1Div" data-toggle="tooltip" title="" data-original-title="Image Processing Area" > <canvas id="canvas1" width="564" height="488"> </canvas> </div> <div id="canvasDiv" data-toggle="tooltip" data-original-title="" title="" style="border: 0px;" > <canvas id="canvas3" width="188" height="240"> </canvas> <canvas id="canvas4" width="188" height="240" style="width: 188px; height: 240px;" > </canvas> </div> </div> Entonces, ¿podría ser posible con JavaScript que la foto que elijo pueda caber en la parte central del lienzo (bordes coloridos) ejecutándolo en la consola del navegador?
Gracias.
·
Juan Pablo Isaza
1 answers
Answer question0
Intente agregar la imagen en el lienzo usando este enfoque:
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);-
sx,sy,sWidthysHeightse utilizan para recortar la imagen -
dx,dy,dWidthydHeightse utilizan para colocar la imagen dentro del lienzo. Estos argumentos deben correlacionarse con la posición y el tamaño de rect deseados.
Para obtener más información sobre este pago, consulte este enlace: CanvasRenderingContext2D.drawImage()
Editar
Use la clase Image nativa para importar cualquier imagen desde su PC:
const image = new Image(width, height); // render image on canvas when it's done loading image.onload = () => ctx.drawImage(image, …); // load the image image.src = './path/to/image.png';
·
Juan Pablo Isaza
Report
Answer question