На самом деле у меня есть элемент div grid с количеством тегов html, таких как <div>
, <p>, <img>
и преобразование его в холст, а затем base64 для сохранения на сервере по php.
может ли кто-нибудь помочь мне избавиться от этой проблемы. вот мой код https://jsfiddle.net/manish1706/ujx6rh5j/3/
Я не могу иметь изображения, которые находятся в <img/>
.
Все изображения, используемые сценарием, должны находиться под одним и тем же происхождением
Так как ваше изображение является кросс-началом, Html2Canvas не может получить к нему доступ.
Здесь описывается использование прокси для этого.
Сначала спасибо @Justinas за то, что я указал на проблему с перекрестным происхождением, я использовал
html2canvas($(".frameGrid"),
{
useCORS: true,
"proxy":"http://xxxxxx.com/xxxx/timthumb.php", // optional (and if you are not writing this so have to all origin by server side)
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
$('#img-out').append('<img src="'+img+'"/>');
}
});
и для будущего использования я использовал
header('Access-Control-Max-Age:' . 5 * 60 * 1000);
header("Access-Control-Allow-Origin: *");
header('Access-Control-Request-Method: *');
header('Access-Control-Allow-Methods: OPTIONS, GET');
header('Access-Control-Allow-Headers: *');
header("Content-Type: application/javascript");
в моем php файле на стороне сервера.