Add logo adds a picture, and Download should download, but it does not work:

 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>

    1 answer 1

    You cannot download a canvas image if you added a picture from another domain to it, this is a security breach, as I understand it

     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>