Question

在Android手机和手机上使用谷歌浏览器的平板电脑，此代码将正常工作并调整图像大小并将其显示在屏幕上。在iPhone上，图像拒绝在屏幕上显示。我怀疑toDataURL但不确定问题出在哪里。 Canvas可能无法在iPhone 6＆amp; 7（我测试了两者）。

$("body").on("change",".pictureinputfile",function(){
                    var cid = $(this).attr('cid');
                    var num = $(this).attr('num');

                    //Equivalent of getElementById
                    var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.

                    var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.

                    var reader = new FileReader();

                    reader.onload = function(e) {
                        // Create a new image.
                        //var img = new Image();

                        var img = document.createElement('img');

                        img.src = reader.result;
                        img.id = "pictureinputfileimage"+cid+"_"+num; //not used just for unique reference.
                        img.setAttribute("class","pictureinputfileimage pictureinputfileimage"+cid);
                        img.setAttribute("style","width:320px;height:240px;");
                        img.setAttribute("cid",cid);
                        img.setAttribute("num",num);

                        //The resultsDIV will remember the pictures for us once it's placed.
                        //localStorage['picInput'+cid+"_"+num] = reader.result;

                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);

                        var MAX_WIDTH = 640;
                        var MAX_HEIGHT = 480;
                        var width = img.width;
                        var height = img.height;

                        if (width > height) {
                          if (width > MAX_WIDTH) {
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                          }
                        } else {
                          if (height > MAX_HEIGHT) {
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT;
                          }
                        }

                        canvas.width = width;
                        canvas.height = height;

                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, width, height);

                        var shrinked = canvas.toDataURL('image/jpeg');

                        img.src = shrinked;

                        img.onload = function() {
                            //console.log("image loaded");

                            $('.fileDisplayArea'+cid).each(function(index,element){
                                //console.log("set to html");
                                var numOfElement = $(this).attr("num");
                                if(numOfElement==num){
                                    $(this).html(img);
                                }
                            });

                            destroyGraphicalState();

                            //Store HTML as it is now without button classes.
                            localStorage.resultsDiv = $('#results').html();//have to clean up classes on button elements.

                            //Restore buttons and graphics states for current session back to normal.
                            restoreGraphicalState();
                        }
                    } //End reader.onload

                    reader.readAsDataURL(file);//attempts to read the file in question.

                    //
                });

Answer 1

环顾四周后，我找到了答案。

https://github.com/stomita/ios-imagefile-megapixel

使用此库修复了问题以及奇怪的垂直拉伸问题。

$("body").on("change",".pictureinputfile",function(){
                    var cid = $(this).attr('cid');
                    var num = $(this).attr('num');

                    //Equivalent of getElementById
                    var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.

                    var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.

                    var mpImg = new MegaPixImage(file);//loads the image.

                    //define an image to work with.
                    var img = new Image();
                    img.id = "pictureinputfileimage"+cid+"_"+num; //not used just for unique reference.
                    img.setAttribute("class","pictureinputfileimage pictureinputfileimage"+cid);
                    img.setAttribute("style","width:320px;height:240px;");
                    img.setAttribute("cid",cid);
                    img.setAttribute("num",num);

                    mpImg.render(img, { maxWidth: 640, maxHeight: 480, quality: 0.5 });//creates the image correctly.

                    $('.fileDisplayArea'+cid).each(function(index,element){
                        //console.log("set to html");
                        var numOfElement = $(this).attr("num");
                        if(numOfElement==num){
                            $(this).html(img);
                        }
                    });

                    destroyGraphicalState();

                    //Store HTML as it is now without button classes.
                    localStorage.resultsDiv = $('#results').html();//have to clean up classes on button elements.

                    //Restore buttons and graphics states for current session back to normal.
                    restoreGraphicalState();
                });

通过canvas html5调整图像大小不适用于iPhone 6或7，但适用于Android吗？

1 个答案: