The canvas does not work in mobile

Question

The canvas does not work in mobile

I built an app based on Ionic Framework, and I use canvas to do the image crop. It works well in browser:

enter image description here

But I found it does not work when running in the mobile:

enter image description here

Anyone knows why?

javascript
image-processing
mobile
canvas
ionic-framework

Answer 1

Not sure why it does not work but people have made some awesome image crop modules in angular that do work. I am using on in a company app to assist in document scanning. This is the one I used and it works flawlessly, you can choose your crop shape, size, ect. Get it here: https://github.com/jodonnell-broadsoft/JsImageCrop This is what the code looks like:

                <div class="item item-image cropArea">
                    <img-Crop image="image.uncropped" result-image="image.cropped" result-image-format="image/png" area-type="rectangle" on-change="console.log($scope.image.cropped)">

                    </img-Crop>
                </div>

and what it looks like one the phone:

enter image description here