为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

C#
心有法竹 2023-01-06 15:22:33

知道如何裁剪生成的图片并添加水印吗?

图片必须是正方形 (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();


});

查看完整描述

1 回答

?
湖上湖

TA贡献1742条经验 获得超2个赞

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


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

}



查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信