#javascript #canvas #html5-canvas #base64 #html2canvas
#javascript #холст #html5-canvas #base64 #html2canvas
Вопрос:
Попробуйте пару дней решить одну проблему, но я не могу понять, почему это невозможно. На холсте нарисованы картинки, но вывод дает неправильный base64. Я не понял, почему. Я только начал, и у меня не было большого опыта работы с javascript. Помогите новичку, кто может.
HTML:
<canvas id="canvas" width="400" height="300"></canvas>
<textarea id="base64" rows="10" cols="80"></textarea>
<img id="image">
JAVASCRIPT
function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; for(var src in sources) { numImages ; } for(var src in sources) { images[src] = new Image();
images[src].onload = function() {
if( loadedImages >= numImages) {
callback(images);
} };
images[src].src = sources[src];}} var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var sources = { a: 'http://www.prairiedogmag.com/wp-content/uploads/2012/08/Cute-Animals-office-bat-4-200x300.jpg', b: 'http://worldnewspress.net/wp-content/uploads/2014/03/happiest-animals-all-time-18-200x300.jpg' }; loadImages(sources, function(images) { context.fillStyle = "red"; context.fillRect(0, 0, 400, 300); context.drawImage(images.a, 0, 0, 200, 300); context.drawImage(images.b, 201, 0, 200, 300); }); var url = document.getElementById('base64').value =document.getElementById('canvas').toDataURL(); document.getElementById('image').src = url;
Ответ №1:
Для выполнения context.toDataURL метода любые изображения, нарисованные на canvas, должны происходить из того же домена, что и код веб-страницы.
В противном случае вы нарушаете междоменную безопасность, и браузер откажется выполнять.toDataURL.
Похоже, вы извлекаете междоменные изображения и, следовательно, не справляетесь с этой проблемой безопасности.
Проверьте безопасность CORS:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Вот пример рабочего кода и демонстрационный пример: http://jsfiddle.net/m1erickson/76xF3 /
В этом примере изображения извлекаются с сервера, который настроен на доставку изображений в междоменном режиме. На сервере необходимо выполнить несколько настроек конфигурации. Также обратите внимание на код: crossOrigin=»анонимный». Это код на стороне клиента, который позволяет использовать изображения из разных источников (сначала сервер должен быть правильно настроен).
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/character1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/character3.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i ) {
var img = new Image();
img.crossOrigin="anonymous";
imgs.push(img);
img.onload = function(){
imagesOK ;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
context.fillStyle = "red";
context.fillRect(0,0,120,110);
context.drawImage(imgs[0], 0, 0, 60, 110);
context.drawImage(imgs[1], 60, 0, 60, 110);
var url = document.getElementById('base64').value =canvas.toDataURL();
document.getElementById('image').src = canvas.toDataURL();
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>The canvas</h4>
<canvas id="canvas" width=120 height=110></canvas>
<h4>The image created from the canvas .toDataURL</h4>
<img id="image">
<h4>The base64 encoded image data</h4>
<textarea id="base64" rows="10" cols="80"></textarea>
</body>
</html>
Комментарии:
1. скрипт не работает, даже если я делаю снимки в той же папке, например, a: ‘1.jpg ‘, б: ‘2.jpg ‘он все равно будет пустой картинкой.png
2. Я добавил рабочий пример к своему ответу. Используете ли вы веб-сервер для доставки кода страницы и ваших изображений. Я спрашиваю, потому что выполнение .html .jpgs из локальной файловой системы (без сервера) не будет удовлетворять междоменным ограничениям. Вам понадобится правильно настроенный сервер, чтобы избежать ограничений. Приветствия!