Question

我从电脑上传图像，旋转图像，缩放。然后我添加图像水印并下载。

如果图像不大 - 水印伸展到画布上，一切都很好。如果是大图片 - 水印变得比画布小。

我认为有必要改变函数draw（）ctx.scale 也许可以记住它。或其他什么。

var img;
var imgW;
var tttRotate = 0;
var tttScale = 1;
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
var x;
var y;
var width;
var height;
var tttLong = 0;
var tttAlt = 0;

var qqq = 0;
var www = 0;
var eee = 0;


function draw() {
  ctx = document.getElementById('canvas').getContext('2d');
  img = new Image();
  var f = document.getElementById("uploadimage").files[0],
    url = window.zURL || window.URL,
    src = url.createObjectURL(f);
  img.src = src;

  img.onload = function() {

    ctx.scale((canvas.width / img.width), (canvas.width / img.width));

    ctx.drawImage(img, 0, 0, img.width, img.height);
  };
};
document.getElementById("uploadimage").addEventListener("change", draw, false)

function Move(a) {
  switch (a) {

    case 'left':
      tttAlt = tttAlt - 50;
      break;
    case 'right':
      tttAlt = tttAlt + 50;
      break;
    case 'down':
      tttLong = tttLong + 50;
      break;
    case 'up':
      tttLong = tttLong - 50;
      break;


    case 'plus':
      if (tttScale > 2) {
        tttScale = 1;
      }
      tttScale = tttScale + 0.05;
      break;
    case 'mines':
      if (tttScale < 0) {
        tttScale = 1;
      }
      tttScale = tttScale - 0.05;
      break;
    default:
      tttScale = 1;
  }
  ctx.save();
  x = img.width / 2;
  y = img.width / 2;
  width = img.width;
  height = img.height;
  ctx.clearRect(0, 0, img.width, img.height);
  ctx.scale(tttScale, tttScale);
  ctx.translate(x + tttAlt, y + tttLong);
  ctx.rotate(tttRotate);
  ctx.drawImage(img, -width / 2, -height / 2, width, height);
  ctx.restore();
}

function Rot() {

  ctx.save();
  tttRotate += 90 / 57.2958;
  x = img.width / 2;
  y = img.width / 2;
  width = img.width;
  height = img.height;
  ctx.clearRect(0, 0, width, height);
  ctx.scale(tttScale, tttScale);
  ctx.translate(x, y);
  ctx.rotate(tttRotate);
  ctx.drawImage(img, -width / 2, -height / 2, width, height);
  ctx.restore();
}

function doCanvas() {
  ctx.fillStyle = '#FF8F00';
  ctx.fillRect(0, 0, 500, 500);

};

function but(a) {

  switch (a) {
    case '1':
      flag = "http://i.imgur.com/JK7L275.png";
      break;
    default:
      flag = "111";
  }
  imgW = new Image();
  imgW.crossOrigin = "anonymous";
  imgW.src = flag;
  imgW.onload = function() {
    ctx.drawImage(imgW, 0, 0, imgW.width, imgW.height, 0, 0, (imgW.width * canvas.height) / imgW.width, canvas.width);
  }
}

function download() {
  var dt = canvas.toDataURL('image/jpeg');
  this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body onload="doCanvas()">
  <input type="file" name="img" id="uploadimage">
  <a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a>

  <a href="javascript:void(0)" onclick="Move('plus')">Plus</a>

  <a href="javascript:void(0)" onclick="Move('up')">up</a>
  <a href="javascript:void(0)" onclick="Move('down')">down</a>
  <a href="javascript:void(0)" onclick="Move('right')">right</a>
  <a href="javascript:void(0)" onclick="Move('left')">left</a>

  <a href="javascript:void(0)" onclick="Rot()">rot</a>

  <a id="downloadLnk" download="img.jpg">download</a>  <a href="Javascript:but('1')"> Add watermark </a>

  </br>
  <canvas id="canvas" width="500" height="500" ;></canvas>


  <script src="config.js"></script>
</body>

</html>

为什么图像不在画布中缩放？

0 个答案: