0

イメージをキャンバスにロードしようとしていますが、私の目的は 2 つの機能を提供することです。キャンバス内の画像がどの次元でも大きい場合。できるようになりたい

1）サイズを変更します

2) または、デフォルトで必要に応じてスクロール バーを設定します。

だから私は自分のキャンバスとそれに言及overflow:autoしたcssにdivを追加しました。しかし、画像全体をスクロールすることはできません。試していただけるように、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>
4

2 に答える 2

0

キャンバスに合わせてサイズ変更:

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>
于 2013-09-14T12:29:18.937 に答える
0

これを行うには、この関数を使用します。

        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);    
    }

#imgdiv id はどこにあり、内部の画像はどこにあります。そして#img_cargadaimgタグIDです。

于 2013-09-14T12:58:42.757 に答える