วิธีเพิ่มรูปภาพลงในแคนวาส

ฉันกำลังทดลองกับองค์ประกอบผ้าใบใหม่ใน 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 ภาพไม่ปรากฏ

มันต้องเป็นอะไรที่เรียบง่ายจริงๆที่ฉันพลาด ...

บางทีคุณอาจต้องรอจนกว่าภาพจะโหลดก่อนที่จะวาด ลองสิ่งนี้แทน:

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

คือวาดภาพใน onload callback ของภาพ

นี่คือโค้ดตัวอย่างในการวาดภาพบนผ้าใบ -

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

ในกรณีของฉันฉันเข้าใจผิดว่าพารามิเตอร์ฟังก์ชันซึ่ง ได้แก่ :

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

หากคุณคาดหวังให้พวกเขาเป็น

context.drawImage(image, width, height);

คุณจะวางภาพไว้นอกผืนผ้าใบโดยให้เอฟเฟกต์เดียวกันกับที่อธิบายไว้ในคำถาม

คุณต้องใช้. 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 ()