使用cordova插件的图像在canvas上看起来很可怕

jpfvwuh4  于 2023-06-23  发布在  其他
关注(0)|答案(2)|浏览(94)

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

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

xoshrz7s

xoshrz7s1#

是因为视网膜屏幕。
将画布的高度和宽度设置为双倍,然后将其样式设置为半像素

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

p1tboqfb

p1tboqfb2#

navigator.camera.getPicture(
  onSuccessCamera, 
  onFailureCamera, 
  {
    quality: 25
  }
);

使用quality: 100以获得最佳质量。

相关问题