كيفية إحضار صورة عن بعد لعرض في قماش؟

StackOverflow https://stackoverflow.com/questions/164181

  •  03-07-2019
  •  | 
  •  

سؤال

وكيف يمكنني جلب الصور من الخادم؟

ولقد حصلت على هذا الشيء من التعليمات البرمجية التي تسمح لي أن أوجه بعض الصور على قماش. 

<html>
  <head>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext('2d');

        for (i=0;i<document.images.length;i++){
          ctx.drawImage(document.images[i],i*150,i*130);
        }
    }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canv" width="1024" height="1024"></canvas>
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif">
    <img src="http://l.yimg.com/a/i/ww/beta/y3.gif">
    <img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png">
  </body>
</html>

وبدلا من حلقات على document.images، أود أن جلب باستمرار الصور من الخادم. 

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
هل كانت مفيدة؟

المحلول

استخدم المدمج في جافا سكريبت الكائن بالصور .

وهنا مثال بسيط جدا لاستخدام الكائن صورة: 

myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

وهنا هو آلية أكثر ملاءمة لسيناريو الخاص بك من التعليقات على هذه الإجابة.

olliej !

<اقتباس فقرة>   

ومن الجدير بالذكر أنه لا يمكنك أن تطلب بشكل متزامن مورد، لذلك يجب عليك القيام به في الواقع شيئا على غرار: 

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

نصائح أخرى

إذا كنت تريد رسم صورة إلى قماش تحتاج أيضا إلى الانتظار لصورة لتحميل في الواقع، وبالتالي فإن الشيء الصحيح للقيام سيكون: 

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

لإضافة صورة في جافا سكريبت يمكنك القيام بما يلي: 

myimage = new Image()
myimage.src='http://....'

إذا صورة على الصفحة الخاصة بك لديه ID "IMAGE1"، يمكنك تعيين SRC من IMAGE1 إلى myimage.src.

ولقد وجدت أن استخدام نماذج من المفيد جدا هنا. إذا لم تكن على دراية بها، والنماذج هي جزء من الكائنات التي تسمح لك لتحديد المتغيرات و / أو الأساليب الخاصة لهم.

وتفعل شيئا مثل: 

Image.prototype.position = {
    x: 0,
    y: 0
}

Image.prototype.onload = function(){
    context.drawImage(this, this.position.x, this.position.y);
}

ويسمح لك لتحديد موقف ورسم لوحة زيتية على قماش من دون الكثير من العمل.

وو"موقف" متغير يسمح لك لتحريكه على القماش.
لذلك فمن الممكن القيام به: 

var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

ووسوف صورة رسم تلقائيا إلى قماش في (20200).

والنموذج يعمل من أجل كل HTML وجافا سكريبت الأجسام الأم. لذلك 

Array.prototype.sum = function(){
    var _sum = 0.0;
    for (var i=0; i<this.length; i++){
        _sum += parseFloat(this[i]);
    }
    return _sum;
}

ويعطي وظيفة جديدة لجميع المصفوفات.

ولكن، 

var Bob;
Bob.Prototype.sayHi = function(){
    alert("Hello there.");
}

ولن تعمل (لأسباب متعددة، ولكن سأتحدث فقط عن النماذج).
النموذج هو "الملكية" من نوع ما، والتي تحتوي على كافة الممتلكات الخاصة بك / الطرق التي المدخلات، وبالفعل في كل من HTML وجافا سكريبت الأجسام الأم (وليس تلك التي تجعل).
نماذج تسمح أيضا لسهولة الاستدعاء (يمكنك القيام به "myImg.position.x" بدلا من "myImg.prototype.position.x").

وعلاوة على ذلك، إذا كنت تقوم بتعريف لك متغير، يجب عليك القيام به هو أكثر من هذا القبيل. 

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}

إذا كنت تستخدم مسج يمكنك القيام به: 

$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');

ويمكنك أيضا إضافة الاعراض وأي شيء آخر في العلامة img.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top