Hướng dẫn what is image () in javascript? - hình ảnh () trong javascript là gì?

Question

" Trước
Tiếp theo "

Cho đến bây giờ chúng tôi đã tạo ra các hình dạng và phong cách áp dụng của riêng mình cho chúng. Một trong những tính năng thú vị hơn của

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

4 là khả năng sử dụng hình ảnh. Chúng có thể được sử dụng để thực hiện tổng hợp ảnh động hoặc như phông nền của đồ thị, cho các sprites trong các trò chơi, v.v. Hình ảnh bên ngoài có thể được sử dụng ở bất kỳ định dạng nào được hỗ trợ bởi trình duyệt, chẳng hạn như PNG, GIF hoặc JPEG. Bạn thậm chí có thể sử dụng hình ảnh được tạo bởi các yếu tố canvas khác trên cùng một trang với nguồn!

Nội dung chính Show

Nhận hình ảnh để vẽ
Sử dụng hình ảnh từ cùng một trang
Sử dụng hình ảnh từ các miền khác
Sử dụng các yếu tố canvas khác
Tạo hình ảnh từ đầu
Nhúng hình ảnh qua dữ liệu: URL
Sử dụng khung từ video
Vẽ hình ảnh
Ví dụ: Một biểu đồ dòng đơn giản
Ví dụ: ốp lát một hình ảnh
Canvas kết quả trông như thế này:
Biến thể thứ hai của phương thức const img = new Image(); // Create new img element img.addEventListener('load', () => { // execute drawImage statements here }, false); img.src = 'myImage.png'; // Set source path 6 thêm hai tham số mới và cho phép chúng tôi đặt hình ảnh được chia tỷ lệ trên vải.
Kiểm soát hành vi tỷ lệ hình ảnh
Loại hình ảnh trong JavaScript là gì?
Việc sử dụng phần tử hình ảnh là gì?
Bạn có thể đặt hình ảnh trong JavaScript không?
Hình ảnh Dom là gì?

Nhập hình ảnh vào một khung vẽ về cơ bản là một quá trình hai bước:

Nhận tham chiếu đến một đối tượng

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

5 hoặc cho một phần tử canvas khác làm nguồn. Cũng có thể sử dụng hình ảnh bằng cách cung cấp URL.

Vẽ hình ảnh trên khung vẽ bằng hàm

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6.

Hãy xem cách làm điều này.

Nhận hình ảnh để vẽ

API Canvas có thể sử dụng bất kỳ loại dữ liệu nào sau đây làm nguồn hình ảnh:

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

5

Đây là những hình ảnh được tạo bằng hàm tạo

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

8, cũng như bất kỳ phần tử

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

9 nào.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

0

Đây là những hình ảnh được nhúng bằng phần tử

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

1.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

2

Sử dụng phần tử HTML

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

3 làm nguồn hình ảnh của bạn lấy khung hiện tại từ video và sử dụng nó làm hình ảnh.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

4

Bạn có thể sử dụng một phần tử

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

4 khác làm nguồn hình ảnh của bạn.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

6

Một hình ảnh bitmap, cuối cùng bị cắt. Loại như vậy được sử dụng để trích xuất một phần của hình ảnh, một sprite, từ một hình ảnh lớn hơn

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

7

Một loại

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

4 đặc biệt không được hiển thị và được chuẩn bị mà không được hiển thị. Sử dụng một nguồn hình ảnh như vậy cho phép chuyển sang nó mà không có thành phần của nội dung được hiển thị cho người dùng.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

9

Một hình ảnh đại diện cho một khung hình của một video.

Có một số cách để có được hình ảnh để sử dụng trên một tấm bạt.

Sử dụng hình ảnh từ cùng một trang

Chúng ta có thể có được một tham chiếu đến hình ảnh trên cùng một trang với khung vẽ bằng cách sử dụng một trong số:

Bộ sưu tập

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

0

Phương pháp

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

1

Nếu bạn biết ID của hình ảnh cụ thể bạn muốn sử dụng, bạn có thể sử dụng

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

2 để truy xuất hình ảnh cụ thể đó

Sử dụng hình ảnh từ các miền khác

Sử dụng thuộc tính

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

3 của phần tử

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

9 (được phản ánh bởi thuộc tính

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

5), bạn có thể yêu cầu quyền tải hình ảnh từ một miền khác để sử dụng trong cuộc gọi của bạn đến

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6. Nếu miền lưu trữ cho phép truy cập tên miền chéo vào hình ảnh, hình ảnh có thể được sử dụng trong khung vẽ của bạn mà không làm mờ nó; Nếu không, sử dụng hình ảnh sẽ làm mờ canvas.

Sử dụng các yếu tố canvas khác

Giống như với hình ảnh bình thường, chúng ta truy cập các yếu tố Canvas khác bằng phương pháp

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

1 hoặc

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

2. Hãy chắc chắn rằng bạn đã vẽ một cái gì đó vào khung vẽ nguồn trước khi sử dụng nó trong khung vẽ mục tiêu của bạn.

Một trong những cách sử dụng thực tế hơn của việc này sẽ là sử dụng một yếu tố vải thứ hai như một cái nhìn hình thu nhỏ của khung vẽ lớn hơn khác.

Tạo hình ảnh từ đầu

Một tùy chọn khác là tạo các đối tượng

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

5 mới trong tập lệnh của chúng tôi. Để làm điều này, bạn có thể sử dụng hàm tạo

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

8 thuận tiện:

const img = new Image();   // Create new img element
img.src = 'myImage.png'; // Set source path

Khi tập lệnh này được thực thi, hình ảnh bắt đầu tải.

Nếu bạn cố gắng gọi

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 trước khi hình ảnh tải xong, nó sẽ không làm gì cả (hoặc, trong các trình duyệt cũ, thậm chí có thể ném một ngoại lệ). Vì vậy, bạn cần chắc chắn sử dụng sự kiện tải để bạn không thử điều này trước khi hình ảnh được tải:

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

Nếu bạn chỉ sử dụng một hình ảnh bên ngoài thì đây có thể là một cách tiếp cận tốt, nhưng một khi bạn cần theo dõi nhiều hơn một hình ảnh chúng ta cần phải dùng đến một cái gì đó thông minh hơn. Nó nằm ngoài phạm vi của hướng dẫn này để xem xét các chiến thuật tải trước hình ảnh, nhưng bạn nên ghi nhớ điều đó.

Nhúng hình ảnh qua dữ liệu: URL

Một cách khác có thể bao gồm hình ảnh là thông qua dữ liệu: url. URL dữ liệu cho phép bạn xác định hoàn toàn một hình ảnh là chuỗi ký tự được mã hóa cơ sở64 trực tiếp trong mã của bạn.

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

Một lợi thế của URL dữ liệu là hình ảnh kết quả có sẵn ngay lập tức mà không cần một chuyến đi vòng khác đến máy chủ. Một lợi thế tiềm năng khác là cũng có thể gói gọn trong một tệp tất cả các CSS, JavaScript, HTML và hình ảnh của bạn, làm cho nó di động hơn cho các vị trí khác.

Một số nhược điểm của phương pháp này là hình ảnh của bạn không được lưu trữ và đối với hình ảnh lớn hơn, URL được mã hóa có thể trở nên khá dài.

Sử dụng khung từ video

Bạn cũng có thể sử dụng các khung từ một video được trình bày bởi một phần tử

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

3 (ngay cả khi video không hiển thị). Ví dụ: nếu bạn có phần tử

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

3 với ID "MyVideo", bạn có thể làm điều này:

function getMyVideo() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}

Điều này trả về đối tượng

const img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

2 cho video, như được đề cập trước đó, có thể được sử dụng làm nguồn hình ảnh cho khung vẽ.

Vẽ hình ảnh

Khi chúng tôi có một tham chiếu đến đối tượng hình ảnh nguồn của chúng tôi, chúng tôi có thể sử dụng phương thức

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 để kết xuất nó cho khung vẽ. Như chúng ta sẽ thấy sau, phương pháp

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 bị quá tải và có một số biến thể. Ở dạng cơ bản nhất, nó trông như thế này:

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150">canvas>
  body>
html>

7

Vẽ hình ảnh được chỉ định bởi tham số

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150">canvas>
  body>
html>

8 tại tọa độ (

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150">canvas>
  body>
html>

9,

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

0).

Lưu ý: Hình ảnh SVG phải chỉ định chiều rộng và chiều cao trong phần tử gốc. SVG images must specify a width and height in the root

Ví dụ: Một biểu đồ dòng đơn giản

Trong ví dụ sau, chúng tôi sẽ sử dụng một hình ảnh bên ngoài làm phông nền cho một biểu đồ đường nhỏ. Sử dụng phông nền có thể làm cho tập lệnh của bạn nhỏ hơn đáng kể vì chúng tôi có thể tránh được sự cần thiết của mã để tạo nền. Trong ví dụ này, chúng tôi chỉ sử dụng một hình ảnh, vì vậy tôi sử dụng trình xử lý sự kiện

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

1 của đối tượng hình ảnh để thực hiện các câu lệnh vẽ. Phương pháp

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 đặt bối cảnh ở tọa độ (0, 0), là góc trên cùng bên trái của khung vẽ.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="180" height="150">canvas>
  body>
html>

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

Biểu đồ kết quả trông như thế này:

Ảnh chụp màn hình	Mẫu sống

Quy mô

Biến thể thứ hai của phương thức

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 thêm hai tham số mới và cho phép chúng tôi đặt hình ảnh được chia tỷ lệ trên vải.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

4

Điều này bổ sung các tham số

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

5 và

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

6, chỉ ra kích thước để mở rộng hình ảnh khi vẽ nó lên khung vẽ.

Ví dụ: ốp lát một hình ảnh

Trong ví dụ này, chúng tôi sẽ sử dụng một hình ảnh làm hình nền và lặp lại nó nhiều lần trên vải. Điều này được thực hiện bằng cách lặp và đặt các hình ảnh tỷ lệ ở các vị trí khác nhau. Trong mã bên dưới, vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 đầu tiên lặp lại trên các hàng. Vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 thứ hai lặp lại trên các cột. Hình ảnh được chia tỷ lệ thành một phần ba kích thước ban đầu của nó, là 50x38 pixel.

Lưu ý: Hình ảnh có thể trở nên mờ khi mở rộng hoặc sần sùi nếu chúng bị thu nhỏ quá nhiều. Tỷ lệ có lẽ tốt nhất là không được thực hiện nếu bạn có một số văn bản trong đó cần duy trì khả năng. Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.drawImage(img, j * 50, i * 38, 50, 38);
      }
    }
  };
  img.src = 'rhino.jpg';
}

Canvas kết quả trông như thế này:

Ảnh chụp màn hình	Mẫu sống

Quy mô

Biến thể thứ hai của phương thức

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 thêm hai tham số mới và cho phép chúng tôi đặt hình ảnh được chia tỷ lệ trên vải.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>

0

Điều này bổ sung các tham số

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

5 và

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

6, chỉ ra kích thước để mở rộng hình ảnh khi vẽ nó lên khung vẽ.

Ví dụ: ốp lát một hình ảnh

Hướng dẫn what is image () in javascript? - hình ảnh () trong javascript là gì?

Trong ví dụ này, chúng tôi sẽ sử dụng một hình ảnh làm hình nền và lặp lại nó nhiều lần trên vải. Điều này được thực hiện bằng cách lặp và đặt các hình ảnh tỷ lệ ở các vị trí khác nhau. Trong mã bên dưới, vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 đầu tiên lặp lại trên các hàng. Vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 thứ hai lặp lại trên các cột. Hình ảnh được chia tỷ lệ thành một phần ba kích thước ban đầu của nó, là 50x38 pixel.

Lưu ý: Hình ảnh có thể trở nên mờ khi mở rộng hoặc sần sùi nếu chúng bị thu nhỏ quá nhiều. Tỷ lệ có lẽ tốt nhất là không được thực hiện nếu bạn có một số văn bản trong đó cần duy trì khả năng.

Canvas kết quả trông như thế này:

Cắt lát

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    div>
  body>
html>

function draw() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // Draw slice
  ctx.drawImage(document.getElementById('source'),
                33, 71, 104, 124, 21, 20, 87, 104);

  // Draw frame
  ctx.drawImage(document.getElementById('frame'), 0, 0);
}

Biến thể thứ ba và cuối cùng của phương thức

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

6 có tám tham số ngoài nguồn hình ảnh. Nó cho phép chúng tôi cắt ra một phần của hình ảnh nguồn, sau đó mở rộng quy mô và vẽ nó trên vải của chúng tôi.

Ảnh chụp màn hình	Mẫu sống

Quy mô

Biến thể thứ hai của phương thức const img = new Image(); // Create new img element img.addEventListener('load', () => { // execute drawImage statements here }, false); img.src = 'myImage.png'; // Set source path 6 thêm hai tham số mới và cho phép chúng tôi đặt hình ảnh được chia tỷ lệ trên vải.

Điều này bổ sung các tham số

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

5 và

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

6, chỉ ra kích thước để mở rộng hình ảnh khi vẽ nó lên khung vẽ.

Ví dụ: ốp lát một hình ảnh

Trong ví dụ này, chúng tôi sẽ sử dụng một hình ảnh làm hình nền và lặp lại nó nhiều lần trên vải. Điều này được thực hiện bằng cách lặp và đặt các hình ảnh tỷ lệ ở các vị trí khác nhau. Trong mã bên dưới, vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 đầu tiên lặp lại trên các hàng. Vòng lặp

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'backdrop.png';
}

7 thứ hai lặp lại trên các cột. Hình ảnh được chia tỷ lệ thành một phần ba kích thước ban đầu của nó, là 50x38 pixel.

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

0

Và đây là một số CSS để làm cho mọi thứ trông đẹp:

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

1

Buộc tất cả lại với nhau là JavaScript vẽ các hình ảnh đóng khung của chúng tôi:

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

2

Kiểm soát hành vi tỷ lệ hình ảnh

Như đã đề cập trước đây, hình ảnh tỷ lệ có thể dẫn đến các tạo tác mờ hoặc khối do quá trình chia tỷ lệ. Bạn có thể sử dụng thuộc tính

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    div>
  body>
html>

1 của bối cảnh bản vẽ để kiểm soát việc sử dụng các thuật toán làm mịn hình ảnh khi chia tỷ lệ hình ảnh trong bối cảnh của bạn. Theo mặc định, đây là

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
    <div style="display:none;">
      <img id="source" src="rhino.jpg" width="300" height="227" />
      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
    div>
  body>
html>

2, có nghĩa là hình ảnh sẽ được làm mịn khi chia tỷ lệ. Bạn có thể vô hiệu hóa tính năng này như thế này:

const img = new Image();   // Create new img element
img.addEventListener('load', () => {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

3

" Trước
Tiếp theo "

Loại hình ảnh trong JavaScript là gì?

Đối tượng hình ảnh đại diện cho phần tử HTML.HTML element.

Việc sử dụng phần tử hình ảnh là gì?

Mô hình nội dung: trống!Thẻ được sử dụng để kết hợp đồ họa nội tuyến (thường là biểu tượng hoặc đồ họa nhỏ) vào tài liệu HTML.Yếu tố này không nhằm mục đích nhúng văn bản HTML khác.to incorporate in-line graphics (typically icons or small graphics) into an HTML document. This element is NOT intended for embedding other HTML text.

Bạn có thể đặt hình ảnh trong JavaScript không?

Thật vậy, một cách dễ dàng để chèn hình ảnh vào trình chỉnh sửa web JavaScript Froala là sao chép một hình ảnh vào bảng tạm và dán nó vào một vị trí bạn chọn.Phím tắt để dán hình ảnh là Ctrl + v. Nếu bạn là người dùng Mac, thì bạn có thể sử dụng phím tắt CMD + V.copy an image to a clipboard and paste it into a position of your choice. The keyboard shortcut for pasting an image is Ctrl + v. If you are a Mac user, then you can use ⌘ Cmd + v shortcut.

Hình ảnh Dom là gì?

The Image Object in HTML DOM is used to represent the HTML < image > element. This tag is used to set or get the properties of < image > element. This element can be accessed by using getElementById() method.

programming javascript New Image JS HTMLImageElement Canvas image Canvas load image Image complete Image HTML

Hướng dẫn what is image () in javascript? - hình ảnh () trong javascript là gì?

Nhận hình ảnh để vẽ

Sử dụng hình ảnh từ cùng một trang

Sử dụng hình ảnh từ các miền khác

Sử dụng các yếu tố canvas khác

Tạo hình ảnh từ đầu

Nhúng hình ảnh qua dữ liệu: URL

Sử dụng khung từ video

Vẽ hình ảnh

Ví dụ: Một biểu đồ dòng đơn giản

Quy mô

Ví dụ: ốp lát một hình ảnh

Quy mô

Canvas kết quả trông như thế này:

Kiểm soát hành vi tỷ lệ hình ảnh

Loại hình ảnh trong JavaScript là gì?

Việc sử dụng phần tử hình ảnh là gì?

Bạn có thể đặt hình ảnh trong JavaScript không?

Hình ảnh Dom là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội