कैनवास में छवि कैसे जोड़ें

Question

मैं HTML में नए कैनवास तत्व के साथ थोड़ा प्रयोग कर रहा हूं।

मैं बस एक छवि को कैनवास में जोड़ना चाहता हूं, लेकिन यह किसी कारण से काम नहीं करता है।

मेरे पास निम्नलिखित कोड हैं:

एचटीएमएल

<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

@swogger बजाय कुछ भी पूछने के लिए धन्यवाद, कोशिश करें। यह पूरी तरह से काम किया। सुनिश्चित करें कि आप स्रोत के पहले आकार की जांच करें, अन्यथा जब तक आप पूर्ण फ़ंक्शन का उपयोग नहीं करते हैं, तब तक क्रॉप हो जाएगा context.drawImage(base_image, 0, 0, 200, 200);। यह 200x200px के ड्रॉ क्षेत्र के साथ 0px स्थिति से base_img खींचेगा।

— m3nda

यह वास्तव में मेरा मामला था। मैं कैनवास में कुछ ब्लॉब डेटा लोड कर रहा था new Imageऔर सोच रहा था कि यह हमेशा मुझे पिछली छवि क्यों दिखा रहा है। यहां तक ​​कि अगर मैं एक चर से एक छवि लोड कर रहा हूं, तो भी मुझे लगता है कि मुझे अभी भी होने की प्रतीक्षा करनी onloadहोगी। धन्यवाद!

— aexl

छवि शैली कैसे जोड़ें?

— सागर रावल

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

यहाँ पर क्यों

यदि आप कैनवास लोड करने के बाद पहले इमेज लोड कर रहे हैं तो कैनवास इमेज को खींचने के लिए सभी इमेज डेटा को पास नहीं कर पाएगा। इसलिए आपको सबसे पहले इमेज के साथ आने वाले सभी डेटा को लोड करना होगा और फिर आप drawImage () का उपयोग कर सकते हैं