While probably not an ionic specific question, this is behaving differently on different devices. On my phone (Samsung Galaxy S7 - it works perfect, but on the tablet Samsung tablet it doesn’t).
Here’s the situation.
I have a canvas, I export the canvas to dataURL and save it to the photo library
this.photoLibrary.saveImage(this.canvasElement.toDataURL(), 'TestApp').then(
res => { console.log(res); },
err => { console.log(err); }
);
On the phone, this saves the exact image you see on the canvas. On the tablet it saves an inverted image that’s about 60% of the height and width of the visible canvas. The image is stretched to the full resolution of the canvas though. It’s as if it flips it vertically, then crops it to 60% of the size, then stretches it back to 100%.
This also happens if I write the image back onto the canvas.
let img = new Image();
img.onload = () => {
let context = this.canvas.getContext('2d');
// sort out size ratios
let wratio = canvas.width / image.width;
let hratio = canvas.height / image.height;
let ratio = Math.min(wratio, hratio);
let width = image.width * ratio;
let height = image.height * ratio;
// center it if it's not a 100% size match
let offsetW = Math.round((canvas.width - width) / 2);
let offsetH = Math.round((canvas.height - height) / 2);
context.drawImage(image, offsetW, offsetH, width, height);
};
img.src = this.canvasElement.getDataURL();
On the phone it writes the full image in the correct orientation/size. Same with chrome. On the tablet it does the inverted-cropped-stretched thing. I’ve logged out some of those variables and the size ratios are 1, the image width/height matches the canvas before it’s written. I’ve also tried using blobs and object urls with the same behavior.
Any ideas on how to debug this?
