Cách thêm hình ảnh vào canvas

106

Tôi đang thử nghiệm một chút với phần tử canvas mới trong HTML.

Tôi chỉ muốn thêm một hình ảnh vào canvas nhưng nó không hoạt động vì một số lý do.

Tôi có mã sau:

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

Hình ảnh tồn tại và tôi không gặp lỗi JavaScript. Hình ảnh không hiển thị.

Nó phải là một cái gì đó thực sự đơn giản mà tôi đã bỏ lỡ ...

javascript html canvas

— PeeHaa
nguồn

219

Có lẽ bạn phải đợi cho đến khi hình ảnh được tải trước khi bạn vẽ nó. Hãy thử cái này thay thế:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

Tức là vẽ hình ảnh trong lệnh gọi lại đang tải của hình ảnh.

— Thomas
nguồn

6

@swogger thay vì cảm ơn hãy hỏi bất cứ điều gì, hãy thử. Điều đó hoạt động hoàn hảo. Trước tiên, hãy đảm bảo rằng bạn kiểm tra kích thước img của nguồn, nếu không sẽ bị cắt trừ khi bạn sử dụng đầy đủ chức năng context.drawImage(base_image, 0, 0, 200, 200);. Điều đó sẽ vẽ base_img từ vị trí 0px, với vùng vẽ là 200x200px.

— m3nda

1

Đây chính xác là trường hợp của tôi. Tôi đang tải một số dữ liệu blob vào canvas bằng cách sử dụng new Imagevà tự hỏi tại sao nó luôn hiển thị cho tôi hình ảnh trước đó. Hóa ra ngay cả khi tôi đang tải hình ảnh từ một biến, tôi vẫn phải đợi điều đó onloadxảy ra. Cảm ơn bạn!

— aexl,

Làm thế nào để thêm phong cách hình ảnh?

— Sagar Rawal

6

đây là mã mẫu để vẽ hình ảnh trên canvas-

$("#selectedImage").change(function(e) {

var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;

img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");        

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);
}});

Trong đoạn mã trên đã chọn Hình ảnh là một điều khiển đầu vào có thể được sử dụng để duyệt hình ảnh trên hệ thống. Để biết thêm chi tiết về mã mẫu để vẽ hình ảnh trên canvas trong khi vẫn duy trì tỷ lệ khung hình:

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

— nvivekgoyal
nguồn

1

Trong trường hợp của tôi, tôi đã nhầm lẫn các tham số hàm, đó là:

context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);

Nếu bạn mong đợi họ sẽ

context.drawImage(image, width, height);

bạn sẽ đặt hình ảnh ngay bên ngoài canvas với các hiệu ứng tương tự như mô tả trong câu hỏi.

— Marc
nguồn

0

Bạn phải sử dụng .onload

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d"); 

const drawImage = (url) => {
    const image = new Image();
    image.src = url;
    image.onload = () => {
       ctx.drawImage(image, 0, 0)
    }
}

Đây là lý do tại sao

Nếu bạn đang tải hình ảnh đầu tiên sau khi canvas đã được tạo thì canvas sẽ không thể chuyển tất cả dữ liệu hình ảnh để vẽ hình ảnh. Vì vậy, trước tiên bạn cần tải tất cả dữ liệu đi kèm với hình ảnh và sau đó bạn có thể sử dụng drawImage ()

— Anthony Gedeon
nguồn