Mam problem z działaniem aplikacji na Safari, na wszystkich innych przeglądarkach działa jak powinna.
Mam przycisk(div) który aktywuje ukryty input(file), wgrywamy obrazek z tego file i ma się pojawić w canvas. Na początku miałem problem z niewidocznym input(file) na safari ale uporałem się z tym, plik idzie wgrać ale nie pojawia się w canvas.
Kod:
HTML
<canvas id="mask-canvas" class="mask-canvas-nograb" width="500" height="500"></canvas>
jQuery
$(function() {
$('#mask-load-file').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
$('#mask-canvas').show();
$('#mask-off').show();
$('#mask-preview-canvas').show();
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#mask-canvas')[0];
var canvas2 = $('#mask-preview-canvas')[0];
var context = canvas.getContext('2d');
var context2 = canvas2.getContext('2d');
$img.load(function() {
canvas.width = canvas.width;
context.globalAlpha = 1;
context.drawImage(this, 0, 0, 500, 500);
context2.drawImage(this, 0, 0, 120, 120);
});
}
});
Dodatkowo safari ma problem z powiększaniem tabeli, występują straszne lagi. Tabele powiększam zwiększając width i hight każdego td o 1. W innych przeglądarkach działa normalnie.
Wie ktoś w czym tkwi problem?