Загрузка изображений в холст (HTML/Javascript)

Я знаю, что это было обсуждено ранее, и я прочитал много статей и попробовал то, что было заявлено как работающее, поэтому не отбрасывайте мой вопрос сразу, пожалуйста.Загрузка изображений в холст (HTML/Javascript)

Я пытаюсь загрузить различные изображения в холст унифицированного размера. Это может быть одно изображение или несколько изображений, но я обрабатываю одно изображение за раз.

Вот основной код (HTML/JS/PHP):

<?php 
    if ($record->photo != "") //make the first canvas 
    { 
    list($width, $height, $type) = getimagesize($record->photo); 
    echo "Width: " .$width. "<br />"; 
    echo "Height: " .$height. "<br />"; 
    ?> 
    <canvas id="my_canvas" width="341" height = "256"></canvas> 

    <body> 
    <script type="text/javascript" src="common.js"></script> 
    <script type="text/javascript"> 
    var img_src = "<?php echo $record->photo;?>"; 
    var width = "<?php echo $width;?>"; 
    var height = "<?php echo $height;?>"; 

    make_canvas('my_canvas', img_src, width, height); 
    </script> 

    <?php 
    }//if 1

Похожие блок для canvas2, 3 и т.д. с закрывающим тегом в конце.

Вот версии функции make_canvas(), которые «как-то» работают. Это означает, что они иногда делают некоторые снимки при загрузке, но могут улучшаться при обновлении. Когда отображается более одного изображения, я никогда не получаю его работу должным образом.

Version 1 - непоследовательной и кэширует последнее изображение:

function make_canvas(id, src, width, height) 
{ 

    if (width > 341) 
    { 
     var new_width = 341; 
     var ratio = new_width/width; 
     var new_height = Math.round(height * ratio); 
    } 
    else 
    { 
     var new_width = width; 
     var new_height = height; 
    } 
    document.write("id: " + id + "<br />"); 
    document.write("src: " + src + "<br />"); 
    document.write("new_height: " + new_height + "<br />"); 

    var canvas = document.getElementById(id), 
    context = canvas.getContext('2d');  
    base_image = new Image(); 
    //base_image.src = ''; 

    base_image.onload = function(){ 
     context.drawImage(base_image,0,0,new_width, new_height); 
    } 

    base_image.src = src; 
    }

Версия 2: может загрузить одно изображение и кэширует его на обновления

function make_canvas2(id, src, width, height) 
{ 

    if (width > 341) 
    { 
     var new_width = 341; 
     var ratio = new_width/width; 
     var new_height = Math.round(height * ratio); 
    } 
    else 
    { 
     var new_width = width; 
     var new_height = height; 
    } 
    document.write("id: " + id + "<br />"); 
    document.write("src: " + src + "<br />"); 
    document.write("new_height: " + new_height + "<br />"); 

    var canvas = document.getElementById(id), 
    context = canvas.getContext('2d');  
    base_image = new Image(); 
    base_image.src = ''; 
    base_image.addEventListener("load", function() { 
    // execute drawImage statements here 
    context.drawImage(base_image,0,0,new_width, new_height); 
}, false); 
    //base_image.onload = function(){ }; 

    base_image.src = src; 

}

Я попытался добавить base_image.complete в IF условие для onload или для цикла WHILE внутри функции onload, но никогда не может достичь нескольких изображений, отображаемых правильно при первой загрузке. Буду признателен за любые рабочие примеры, желательно похожие на выше и без jQuery.

источник

2017-01-24 user2097141

Я justed отметил, что вы случайно определили глобальный образ-объект, написав это:

base_image = new Image();

Вот почему последнее изображение перезаписывает все прежние образы, будучи загружен.

var base_image = new Image(); // this is fixed

Надеюсь, что этот пример поможет вам, вы можете больше всего работать через js. Просто нажмите кнопку «запустить фрагмент кода» -Кнопка и скажите мне, кастрированный баран это то, что вы хотите:

var imageUrls = [ 
 
    'http://animal-dream.com/data_images/koala/koala6.jpg', 
 
    'https://i.stack.imgur.com/20n3G.jpg', 
 
    'https://upload.wikimedia.org/wikipedia/de/d/db/Das_G%C3%BCtermarktgleichgewicht_bei_einkommensabh%C3%A4ngiger_Nachfrage.jpg' 
 
]; 
 
var canvasWidth = 341; 
 
var canvasHeight = 256; 
 

 
function create_canvas(id, width, height) 
 
{ 
 
    var canvas = document.createElement('canvas'); 
 
    canvas.setAttribute('id',id); 
 
    canvas.setAttribute('width',width); 
 
    canvas.setAttribute('height',height); 
 
    document.getElementById('canvasCon').appendChild(canvas); 
 
} 
 

 
function make_canvas(id, src, width, height) 
 
{ 
 
    if (width > 341) 
 
    { 
 
    var new_width = 341; 
 
    var ratio = new_width/width; 
 
    var new_height = Math.round(height * ratio); 
 
    } 
 
    else 
 
    { 
 
    var new_width = width; 
 
    var new_height = height; 
 
    } 
 
    document.getElementById('msg').innerHTML += 'id: ' + id + '<br />src: ' + src + '<br /> new_height: ' + new_height + '<br />'; 
 
    var canvas = document.getElementById(id), 
 
    context = canvas.getContext('2d'); 
 
    var base_image = new Image(); 
 
    base_image.onload = function() { 
 
    context.drawImage(base_image, 0, 0, new_width, new_height); 
 
    } 
 
    base_image.src = src; 
 
} 
 

 
imageUrls.forEach(function(url,index){ 
 
    var canvasId = 'my_canvas'+(index+1); 
 
    create_canvas(canvasId,canvasWidth, canvasHeight); 
 
    make_canvas(canvasId, url, canvasWidth, canvasHeight); 
 
});

<div id="msg"></div> 
 
<div id="canvasCon"></div>

источник

2017-01-24 12:04:06 Blauharley

Blauharley, вы спасли мне дни, которые разочарования! Небольшие вещи (var) имеют большое значение, все начало работать с версией 1 моего make_canvas() (еще не проверенный кросс-браузер). И да, ваш код делает то, что мне нужно. Большое спасибо! – user2097141

Добро пожаловать! Пожалуйста, отметьте мой ответ так, чтобы это стало ясно. Спасибо. – Blauharley

Загрузка изображений в холст (HTML/Javascript)

ответ

Смежные вопросы