Добрый день! Нужно сгенерировать битовую карту изображения и в формате json передать на API. Проблема возникает с функцией toDataURL(), которая не поддерживается в IE8.
Вот сам код:
var imgElem, widthElem, heightElem;
function upload_file(this_) {
var fakepath = $(this_).val();
fakepath = fakepath.replace(/\/,/g);
$("#show_img").attr("src", fakepath);
imgElem = document.getElementById('show_img');
widthElem = document.getElementById('show_img').width;
heightElem = document.getElementById('show_img').height;
};
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = widthElem;
canvas.height = heightElem;
var G_vmlCanvasManager;
// code for IE browsers
if (window.G_vmlCanvasManager) {
canvas = window.G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
}
// Non IE browsers
else {
var ctx = canvas.getContext('2d');
}
// Copy the image contents to the canvas
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/jpeg:base64");
return dataURL;
}
function loadImg() {
var myBase64EncodedData = getBase64Image(imgElem);
$('#base64').val(myBase64EncodedData);
var send_url = $(".fileinput").attr('data-url');
$.ajax({
url: send_url,
dataType: 'json',
data: {
'imagedata': myBase64EncodedData
},
type: 'POST',
success: function (data) {
console.log(data);
},
error: function (x, y, z) {
console.log(x + '\n' + y + '\n' + z);
}
});
};
И есть тело страницы:
<input class="fileinput" data-url="my-url" name="userpic" type="file" onchange="upload_file(this)"/><br />
<img id="show_img" /><br />
<input type="button" id="loadImg" value="Load" onclick="loadImg()"/>
<textarea id="base64" style="width:100%;height:400px;"></textarea>
Вопрос - как все-таки заставить ослика работать?