如何裁剪图片并添加水印？

Question

知道如何裁剪生成的图片并添加水印吗？图片必须是正方形 (600 x 600px)，在中间裁剪，我必须在上面添加水印。我试过这个 jquery 插件https://github.com/lelinhtinh/watermark但没有用。如果下面的预览不起作用，你可以在这里看到一个演示https://jsfiddle.net/y9rhwvgn/非常感谢任何建议:)// References to all the element we will need.var video = document.querySelector('#camera-stream'),    image = document.querySelector('#snap'),    start_camera = document.querySelector('#start-camera'),    controls = document.querySelector('.controls'),    take_photo_btn = document.querySelector('#take-photo'),    delete_photo_btn = document.querySelector('#delete-photo'),    download_photo_btn = document.querySelector('#download-photo'),    error_message = document.querySelector('#error-message');// The getUserMedia interface is used for handling camera input.// Some browsers need a prefix so here we're covering all the optionsnavigator.getMedia = ( navigator.getUserMedia ||                      navigator.webkitGetUserMedia ||                      navigator.mozGetUserMedia ||                      navigator.msGetUserMedia);if(!navigator.getMedia){  displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");}else{  // Request the camera.  navigator.getMedia(    {      video: true    },    // Success Callback    function(stream){      // Create an object URL for the video stream and      // set it as src of our HTLM video element.       video.srcObject=stream;      // Play the video element to start the stream.      video.play();      video.onplay = function() {        showVideo();      };    },    // Error Callback    function(err){      displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);    }  );}// Mobile browsers cannot play video without user input,// so here we're using a button to start it manually.start_camera.addEventListener("click", function(e){  e.preventDefault();  // Start video playback manually.  video.play();  showVideo();});

Answer 1

我已经准备好几个功能，可以用于我之前正在做的事情。这些函数将缩放您的图像以适合指定尺寸或填充指定尺寸。

var cat_img = 'https://i.chzbgr.com/maxW500/1691290368/h07F7F378/';

(async function() {

  // option one

  var fit = await scaleAndFitImage(cat_img, 600, 600);

  // option two

  var cov = await scaleAndCoverImage(cat_img, 600, 600);

  document.body.innerHTML = `

<h3>option 1: fit</h3>

<img src="${fit}" style='border:1px solid black'>

<h3>option 2: scale</h3>

<img src="${cov}" style='border:1px solid black'>

`;

})();

function loadImage(src) {

  return new Promise((r, e) => {

    var img = new Image();

    img.crossOrigin = "anonymous";

    img.onload = () => r(img);

    img.onerror = e;

    img.src = src;

  });

}

async function scaleAndFitImage(src, w, h) {

  var img = await loadImage(src);

  var canvas = document.createElement('canvas');

  canvas.width = w;

  canvas.height = h;

  var ctx = canvas.getContext('2d');

  var scale = Math.min(canvas.width / img.width, canvas.height / img.height);

  var x = (canvas.width / 2) - (img.width / 2) * scale;

  var y = (canvas.height / 2) - (img.height / 2) * scale;

  ctx.drawImage(img, x, y, img.width * scale, img.height * scale);

  return canvas.toDataURL();

}

async function scaleAndCoverImage(src, w, h) {

  var img = await loadImage(src);

  var canvas = document.createElement('canvas');

  canvas.width = w;

  canvas.height = h;

  var ctx = canvas.getContext('2d');

  var x = y = 0,

    offsetX = 0.5,

    offsetY = 0.5;

  var iw = img.width,

    ih = img.height,

    r = Math.min(w / iw, h / ih),

    nw = iw * r, // new prop. width

    nh = ih * r, // new prop. height

    cx, cy, cw, ch, ar = 1;

  if (nw < w) ar = w / nw;

  if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated

  nw *= ar;

  nh *= ar;

  cw = iw / (nw / w);

  ch = ih / (nh / h);

  cx = (iw - cw) * offsetX;

  cy = (ih - ch) * offsetY;

  if (cx < 0) cx = 0;

  if (cy < 0) cy = 0;

  if (cw > iw) cw = iw;

  if (ch > ih) ch = ih;

  ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);

  return canvas.toDataURL();

}