Question

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

Afaik atm使用svg＆s无法在图像中切出透明孔。由于浏览器兼容性，无法使用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

<!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>

Answer 2

我不理解您声称SVG无法正常工作。使用SVG，你看起来很简单。

＆＃13;

file_put_contents('logs.txt', "\n\n ====LOG Generated on... Date[" . date('h:i:s a d-m-Y') . "] ====== \n\n", FILE_APPEND | LOCK_EX);

＆＃13;

driver = webdriver.Chrome()
driver.get('http://www.ukathletics.com/schedule-list/#!/m-basebl/2016')
time.sleep(5)
driver.find_element_by_tag_name('body').send_keys(Keys.CONTROL + Keys.END)
time.sleep(5)
driver.find_element_by_tag_name('body').send_keys(Keys.CONTROL  +Keys.END)

＆＃13;

如何在图像中剪切透明孔？

2 个答案: