toDataURL is not a function in ios

232 views Asked by At

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,
                        }
                    );
                });
        }
    }
0

There are 0 answers