I need to make a JavaScript widget that lets the user click on a specific area of an image and then that section gets magnified. I don't want it in a popup or a new page - I want the magnified section to appear right on top of where it originally was in the image.
system
Preciso fazer um widget JavaScript que permita ao usuário clicar em uma área específica de uma imagem e, em seguida, essa seção é ampliada.Não quero isso em um pop -up ou em uma nova página - quero que a seção ampliada apareça no topo de onde ela estava originalmente na imagem.
user
Uma maneira fácil de fazer isso é colocar a imagem em um elemento HTML Canvas.Em seguida, você pode usar o comando drawImage () da API da Web Canvas para editar a imagem, incluindo a ampliação de uma seção.Aqui está o código de amostra que amplia um quadrado 10% do tamanho da imagem total onde quer que o usuário clique:

`` `JavaScript
        classe ZoomableCanvas {
            construtor (Canvas_id, img_src, zoom_factor) {
                this.Canvas = document.getElementById (Canvas_id);
                this.Canvas.AddeventListener ('Click', this.ZoomOnClick, false);
                this.area_size = math.max (this.canvas.width, this.canvas.Height) * .1;
                this.zoom_size = this.area_size * zoom_factor;
                
                this.img = new Image ();
                this.img.addeventListener ("load", this.Drawimage, false);
                this.img.src = img_src;

                this.iszoomed = false;
            }

            zoomonClick = (e) => {
                if (this.isZoomed) {
                    this.iszoomed = false;
                    this.Drawimage ();
                } outro {
                    this.iszoomed = true;
                    this.DrawZoomSection (E.OffSetX, E.Offsety);
                }
            }

            drawZoomSection = (x, y) => {
                const ctx = this.canvas.getContext ("2d");
                ctx.drawimage (this.img, x - this.area_size/2, y - this.area_size/2, this.area_size, this.area_size, x - this.zoom_size/2, y - this.zoom_size/2, this.zoom_size, this.zoom_size);
            }

            drawImage = () => {
                const ctx = this.canvas.getContext ("2d");
                ctx.clearrect (0, 0, this.Canvas.Width, this.Canvas.Height);
                ctx.drawimage (this.img, 0, 0);
            }
        }

        zc = new ZoomableCanvas ('Zoomable_Canvas', 'img/sunflowers.jpg', 3);
`` `
assistant
<|system|>
</s>
<|user|>
Preciso fazer um widget JavaScript que permita ao usuário clicar em uma área específica de uma imagem e, em seguida, essa seção é ampliada.Não quero isso em um pop -up ou em uma nova página - quero que a seção ampliada apareça no topo de onde ela estava originalmente na imagem.</s>
<|assistant|>
Uma maneira fácil de fazer isso é colocar a imagem em um elemento HTML Canvas.Em seguida, você pode usar o comando drawImage () da API da Web Canvas para editar a imagem, incluindo a ampliação de uma seção.Aqui está o código de amostra que amplia um quadrado 10% do tamanho da imagem total onde quer que o usuário clique:

`` `JavaScript
        classe ZoomableCanvas {
            construtor (Canvas_id, img_src, zoom_factor) {
                this.Canvas = document.getElementById (Canvas_id);
                this.Canvas.AddeventListener ('Click', this.ZoomOnClick, false);
                this.area_size = math.max (this.canvas.width, this.canvas.Height) * .1;
                this.zoom_size = this.area_size * zoom_factor;
                
                this.img = new Image ();
                this.img.addeventListener ("load", this.Drawimage, false);
                this.img.src = img_src;

                this.iszoomed = false;
            }

            zoomonClick = (e) => {
                if (this.isZoomed) {
                    this.iszoomed = false;
                    this.Drawimage ();
                } outro {
                    this.iszoomed = true;
                    this.DrawZoomSection (E.OffSetX, E.Offsety);
                }
            }

            drawZoomSection = (x, y) => {
                const ctx = this.canvas.getContext ("2d");
                ctx.drawimage (this.img, x - this.area_size/2, y - this.area_size/2, this.area_size, this.area_size, x - this.zoom_size/2, y - this.zoom_size/2, this.zoom_size, this.zoom_size);
            }

            drawImage = () => {
                const ctx = this.canvas.getContext ("2d");
                ctx.clearrect (0, 0, this.Canvas.Width, this.Canvas.Height);
                ctx.drawimage (this.img, 0, 0);
            }
        }

        zc = new ZoomableCanvas ('Zoomable_Canvas', 'img/sunflowers.jpg', 3);
`` `</s>
