使用cordova插件的图像在画布上看起来很糟糕答案

【问题标题】：image using cordova plugin looks horrible on canvas使用cordova插件的图像在画布上看起来很糟糕
【发布时间】：2017-10-20 17:19:20
【问题描述】：

我正在为我的 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;
}

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

【问题讨论】：

标签： html ios cordova html5-canvas cordova-plugins

【解决方案1】：

这是因为视网膜屏幕。

将画布的高度和宽度设置为双倍，然后将其样式设置为半像素

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 相机选项上使用更高的值。

【讨论】：