剪裁一个带遮罩的裁剪图像

huangapple go评论68阅读模式
英文:

Cropping a masked clipped image

问题

我已创建了一个SVG遮罩,允许显示图像的特定部分。以下是相关的代码:

<!-- language: lang-css -->
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.container {
  position: relative;
  top: 20px;
  left: 50px;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A) no-repeat;
  opacity: .1;
}

img {
  clip-path: url(#clipper);
}

<!-- language: lang-html -->
<svg class='svg-defs'>
  <defs>
    <clipPath id='clipper'>
      <rect x="30" y="120" width="100" height="100" />
    </clipPath>
  </defs>
</svg>

<div class='container'>
  <div class='background'>
    <img src="https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A" />
  </div>
</div>

请注意,我在CSS中使用.background::before仅用于美观地显示图像作为淡化的背景。

至于您的要求,您想要编写JavaScript代码,当执行时(可能通过单击按钮触发),它将裁剪图像仅为剪切的部分(或上面图像中的亮部分),并且您应该能够最终将其保存到文件中(换句话说,您只想保存图像的亮部分作为新图像,或者至少能够在单独的img标签中显示它)。

英文:

I have created an SVG mask that allows showing only a certain part of an image. Here is the code for that:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.container {
  position: relative;
  top: 20px;
  left: 50px;
}

.background::before {
  content: &#39;&#39;;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A) no-repeat;
  opacity: .1;
}
   
img {
  clip-path: url(#clipper);
}

<!-- language: lang-html -->

&lt;svg class=&#39;svg-defs&#39;&gt;
  &lt;defs&gt;
    &lt;clipPath id=&#39;clipper&#39;&gt;
      &lt;rect x=&quot;30&quot; y=&quot;120&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
&lt;/svg&gt;
    
&lt;div class=&#39;container&#39;&gt;
  &lt;div class=&#39;background&#39;&gt;
    &lt;img src=&quot;https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A&quot; /&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

Please note that I am using .background::before in CSS for the sole purpose of displaying the image as a faded background, for aesthetics.

Now, so far, everything is great. What I want to do is write JavaScript code, which when executed (maybe triggered via a click of a button), it will crop the image to the clipped part only (or the bright part in the image above), and which I should be able to save into a file eventually (in other words, I only want to save the bright section of the image as a new image, or at least be able to display it in a separate img tag)

Thank you.

答案1

得分: 1

After a lot of investigation, and reading the article suggested by @BretDonald, I came up with the following solution. I am putting it here for the greater good.

const cropSize = {
	width: 100,
	height: 100
}

// Function to crop the image
const crop = () => {
	const canvas = document.querySelector("#cropped");
	const ctx = canvas.getContext('2d');
	
	ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 0, 0, cropSize.width, cropSize.height);
}

const img = new Image();
img.src = 'https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0';

img.onload = (() => {
	const canvas = document.querySelector("#image");
	const ctx = canvas.getContext('2d');
	
	ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 70, 140, cropSize.width, cropSize.height);
});
#main {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	box-sizing: border-box;
	
	width: 500px;
	height: 400px;
}

#container {
	flex-grow: 1;
	
	box-sizing: border-box;
	border: 1px solid black;
	background-color: lightgray;
	
	position: relative;
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#image-and-background {
	
	position: relative;
	
	width: 200px;
	height: 300px;
	
	background-color: white;
}

#background::before {
	content: '';
	background: url('https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0') no-repeat;
	opacity: 0.3;
	
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
<div id='main'>
  <div id='container'>
    <div id='image-and-background'>
      <div id='background'>
        <canvas id='image' width='200' height='300'></canvas>
      </div>
    </div>
  </div>
</div>

<div>
  <p>Click on the "Crop" button below for a cropped image</p>
  <canvas id='cropped' width='100' height='100'></canvas>
  <div id='buttons'>
    <input type="button" id="button1" onclick="crop()" value="Crop" />
  </div>
</div>
英文:

After a lot of investigation, and reading the article suggested by @BretDonald, I came up with the following solution. I am putting it here for the greater good.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const cropSize = {
	width: 100,
  height: 100
}

// Function to crop the image
const crop = () =&gt; {
	const canvas = document.querySelector(&quot;#cropped&quot;);
  const ctx = canvas.getContext(&#39;2d&#39;);
  
  ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 0, 0, cropSize.width, cropSize.height);
}


const img = new Image();
img.src = &#39;https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0&#39;;

img.onload = (() =&gt; {

	const canvas = document.querySelector(&quot;#image&quot;);
  const ctx = canvas.getContext(&#39;2d&#39;);
  
  ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 70, 140, cropSize.width, cropSize.height);
  
});

<!-- language: lang-css -->

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  box-sizing: border-box;
  
  width: 500px;
  height: 400px;
  
}

#container {
  flex-grow: 1;
  
  box-sizing: border-box;
  border: 1px solid black;
  background-color: lightgray;
  
  position: relative;
  width: 100%;
  height: 100%;
  

  
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#image-and-background {
  
  position: relative;
  
  width: 200px;
  height: 300px;
  
  background-color: white;
  
}

#background::before {
  content: &#39;&#39;;
  background: url(&#39;https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0&#39;) no-repeat;
  opacity: 0.3;
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<!-- language: lang-html -->

&lt;div id=&#39;main&#39;&gt;
  &lt;div id=&#39;container&#39;&gt;
    &lt;div id=&#39;image-and-background&#39;&gt;
      &lt;div id=&#39;background&#39;&gt;
        &lt;canvas id=&#39;image&#39; width=&#39;200&#39; height=&#39;300&#39;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div&gt;
  &lt;p&gt;Click on the &quot;Crop&quot; button below for a cropped image&lt;/p&gt;
  &lt;canvas id=&#39;cropped&#39; width=&#39;100&#39;, height=&#39;100&#39;&gt;&lt;/canvas&gt;
  &lt;div id=&#39;buttons&#39;&gt;
    &lt;input type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;crop()&quot; value=&quot;Crop&quot; /&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 09:37:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76577574.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定