To get a data URL containing image data of a snapshot of the canvas I'm using toDataURL function in my application which works fine in browsers(including safari) and anroid devices but not working in iphone/ipad(on any browser).
It's throwing me a type error img.toDataURL is not a function. When I'm trying to load the image explicitly the function never triggers in iphone/ipad.
Here is my code snippet
_drawImage(img) {
// console.log("drawimage");
this.setState({ isGenerating: true });
if (img) {
fetch(img)
.then((r) => r.blob())
.then((blob) => {
loadImage(
blob,
(img) => {
if (img.type === "error") {
this.setState({ error: true });
// console.log(img, "Error loading image ");
} else {
const image = new window.Image();
const height = this.props.height;
const width = this.props.width;
console.log(img.height, img.width)
// image.src = img.toDataURL('image/jpeg');
if(image.complete){
let offsetX,
offsetY,
renderableWidth = image.width,
renderableHeight = image.height;
console.log(image.width, image.height)
var imageDimensionRatio = image.width / image.height;
var canvasDimensionRatio = width / height;
console.log(
"ratios of image and canvas =",
imageDimensionRatio,
canvasDimensionRatio
);
if (imageDimensionRatio < canvasDimensionRatio) {
renderableHeight = height;
renderableWidth =
image.width * (renderableHeight / image.height);
offsetX = (width - renderableWidth) / 2;
offsetY = 0;
} else if (imageDimensionRatio > canvasDimensionRatio) {
renderableWidth = width;
renderableHeight =
image.height * (renderableWidth / image.width);
offsetX = 0;
offsetY = (height - renderableHeight) / 2;
} else {
renderableHeight = height;
renderableWidth = width;
offsetX = 0;
offsetY = 0;
}
console.log(renderableHeight, renderableWidth)
this.setState(
{
image: image,
renderableHeight,
renderableWidth,
imgHeight: image.height,
imgWidth: image.width,
offsetX,
offsetY,
height,
width,
},
() => {
this.setState({ isGenerating: false });
}
);
}
image.src = img.toDataURL('image/jpeg');
}
},
{
orientation: true,
canvas: true,
}
);
});
}
}