.toDataURL() сохраняет прозрачное изображение вместо фактического изображения

toDataURL() сохраняет черный накладной/фон, что делается на холсте; но не изображение рисуется на одном холсте по ссылке. Если я рисую только изображение и пытаюсь сохранить его как изображение, прозрачное изображение сохраняется..toDataURL() сохраняет прозрачное изображение вместо фактического изображения

Я исследовал много вещей, но ничего не работало в моем случае.

Image link

Я приложил image для лучшего понимания ...

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Untitled Document</title> 
     <style> 
     </style> 
    </head> 
    <body> 

    <?php 
    $user=$_POST['h']; 
    ?> 

    <canvas id="can" width=250 height=250 ></canvas> 

    <script type="text/javascript"> 

     //first canvas 
     var c = document.getElementById('can'); 
     c.setAttribute('crossOrigin','anonymous'); 
     var ctx = c.getContext("2d",{preserveDrawingBuffer: true}); 

     var img = new Image(); 
     img.addEventListener("load", function() { 
      ctx.drawImage(img, 0, 0); 
     }, false); 
     img.src = '<?php echo $user ?>'; 

     ctx.globalCompositeOperation = "source-over"; 

     ctx.fillStyle = "rgba(0,0,0,0.5)"; 
     ctx.fillRect(0,0,c.width,c.height); 

     var sent = convertToImg(c); 
     document.body.appendChild(sent); 
     console.log(sent); 

     function convertToImg(imgc) { 

      var img = new Image; 
      img.src = imgc.toDataURL("image/png"); 
      return img; 

     } 


    </script> 
    </body> 
    </html>

источник

2016-06-28 Talha Abbas

Функция toDataURL для получения данных: URL-адрес, который имеет кодированное изображение с базой 64. Обратите внимание, что изображение должно быть полностью загружено, или вы просто получите пустое (черное, прозрачное) изображение. – Vicky

вот почему я добавил слушателя событий ... Все в порядке? иначе предложите мне другую технику ... Спасибо! –

загрузка изображения асинхронной, вы можете получить источник после завершения загрузки.

BTW, вы можете использовать canvas.toDataURL напрямую.

источник

2016-06-28 06:40:48 qunshan

Он также не работал. –

.toDataURL() сохраняет прозрачное изображение вместо фактического изображения

ответ

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