Не опознан формат файла при скачивании canvas javascript

163

10 января 2019, 22:50

Собственно есть скрипт накладывания текста на изображение. Все вроде как работает. Однако проблема со скачиванием холста. Файл скачивается, однако при попытке открыть - тот же ACDsee пишет что формат файла не распознан. Фоновая картинка на том же домене. Прошу помощи..

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>TEST</title> 
 
 
<script> 
window.onload=function(){ 
var img=new Image(); 
img.onload=function(){run()}; 
img.src='https://site.ru/blank.jpg'; 
var btn = document.getElementById("btn-download"); 
 
btn.addEventListener("click", function (e) { 
    var dataURL = canvas.toDataURL('image/png'); 
    btn.href = dataURL; 
}); 
 
function run(){ 
var ctx=document.getElementById('cnv').getContext('2d'); 
ctx.drawImage(img,0,0); 
ctx.textAlign = "left"; 
ctx.font = "20px Arial"; 
ctx.fillStyle = "white"; 
ctx.fillText("Имя фамилия",50,57);}; 
} 
 
 
</script> 
 
<canvas id=cnv width=640 height=400></canvas> 
<a href="" class="button" id="btn-download" download="my-file-name.png">Download</a>

Answer 1

Есть вероятность, что у вас проблема с CORS.

Потому что приведенный вами код работает, как ожидается, когда картинка устанавливается с помощью base64.

var imageBase64 = 'data:image/png;base64,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' 
window.onload = function() { 
  var img = new Image(); 
  img.crossorigin = true; 
  var canvas = document.getElementById('cnv'); 
  var ctx = canvas.getContext('2d'); 
  img.onload = function() { 
    run() 
  }; 
  img.src = imageBase64; 
  var btn = document.getElementById("btn-download"); 
 
  btn.addEventListener("click", function(e) { 
    var dataURL = canvas.toDataURL('image/png'); 
    btn.href = dataURL; 
  }); 
 
  function run() { 
    ctx.drawImage(img, 0, 0); 
    ctx.textAlign = "left"; 
    ctx.font = "20px Arial"; 
    ctx.fillStyle = "red"; 
    ctx.fillText("Имя фамилия", 50, 57); 
  }; 
}

<canvas id="cnv" width="640" height="400"></canvas> 
<a href="" class="button" id="btn-download" download="my-file-name.png">Download</a>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Якорь картинкой

Нужно сделать якорь на центральную часть страницыПричем якорь должен быть реализован картинкой, при нажатии на которую тебя кидает вниз

168

javascript

async не работает с локальными файлами

Почему async не работает с файлами с компьютера, но работает, если подключить скрипт через какой-либо сайт?

196

javascript

JavaScript Поиск в массиве

Есть массив:

159

javascript

На мобильной версии сайта не работает меню на Bootstrap 4

В мобильной версии меню не работает, в п версии все работаетНе добавляет класс active, игнорируется

193