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

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 options

navigator.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() {&nbsp; // option one&nbsp; var fit = await scaleAndFitImage(cat_img, 600, 600);&nbsp; // option two&nbsp; var cov = await scaleAndCoverImage(cat_img, 600, 600);&nbsp; 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) {&nbsp; return new Promise((r, e) => {&nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; img.crossOrigin = "anonymous";&nbsp; &nbsp; img.onload = () => r(img);&nbsp; &nbsp; img.onerror = e;&nbsp; &nbsp; img.src = src;&nbsp; });}async function scaleAndFitImage(src, w, h) {&nbsp; var img = await loadImage(src);&nbsp; var canvas = document.createElement('canvas');&nbsp; canvas.width = w;&nbsp; canvas.height = h;&nbsp; var ctx = canvas.getContext('2d');&nbsp; var scale = Math.min(canvas.width / img.width, canvas.height / img.height);&nbsp; var x = (canvas.width / 2) - (img.width / 2) * scale;&nbsp; var y = (canvas.height / 2) - (img.height / 2) * scale;&nbsp; ctx.drawImage(img, x, y, img.width * scale, img.height * scale);&nbsp; return canvas.toDataURL();}async function scaleAndCoverImage(src, w, h) {&nbsp; var img = await loadImage(src);&nbsp; var canvas = document.createElement('canvas');&nbsp; canvas.width = w;&nbsp; canvas.height = h;&nbsp; var ctx = canvas.getContext('2d');&nbsp; var x = y = 0,&nbsp; &nbsp; offsetX = 0.5,&nbsp; &nbsp; offsetY = 0.5;&nbsp; var iw = img.width,&nbsp; &nbsp; ih = img.height,&nbsp; &nbsp; r = Math.min(w / iw, h / ih),&nbsp; &nbsp; nw = iw * r, // new prop. width&nbsp; &nbsp; nh = ih * r, // new prop. height&nbsp; &nbsp; cx, cy, cw, ch, ar = 1;&nbsp; if (nw < w) ar = w / nw;&nbsp; if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated&nbsp; nw *= ar;&nbsp; nh *= ar;&nbsp; cw = iw / (nw / w);&nbsp; ch = ih / (nh / h);&nbsp; cx = (iw - cw) * offsetX;&nbsp; cy = (ih - ch) * offsetY;&nbsp; if (cx < 0) cx = 0;&nbsp; if (cy < 0) cy = 0;&nbsp; if (cw > iw) cw = iw;&nbsp; if (ch > ih) ch = ih;&nbsp; ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);&nbsp; return canvas.toDataURL();}