أحتاج إلى إنشاء عنصر واجهة مستخدم JavaScript يتيح للمستخدم النقر فوق منطقة معينة من الصورة ثم يتم تكبير هذا القسم. لا أريده في نافذة منبثقة أو صفحة جديدة - أريد أن يظهر القسم المكبر مباشرة أعلى المكان الذي كان فيه في الأصل في الصورة.
system
أحتاج إلى إنشاء عنصر واجهة مستخدم JavaScript يتيح للمستخدم النقر فوق منطقة معينة من الصورة ثم يتم تكبير هذا القسم. لا أريده في نافذة منبثقة أو صفحة جديدة - أريد أن يظهر القسم المكبر مباشرة أعلى المكان الذي كان فيه في الأصل في الصورة.
user
إحدى الطرق السهلة للقيام بذلك هي وضع الصورة في عنصر قماش HTML. ثم يمكنك استخدام الأمر drawImage() من Canvas Web API لتحرير الصورة، بما في ذلك تكبير القسم. فيما يلي نموذج التعليمات البرمجية الذي يعمل على تكبير مربع بنسبة 10% من حجم الصورة الإجمالية أينما ينقر المستخدم:

```جافا سكريبت
        فئة زوومابليكانفاس {
            مُنشئ (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 = صورة جديدة();
                this.img.addEventListener("load", this.drawImage, false);
                this.img.src = img_src;

                this.isZoomed = false;
            }

            ZoomOnClick = (ه) => {
                إذا (هذا.isZoomed) {
                    this.isZoomed = false;
                    this.drawImage();
                } آخر {
                    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, هذا. Zoom_size، this.zoom_size)؛
            }

            رسم الصورة = () => {
                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
أحتاج إلى إنشاء عنصر واجهة مستخدم JavaScript يتيح للمستخدم النقر فوق منطقة معينة من الصورة ثم يتم تكبير هذا القسم. لا أريده في نافذة منبثقة أو صفحة جديدة - أريد أن يظهر القسم المكبر مباشرة أعلى المكان الذي كان فيه في الأصل في الصورة.
user
يمكنك القيام بذلك باستخدام HTML و JavaScript و CSS. إليك كيفية القيام بذلك:

HTML:

```html
<div id="image-container">
  <img id="image" src="your-image.jpg" alt="Your Image">
</div>
assistant