Помощь с Canvas!!!

[АнонимныйПарень]

Как разшифровать base64 строку?

Вот что есть:

var canvas = document.getElementById('my_canvas'); 
		var context = canvas.getContext('2d');
		var pic = new Image();

		pic.onload = function(){
			canvas.width = pic.width;
			canvas.height = pic.height;
			context.drawImage(pic, 0, 0, pic.width, pic.height);

			context.fillStyle = "black";
			context.font = 'bold 30px sans-serif';
			context.fillText("Autor Famyly", 290, 235);
		};

		pic.src = '../images/account_info/certificates/item_2.jpg';

		var dataURL = canvas.toDataURL("image/png"); //это base64 как его перевести в бинарник?

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

			a.click();
		};

После нужно будет полученый бинарник закинуть в a.href, что-бы пользователь мог скачать CANVAS. Методы btoa, atob не работают! Нужна помощь!

[fearmear.wrk]

Вроде рабоатет.
https://jsfiddle.net/fearmearwrk/0Lxbgtk1/2/
Поменял pic.src на 'https://jsfiddle.net/img/logo.png' и вызвал save_canvas();

[рони]

Вроде рабоатет.

в каком браузере?

[fearmear.wrk]

Проблема в том, что 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,
в Google Chrome сработало

[fearmear.wrk]

Пример с Promise. JSFiddle

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d');

function loadImage(src){
	return new Promise(function(resolve){
  	var pic = new Image();
    pic.onload = function(){
      canvas.width = pic.width;
      canvas.height = pic.height;
      resolve(pic);
    }
    pic.crossOrigin = 'anonymous';
    pic.src = src;
  });
}

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

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

loadImage('http://i.imgur.com/fHyEMsl.jpg').then(drawImage).then(saveImage);

[АнонимныйПарень]

Спасибо, огромное! Но мне нужно что-бы окно "сохранения" вылезало по нажатию на кнопку с id="saver_btn". Что-то никак не могу настроить. Я использую 1 способ с callback'ом

[АнонимныйПарень]

И почему когда я вставляю свой путь к картинке, мне выдает ошибку? Я так понимаю дело в crossОrigin'е? Вот путь к моей картинке ../images/account_info/certificates/item_1.jpg

[laimas]

Я так понимаю дело в crossОrigin'е?

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

[АнонимныйПарень]

Ошибка вылазит!

your_cerificate.html:89 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at file:///D:/Courselogy/tabs/your_cerificate.html:89:26
at drawImage (file:///D:/Courselogy/tabs/your_cerificate.html:78:7)
at Image.pic.onload (file:///D:/Courselogy/tabs/your_cerificate.html:68:9)