Экспорт данных изображения из холста HTML приводит к ошибке «Запятнанный холст» или белому изображению
Следующий код обрезает часть изображения. Я хотел бы получить данные изображения для обрезанной области в формате base64, и я попытался сделать это с помощью context.toDataURL():
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
//imageObj.crossOrigin = "anonymous";
imageObj.onload = function () {
// crop from 0,0, to 250,150
var cropX = 0;
var cropY = 0;
var cropWidth = 250;
var cropHeight = 150;
//resize our canvas to match the size of the cropped area
canvas.style.width = cropWidth;
canvas.style.height = cropHeight;
//fill canvas with cropped image
context.drawImage(
imageObj,
cropX, cropY,
cropWidth, cropHeight,
0, 0,
canvas.width, canvas.height
);
}
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
setTimeout(() => {
var dataURL = canvas.toDataURL();
console.info(dataURL);
$("#my_image").attr("scr", dataURL);
}); <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id = "myCanvas"></canvas>
<img id = "my_image" src = "" style = "border:1px solid red;">
</body>
</html>Однако он либо показывает пустое изображение, либо я получаю эту ошибку:
Uncaught DOMException: не удалось выполнить «toDataURL» для «HTMLCanvasElement»: испорченные холсты не могут быть экспортированы.
Что я делаю не так?
«Испорченный холст» содержит данные изображения из домена, который не является вашим доменом. Вы не можете получить доступ к информации об изображении (пиксели).
Найдите CORS — вам не разрешен программный доступ к образу из соображений безопасности.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы пытаетесь сохранить изображение, полученное из внешнего источника. CORS не разрешает этого, если только сайт, с которого было получено изображение, явно не внесён в белый список:
Из соображений безопасности браузеры ограничивают HTTP-запросы из разных источников, инициированные скриптами. Например, XMLHttpRequest и Fetch API следуют политике одного и того же источника. Это означает, что веб-приложение, использующее эти API-интерфейсы, может запрашивать ресурсы только из того же источника, из которого было загружено приложение, если только ответ из других источников не включает правильные заголовки CORS.
Если вам нужно сохранить информацию об изображении, используйте изображение, к которому у вас есть локальный доступ (например, из вашей папки assets или загруженного файла).
другими словами, если я напрямую загружу свое изображение из папки assets, у меня не будет этой проблемы ..?
Да. Локальные образы имеют одинаковое происхождение, поэтому на них не распространяются ограничения безопасности, налагаемые CORS.
@yavg Обратите внимание, что вы можете использовать междоменное изображение, если оно обслуживается с заголовками, разрешающими перекрестное происхождение, а элемент изображения имеет набор свойств crossOrigin. См. developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Используйте свои собственные изображения.