html - 使用cordova插件的图像在 Canvas 上看起来很糟糕

Question

我正在为我的 ios 应用程序使用 cordova 来捕获图像

代码看起来

  navigator.camera.getPicture(onSuccessCamera, onFailureCamera, {
                                    quality: 25,
                                    destinationType: navigator.camera.DestinationType.DATA_URL,
                                    correctOrientation: true,
                                    allowEdit:false
                                    });


function onSuccessCamera(imageURI) {                     
          var imgData = "data:image/jpeg;base64," + imageURI;
          uploadFile(imgData);
                                  }

function uploadFile(file){
 var c=document.getElementById("picture");

                                                c.width = window.innerWidth-50;//offset to prevent image flowing out of frame
                                                //  window.alert(window.innerWidth+":"+ window.innerHeight);414:736
                                                c.height = "330";//window.innerHeight;//this.height;
                                                var ctx=c.getContext("2d");
                                                var showImg = new Image();
                                                showImg.onload = function(){

                                                    var ratio = 1;
                                                    if (this.height > c.height) {
                                                        ratio = c.height/this.height;
                                                    }
                                                    else if (this.width>c.width) {
                                                        ratio = c.width/this.width;
                                                    }



                                                    ctx.drawImage(this,0,0, this.width*ratio, this.height*ratio);
                                                    // window.alert(c.width + ':' + c.height);
                                                };
                                                showImg.src = file;
}

我不知道为什么图像看起来如此可怕

Answer 1

这是因为视网膜屏幕。

将 Canvas 的高度和宽度设为双倍，然后将其设置为半像素

c.width = (window.innerWidth-50)*2;//offset to prevent image flowing out of frame
c.height = 330*2;//window.innerHeight;//this.height;

c.style.width = (c.width/2)+"px";
c.style.height = (c.height/2)+"px";

此外，您可以考虑在 quality 上使用更高的值。相机选项。