Почему не сохраняется картинка из Canvas?

253

26 ноября 2016, 17:48

Add logo добавляет картинку, а Download должен скачивать, но он не работает:

var canvas = document.getElementById('canvas'), 
ctx = canvas.getContext('2d'); 
 
function Up () {//загрузка 
    var ctx = document.getElementById('canvas').getContext('2d'), 
    img = new Image(), 
	src = "http://chu93.aphp.fr/wp-content/blogs.dir/32/files/2015/10/LOGO-YOUTUBE.png"; 
    img.src = src; 
    img.onload = function() { 
		 ctx.drawImage(img, 0, 0, 480, 400); 
    } 
} 
 
function download() {//скачиване 
    var dt = canvas.toDataURL('image/jpeg'); 
    this.href = dt; 
}; 
downloadLnk.addEventListener('click', download, false);

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
</head> 
<body onload="doCanvas()"> 
<button type="button" onclick="Up()" >Add logo</button> 
<a id="downloadLnk" download="img.jpg">Download</a> 
<canvas id="canvas" width="480" height="400"></canvas> 
<script src="config.js"></script>

Answer 1

Нельзя скачивать изображение с canvas, если в него добавлена картинка с другого домена, это нарушение безопасности, насколько я понял

var canvas = document.getElementById('canvas'), 
ctx = canvas.getContext('2d'); 
 
function Up () {//загрузка 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillStyle = '#f90'; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = '#fff'; 
    ctx.font = '60px sans-serif'; 
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15); 
    ctx.font = '26px sans-serif'; 
} 
 
function download() {//скачиване 
    var dt = canvas.toDataURL(); 
    this.href = dt; 
}; 
downloadLnk.addEventListener('click', download, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- HTML --> 
<button type="button" onclick="Up()" >Add logo</button> 
<a id="downloadLnk" download="img.jpg">Download</a> 
<canvas id="canvas" width="480" height="400"></canvas>