Показать сообщение отдельно
  #4 (permalink)  
Старый 14.07.2017, 23:22
Интересующийся
Отправить личное сообщение для fearmear.wrk Посмотреть профиль Найти все сообщения от fearmear.wrk
 
Регистрация: 14.07.2017
Сообщений: 21

Проблема в том, что pic.onload это асинхронный код, а все ниже написано синхоронно. Соответственно нужно завернуть в callback, а лучше Promise.
var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d');

function loadImage(src, cb){
  var pic = new Image();
  pic.onload = function(){
    canvas.width = pic.width;
    canvas.height = pic.height;
    drawImage(pic, cb);
  }
  pic.crossOrigin = 'anonymous';
  pic.src = src;
}

function drawImage(pic, cb){
  context.drawImage(pic, 0, 0, pic.width, pic.height);	
  context.fillStyle = "black";
  context.font = 'bold 30px sans-serif';
  context.fillText("Autor Famyly", 290, 235);
  cb();
}

function saveImage(dataURL) {
  var a = document.createElement('a');
  a.href = dataURL;
  a.download = 'Certificate';
  a.click();
};

loadImage('http://i.imgur.com/fHyEMsl.jpg', function(){
	saveImage(canvas.toDataURL("image/png"));
});

Последний раз редактировалось fearmear.wrk, 16.07.2017 в 19:45.
Ответить с цитированием