canvas.toDataURL() не возвращает изображение

Ожидание возврата изображения Зеркальное редактирование и возврат черного изображения.canvas.toDataURL() не возвращает изображение

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <img id="canvasImg" alt="Right click to save me!"> 
 
    <!--PLACE WHERE IMAGE MUST BE PUT ANFTER MIRROR--> 
 
    <canvas id="myCanvas" width="1000" height="1000" style="background:#0094ff"></canvas> 
 
    <!--Canvas Element--> 
 
    <script> 
 
    /*Creating Canvas*/ 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 

 
    // translate context to center of canvas 
 
    context.translate(canvas.width/2, canvas.height/2); 
 
    /*center the image*/ 
 

 
    // flip context horizontally 
 
    context.scale(-1, 1); /*mirror image*/ 
 

 

 
    var imageObj = new Image(); 
 
    /*creating image object*/ 
 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
 

 
    imageObj.onload = function() { 
 

 
     context.drawImage(imageObj, -imageObj.width/2, -imageObj.height/2); 
 
     /* draw and center the image*/ 
 
     context.restore(); 
 
     context.save(); 
 
    }; 
 
    var dataURL = canvas.toDataURL("image/jpeg"); 
 
    /* canvas to url */ 
 
    document.getElementById('canvasImg').src = dataURL; 
 
    // using url as source for img with id canvasImg 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-07-23 Dragos Cocos

Есть в основном две проблемы.

1.) Вы конвертируете холст в dataURL еще до того, как холст был нарисован. Добавьте задержку, чтобы увидеть результат.

setTimeout(function(){ 
      var dataURL = canvas.toDataURL("image/jpeg"); 
      console.log(dataURL); 
      /* canvas to url */ 
      document.getElementById('canvasImg').src = dataURL; 
      // using url as source for img with id canvasImg 
    },2000);

2.) Вы загружаете изображение с разных серверов, так что это вызовет проблему безопасности. См. Сообщение об ошибке в консоли. «Uncaught SecurityError: не удалось выполнить« toDataURL »в« HTMLCanvasElement »: теневые холсты могут не экспортироваться».

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

источник

2015-07-23 12:39:34 xxxx

Правильное место должно быть в обратном вызове 'load', а не в тайм-ауте. – Oriol

Спасибо, что это сработало! :) –

Правда. Также вы можете использовать свойство .complete, но оно может не работать со всеми браузерами (особенно firefox). – xxxx

canvas.toDataURL() не возвращает изображение

ответ

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