কীভাবে ক্যানভাসে চিত্র যুক্ত করা যায়

Question

আমি এইচটিএমএলে নতুন ক্যানভাস উপাদানটি নিয়ে কিছুটা পরীক্ষা করছি।

আমি কেবল ক্যানভাসে একটি চিত্র যুক্ত করতে চাই তবে এটি কোনও কারণে কার্যকর হয় না।

আমার কাছে নিম্নলিখিত কোড রয়েছে:

এইচটিএমএল

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

সিএসএস

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

জাতীয়

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

চিত্রটি বিদ্যমান এবং আমি কোনও জাভাস্ক্রিপ্ট ত্রুটি পাই না। চিত্রটি প্রদর্শিত হয় না।

এটি অবশ্যই সহজ কিছু যা আমি মিস করেছি ...

Answer 1

ছবিটি আঁকার আগে আপনার লোড হওয়া অবধি আপনার অপেক্ষা করা উচিত। পরিবর্তে এটি চেষ্টা করুন:

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

অর্থাৎ চিত্রটির অনলোড লোড কলব্যাকে চিত্রটি আঁকুন।

Comments

@ সোগগার বরং কিছু জিজ্ঞাসা করার জন্য ধন্যবাদ, চেষ্টা করে দেখুন। পুরোপুরি কাজ করে। নিশ্চিত হয়ে নিন যে আপনি প্রথমে উত্সটির img আকার পরীক্ষা করেছেন, অন্যথায় আপনি পুরো ফাংশনটি ব্যবহার না করলে ক্রপ করা হবে context.drawImage(base_image, 0, 0, 200, 200);। এটি 200x200px এর অঙ্কিত অঞ্চল সহ 0 পিএক্স অবস্থান থেকে বেস_ইমগ আঁকবে।

— এম

এটা ঠিক আমার ক্ষেত্রে ছিল। আমি ক্যানভাসে কিছু ব্লব ডেটা লোড করে ব্যবহার করে new Imageভাবছিলাম যে এটি কেন আমাকে সর্বদা পূর্ববর্তী চিত্র দেখাচ্ছে। আমি যদি কোনও ভেরিয়েবল থেকে কোনও চিত্র লোড করি এমনকি ততক্ষণে আমার এখনও অপেক্ষা করতে হবে onload। ধন্যবাদ!

— এক্সেল

কিভাবে ইমেজ শৈলী যুক্ত করবেন?

— সাগর রাওয়াল

Answer 2

ক্যানভাসে চিত্র আঁকার জন্য এখানে নমুনা কোড রয়েছে-

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

উপরের কোডে নির্বাচিত ইমেজ একটি ইনপুট নিয়ন্ত্রণ যা সিস্টেমে চিত্র ব্রাউজ করতে ব্যবহার করা যেতে পারে। দিক অনুপাত বজায় রেখে ক্যানভাসে চিত্র আঁকার জন্য নমুনা কোডের আরও বিশদের জন্য:

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

Answer 3

আমার ক্ষেত্রে, আমি ফাংশন পরামিতিগুলি ভুল করেছিলাম, যা হ'ল:

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

আপনি যদি তাদের হতে আশা করেন

context.drawImage(image, width, height);

আপনি প্রশ্নটিতে বর্ণিত একই প্রভাবগুলি সহ চিত্রটি ক্যানভাসের ঠিক বাইরে রাখবেন।

Answer 4

আপনি .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)
    }
}

কারণটা এখানে

ইতিমধ্যে ক্যানভাস তৈরির পরে আপনি যদি চিত্রটি প্রথম লোড করে থাকেন তবে ক্যানভাস চিত্রটি আঁকার জন্য সমস্ত চিত্রের ডেটা পাস করতে সক্ষম হবে না। সুতরাং আপনাকে প্রথমে চিত্রটির সাথে উপস্থিত সমস্ত ডেটা লোড করতে হবে এবং তারপরে আপনি অঙ্কন চিত্র () ব্যবহার করতে পারেন