Question

我遇到问题drawImage()在一定宽度和高度以下重新调整加载图像的大小。我试图重新调整大小的图像是1080x1920，我想将它重新调整为540x960。如果我将drawImage()应用于将其缩减为764x1358，则可行。但是任何小于该值的分辨率（在任一参数上）都会导致图像不显示在画布上。

分辨率的下限之间肯定存在某种相关性，因为两者都是原始分辨率的约70.7％。我想知道drawImage是否存在继承限制，但我找不到任何说明的说明。

以下是相关代码：

var image = new Image();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = this.width * 2;
ctx.canvas.height = this.height; 
$(image).on("load", function() {
     ctx.drawImage(image, 0, 0, 764, 1358);

});
image.src = "test2.jpg";

我编辑了代码以显示image的来源。

完整代码：

<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>

<body>
    <canvas id="myCanvas" width="1920" height="1920">
        </canvas>
    <script>


        $(document).ready(
                function() {
                    $("<img>").attr("src", "test2.jpg").on('load', function() {                 
                        var imgWidth, imgHeight;
                        var imageData; 
                        var image = new Image();
                        var canvas = document.getElementById("myCanvas");
                        var ctx = canvas.getContext("2d");
                        ctx.canvas.width = this.width * 2;
                        ctx.canvas.height = this.height; 
                        $(image).on("load", function() {
                            /* This is where the image is loaded and 
                               inserted into the canvas */
                            ctx.drawImage(image, 0, 0, 763, 1358);
                        });
                        image.src = "test2.jpg"; 

                        imageData = ctx.getImageData(0, 0,
                                this.width,
                                this.height);

                        /* This is just part of the image manipulation, 
                           bland right now */
                        var newImgData = ctx.createImageData(imageData.width,
                                imageData.height);
                        for ( var i = 0; i < newImgData.data.length; i += 4) {
                            newImgData.data[i + 0] = 255;
                            newImgData.data[i + 1] = 0; 
                            newImgData.data[i + 2] = 0; 
                            newImgData.data[i + 3] = 255;       
                        }
                       // ctx.putImageData(newImgData, imageData.width, 0);
                 });
                });
    </script>
</body>
</html>

上次编辑：我找到了解决方案。

事实证明，我的问题是我正在使用的JQuery版本。我最初只是版本1，但1.8.3修复了一切。所以，解决方案就是简单地改变

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

到

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Javascript - 无论画布大小如何，drawImage都无法将图像缩小到特定分辨率以下

0 个答案: