Як додати зображення до полотна

106

Я трохи експериментую з новим елементом canvas в HTML.

Я просто хочу додати зображення до полотна, але воно чомусь не працює.

У мене є такий код:

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);
}

Зображення існує, і я не отримую помилок JavaScript. Зображення просто не відображається.

Це повинно бути щось справді просте, що я пропустив ...

javascript html canvas

— PeeHaa
джерело

219

Можливо, вам доведеться почекати, поки завантажується зображення, перш ніж його намалювати. Спробуйте це замість цього:

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);
  }
}

Тобто намалюйте зображення в зворотному режимі завантаження зображення.

— Томас
джерело

6

@swogger, скоріше дякую, запитайте що-небудь, спробуйте. Це спрацювало чудово. Переконайтеся, що спочатку перевіряєте розмір джерела джерела, інакше він буде обрізаний, якщо ви не використовуєте повну функцію context.drawImage(base_image, 0, 0, 200, 200);. Це дозволить намалювати base_img з позиції 0px з площею малювання 200x200px.

— м3нда

1

Це був саме мій випадок. Я завантажував деякі дані крапки в полотно, використовуючи new Imageі цікавився, чому він завжди показував мені попереднє зображення. Виявляється, навіть якщо я завантажую зображення зі змінної, мені все одно доводиться чекати, коли це onloadстанеться. Дякую!

— aexl

Як додати стиль зображення?

— Сагар Равал

6

ось зразок коду для малювання зображення на полотні-

$("#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);
}});

У наведеному вище коді selectedImage - це вхідний елемент керування, який можна використовувати для перегляду зображень у системі. Для отримання більш детальної інформації про зразок коду для малювання зображення на полотні, зберігаючи співвідношення сторін:

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

— nvivekgoyal
джерело

1

У моєму випадку я помилився з параметрами функції, які є:

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

Якщо ви очікуєте їх

context.drawImage(image, width, height);

ви розміщуєте зображення просто біля полотна з тими ж ефектами, що описані в питанні.

— Марк
джерело

0

Ви повинні використовувати .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)
    }
}

Ось чому

Якщо ви завантажуєте зображення спочатку після того, як полотно вже створено, воно не зможе передати всі дані зображення для малювання зображення. Тож спочатку потрібно завантажити всі дані, що надійшли із зображенням, а потім можна використовувати drawImage ()

— Ентоні Гедеон
джерело