HTML Canvas не рисует BMP -изображение ⇐ Html

[Anonymous]

Я пытаюсь обрезать изображение BMP и нарисовать его внутри HTML -холста, а затем нарисую на нем несколько линий. Проблема заключается в том, что холст не рисует изображение, но он рисует строки. 1000x1000px изображения внутри Canvas (так что оно должно быть полностью черным):
display.html:

Код: Выделить всё

Test







Canvas is not supported.

display.js:

Код: Выделить всё

function displayTraj(){
var map = new Image();
map.src = "../db/France11.bmp";
map.onload = draw;
}

let draw = ( e ) => {
var canvas = document.getElementById('myCanvas');
canvas.width = 1000;
canvas.height = 1000;
canvas.getContext('2d').drawImage(e.target,
0, 0,
1000, 1000,
0, 0,
1000, 1000
);
}

Получающаяся страница:

Мы видим, что Canvas все еще пустые, но в разделе «Сетеви». из 1000x1000px, поэтому функция рисования была выполнена. < /p>
Я пытался: < /p>

• разные размеры => не работает < /li>
  Маленькие случайные изображения PNG => works < /li>
  Показать целую BMP внутри «Img». />

Каждое решение в веб -странице рассказывает о ожидании, когда изображение будет загружено сервером, которое выполняется по линии «map.onload» (я также пробовал с Window.AddeventListener).
Я в Firefox 140.0.4 на Ubuntu. /> Я изменил размещение BMP в 5196x5196px, и он работает, я могу отобразить весь BMP или его часть. Таким образом, проблема возникает из размера исходного изображения, возможно, функция DrawMage не обрабатывает его, как говорит @Kikosoftware. Проблема в том, что мне нужно поработать над исходным изображением, поэтому я постараюсь найти альтернативу для рисования и вернуться.

Код: Выделить всё

async function drawCanvas() {
const canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
image = new Image();
image.src = "./France.bmp";

await image.decode();

// Wait for the sprite sheet to load
try{
image.onload = () => {
Promise.all([
// Cut out two sprites from the sprite sheet
createImageBitmap(image, 0, 0, 32, 32)
]).then((sprites) => {
// Draw each sprite onto the canvas
ctx.drawImage(sprites[0], 0, 0);
});
};
}
catch (error){
console.log("Error is ", error);
}
}

Но «await image.decode» возвращает «недопустимые данные кодируемого изображения», и если я удалю его, CreateImageBitmap возвращает «объект непригодный» на объекте карты, потому что он не завершен, несмотря на обещание.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -bmp-image