1

I am using canvas to draw cropped image with base 64 but the problem is that my code is working on Chrome but it was give me a blank image on Firefox

async function base64SquareCrop(imgbase64, size = 224) {
const img = document.createElement("img");
await img.setAttribute("src", imgbase64);

let width = img.width;
let height = img.height;
const min = Math.min(width, height);
const scale = size / min;
const scaledW = Math.ceil(width * scale);
const scaledH = Math.ceil(height * scale);
const dx = scaledW - size;
const dy = scaledH - size;
canvasImage.width = canvasImage.height = size;
const ctx_img = canvasImage.getContext("2d");
await ctx_img.drawImage(
    img,
    ~~(dx / 2) * -1,
    ~~(dy / 2) * -1,
    scaledW,
    scaledH
);
return canvasImage.toDataURL("image/png");
}
H S
  • 11
  • 1
  • Can you give the beginning of one of those data urls? – Erick T Oliveira Dec 05 '21 at 01:09
  • const canvasImage = document.getElementById("canvasImage"); @ErickTOliveira – H S Dec 05 '21 at 01:13
  • It's not that. Take a look on this [question](https://stackoverflow.com/questions/26373197/base64-image-not-working-in-google-chrome-but-works-in-firefox). Maybe it'll help you. – Erick T Oliveira Dec 05 '21 at 01:16
  • Kindly could you clarify what is missing @ErickTOliveira – H S Dec 05 '21 at 01:22
  • The problem that I got is (await img.setAttribute("src", imgbase64);) not set image src on right way the bas64 is not completed and that is happening on Firefox – H S Dec 05 '21 at 01:33

1 Answers1

0

The header of the base64 could be wrong. As you didn't post the value of the imgbase64 where that problem happens, I can't really tell.

An example of a wrong header is this question.

Erick T Oliveira
  • 124
  • 14