如何将透明孔切割成图像？

Question

我想从图像中切出一个洞（带有透明部分的 png）。 背景有渐变。 我首先尝试使用 svg 和 mask 但这对我不起作用，因为将孔中的渐变与外面的渐变同步。

Afaik atm 不可能使用 svg 将透明孔切割成图像。 由于浏览器兼容性，无法使用 CSS 剪辑路径。

所以我决定改用 canvas 和 js。 但是只是在图像中画一个透明的圆圈是没有效果的。 似乎必须有更高级的处理。

我对这个问题越来越绝望。 任何帮助表示赞赏。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>test - image processing</title>
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>   
<style>
body{
  background: red;
  background: -webkit-linear-gradient(left top, red, yellow);
  background: -o-linear-gradient(bottom right, red, yellow);
  background: -moz-linear-gradient(bottom right, red, yellow);
  background: linear-gradient(to bottom right, red, yellow);
 }
 canvas{
   display: block;
   margin:100px auto;
   }
  </style>
</head>
  <body>
  <div class="canvas-wrapper">
   <canvas id="canvas" ></canvas>
  </div>
   <script>
   $(document).ready(function () {

    showImage();

    function showImage() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var image = new Image();
      // adjust the image path
      image.src = 'yourImagePathHere';
      image.onload = function () {
        document.getElementById('canvas').width = image.width;
        document.getElementById('canvas').height = image.height;
        ctx.drawImage(image, 0, 0);

        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < imgData.data.length; i += 4) {
          // how to process?
          imgData.data[i] = imgData.data[i];
          imgData.data[i + 1] = imgData.data[i+1];
          imgData.data[i + 2] = imgData.data[i+2];
          imgData.data[i + 3] = imgData.data[i+3];
        }

        ctx.putImageData(imgData, 0, 0);
      };
    }
  });
</script>

Answer 1

我不明白您声称 SVG 不起作用。 对于 SVG，您所追求的非常简单。

 body{ background: red; background: -webkit-linear-gradient(left top, red, yellow); background: -o-linear-gradient(bottom right, red, yellow); background: -moz-linear-gradient(bottom right, red, yellow); background: linear-gradient(to bottom right, red, yellow); }

 <svg width="400" height="300"> <defs> <mask id="hole"> <rect width="100%" height="100%" fill="white"/> <rect x="200" y="100" width="100" height="100"/> </mask> </defs> <image width="400" height="300" xlink:href="http://placekitten.com/400/300" mask="url(#hole)"/> </svg>

Answer 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>test - image processing</title>
  <script     
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>   
  <style>
   body{
    background: red;
    background: -webkit-linear-gradient(left top, red, yellow);
    background: -o-linear-gradient(bottom right, red, yellow);
    background: -moz-linear-gradient(bottom right, red, yellow);
    background: linear-gradient(to bottom right, red, yellow);
  }
  canvas{
   display: block;
   margin:100px auto;
  }
 </style>
</head>
<body>
 <div class="canvas-wrapper">
  <canvas id="canvas" ></canvas>
 </div>
 <script>
   $(document).ready(function () {

   showImage();

   function showImage() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var image = new Image();
    // adjust the image path
    image.src = 'yourImagePathHere';
    image.onload = function () {
     document.getElementById('canvas').width = image.width;
     document.getElementById('canvas').height = image.height;
     ctx.drawImage(image, 0, 0);

     var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

     for (var i = 0; i < imgData.data.length; i += 4) {
      // how to process?
      imgData.data[i] = imgData.data[i];
      imgData.data[i + 1] = imgData.data[i+1];
      imgData.data[i + 2] = imgData.data[i+2];
      imgData.data[i + 3] = imgData.data[i+3];
     }

      ctx.putImageData(imgData, 0, 0);
      // this line does the magic, have a look at Amadans link for further possibilities
      ctx.globalCompositeOperation='destination-out';
      // here starts the circle form which is cutted out
      ctx.beginPath();
      ctx.fillStyle='';
      ctx.arc(image.width/2,image.height/2,50,0,2*Math.PI);
      ctx.fill();
  };
 }
});
</script>

如何将透明孔切割成图像？

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-08-09 11:58:44

解决方案2
0 2017-08-09 11:57:12

如何将透明孔切割成图像？

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-08-09 11:58:44

解决方案2 0 2017-08-09 11:57:12

解决方案1
1 已采纳 2017-08-09 11:58:44

解决方案2
0 2017-08-09 11:57:12