Tuvale nasıl resim eklenir

106

HTML'deki yeni tuval öğesi ile biraz deney yapıyorum.

Sadece tuvale bir resim eklemek istiyorum ama nedense işe yaramıyor.

Takip koduna sahibim:

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

Resim var ve JavaScript hatası almıyorum. Görüntü görünmüyor.

Kaçırdığım çok basit bir şey olmalı ...

javascript html canvas

— PeeHaa
kaynak

219

Belki de çizmeden önce resmin yüklenmesini beklemelisin. Bunun yerine şunu deneyin:

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

Yani görüntüyü, görüntünün yüklenme geri aramasına çizin.

— Thomas
kaynak

6

@swogger bir şey sormak yerine teşekkür ederim, deneyin. Bu mükemmel çalıştı. Önce kaynağın img boyutunu kontrol ettiğinizden emin olun, aksi takdirde tam işlevi kullanmadığınız sürece kırpılacaktır context.drawImage(base_image, 0, 0, 200, 200);. Bu, 200x200 piksellik çizim alanıyla 0px konumundan base_img çizecektir.

— m3nda

1

Bu tam olarak benim durumumdu. Bazı blob verilerini tuvale yüklüyordum new Imageve neden her zaman bana önceki bir resmi gösterdiğini merak ediyordum. Bir değişkenden bir görüntü yüklesem bile yine de gerçekleşmesini beklemem onloadgerekiyor. Teşekkür ederim!

— aexl

Görüntü stili nasıl eklenir?

— Sagar Rawal

6

İşte tuval üzerine resim çizmek için örnek kod-

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

Yukarıdaki kodda selectedImage, görüntüyü sistemde taramak için kullanılabilen bir giriş denetimidir. En boy oranını korurken tuval üzerine resim çizmek için örnek kodla ilgili daha fazla ayrıntı için:

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

— nvivekgoyal
kaynak

1

Benim durumumda, fonksiyon parametrelerini yanlış anladım:

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

Onların olmasını bekliyorsan

context.drawImage(image, width, height);

sorudakiyle aynı efektlerle resmi tuvalin hemen dışına yerleştireceksiniz.

— Marc
kaynak

0

.Onload kullanmanız gerekir

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

İşte Nedeni

Görüntüyü, tuval zaten oluşturulduktan sonra yüklüyorsanız, tuval, görüntüyü çizmek için tüm görüntü verilerini iletemez. Bu nedenle, önce görüntüyle birlikte gelen tüm verileri yüklemeniz gerekir ve ardından drawImage () öğesini kullanabilirsiniz.

— Anthony Gedeon
kaynak