Question

我正在尝试将图片加载到画布中，我的目标是提供两个功能。如果画布内的图像在任何维度上都更大。我希望能够

1）要么调整大小

2）或默认情况下根据需要使用滚动条。

所以我在画布上添加了一个div，在css中我提到了overflow:auto。但我无法滚动整个图像。我正在粘贴我的整个html文件，你可以尝试一下。请告诉我如何才能完成这项工作。

<head>
    <title>resize and scroll</title>
    <meta charset="utf-8">
</head>
<body>
<div id="scroll">
    <canvas id="canvas" width="800" height="400"></canvas>
</div>
    <input type="button" value=" Resize " onclick="resize()">
    <input type="button" value="original" onclick="window.onload()"> 
    <style>
      #canvas {
        border: 1px solid black;
        }
      #scroll {
        width:800;
        height:400;
        overflow:auto;
        border: solid 1px white;
        background-color:white;
        }
    </style>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            lenna = new Image();
            lenna.src = 'http://lunar.thegamez.net/greenenergyimage/biomass-energy-resources/biomass-resources-map-agricultural-residues-resourcesjpg-1200x1000.jpg';
            lenna.onload=function() {
                context.drawImage(lenna,0,0,lenna.width,lenna.height);
            }    
         }   
        resize = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.drawImage(lenna,0,0,canvas.width,canvas.height);     

         } 
    </script>        
</body>
</html>

Answer 1

调整大小以适合画布：

您可以使用context.drawImage的缩放参数来调整“lenna”图像的大小。

关键是按比例调整图像大小，使其不会失真。

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.width=800;
  canvas.height=400;
  document.getElementById("scroll").style.overflow="hidden";

  var cW=canvas.width;
  var cH=canvas.height;
  var iW=lenna.width;
  var iH=lenna.height;
  var maxSize=Math.max(cW,cH);

  context.clearRect(0,0,cW,cH);
  if(iW>iH){
      context.drawImage(lenna,0,0,iW,iH,0,0,cW*(maxSize/iW),cH);     
  }else{
      context.drawImage(lenna,0,0,iW,iH,0,0,cW,cH*(maxSize/iH));     
  }

添加滚动条以查看更大的画布：

关键是将＃scroll的溢出设置为滚动：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

document.getElementById("scroll").style.overflow="scroll";

context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width=lenna.width;
canvas.height=lenna.height;
context.drawImage(lenna,0,0,lenna.width,lenna.height);

这是代码和小提琴：http://jsfiddle.net/m1erickson/fTQkx/

<!doctype html>
<html>
<head>
    <title>resize and scroll</title>
    <meta charset="utf-8">
</head>
<body>
<div id="scroll">
    <canvas id="canvas" width="800" height="400"></canvas>
</div>
    <input type="button" value=" Resize " onclick="resize()">
    <input type="button" value="original" onclick="window.onload()"> 
    <img src="http://lunar.thegamez.net/greenenergyimage/biomass-energy-resources/biomass-resources-map-agricultural-residues-resourcesjpg-1200x1000.jpg">
    <style>
      #canvas {
        border: 1px solid black;
        }
      #scroll {
        width:800;
        height:400;
        overflow:auto;
        border: solid 1px white;
        background-color:white;
        }
    </style>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            lenna = new Image();
            lenna.src = 'http://lunar.thegamez.net/greenenergyimage/biomass-energy-resources/biomass-resources-map-agricultural-residues-resourcesjpg-1200x1000.jpg';
            lenna.onload=function() {
                context.drawImage(lenna,0,0,lenna.width,lenna.height);
            }    
         }   
        resize = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            var cW=canvas.width;
            var cH=canvas.height;
            var iW=lenna.width;
            var iH=lenna.height;
            var maxSize=Math.max(cW,cH);

            context.clearRect(0,0,cW,cH);
            if(iW>iH){
                context.drawImage(lenna,0,0,iW,iH,0,0,cW*(maxSize/iW),cH);     
            }else{
                context.drawImage(lenna,0,0,iW,iH,0,0,cW,cH*(maxSize/iH));     
            }

         } 
    </script>        
</body>
</html>

Answer 2

我使用此功能来执行此操作：

        function redimensionarImagen() {

    //redimensionar imagen a ancho x proporción
        var ancho = $("#img").css("width")
        var ancho = parseInt(ancho)
        var img = $("#img_cargada")
        var res = new Array(2)
        res[0] = img.attr("width")
        res[1] = img.attr("height")

        if(res[0]>ancho) {
        var alto = res[1]/(res[0]/ancho)
        img.attr("width", ancho)
        img.attr("height", alto)
        }
        //mostrar imagen
        $("#img_cargada").show(500);    
    }

其中#img是div id，其中是里面的图像。 #img_cargada是img标记ID。

如果画布上的图像内容较大，请添加滚动条

2 个答案: