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

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

Cropping a masked clipped image

问题

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

  1. <!-- language: lang-css -->
  2. .svg-defs {
  3.   position: absolute;
  4.   width: 0;
  5.   height: 0;
  6. }
  8. .container {
  9.   position: relative;
  10.   top: 20px;
  11.   left: 50px;
  12. }
  14. .background::before {
  15.   content: '';
  16.   position: absolute;
  17.   top: 0;
  18.   right: 0;
  19.   bottom: 0;
  20.   left: 0;
  21.   background: url(https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A) no-repeat;
  22.   opacity: .1;
  23. }
  25. img {
  26.   clip-path: url(#clipper);
  27. }
  29. <!-- language: lang-html -->
  30. <svg class='svg-defs'>
  31.   <defs>
  32.     <clipPath id='clipper'>
  33.       <rect x="30" y="120" width="100" height="100" />
  34.     </clipPath>
  35.   </defs>
  36. </svg>
  38. <div class='container'>
  39.   <div class='background'>
  40.     <img src="https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A" />
  41.   </div>
  42. </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 -->

  1. .svg-defs {
  2.   position: absolute;
  3.   width: 0;
  4.   height: 0;
  5. }
  7. .container {
  8.   position: relative;
  9.   top: 20px;
  10.   left: 50px;
  11. }
  13. .background::before {
  14.   content: &#39;&#39;;
  15.   position: absolute;
  16.   top: 0;
  17.   right: 0;
  18.   bottom: 0;
  19.   left: 0;
  20.   background: url(https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A) no-repeat;
  21.   opacity: .1;
  22. }
  23.    
  24. img {
  25.   clip-path: url(#clipper);
  26. }

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

  1. &lt;svg class=&#39;svg-defs&#39;&gt;
  2.   &lt;defs&gt;
  3.     &lt;clipPath id=&#39;clipper&#39;&gt;
  4.       &lt;rect x=&quot;30&quot; y=&quot;120&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
  5.     &lt;/clipPath&gt;
  6.   &lt;/defs&gt;
  7. &lt;/svg&gt;
  8.     
  9. &lt;div class=&#39;container&#39;&gt;
  10.   &lt;div class=&#39;background&#39;&gt;
  11.     &lt;img src=&quot;https://fastly.picsum.photos/id/553/200/300.jpg?hmac=-A3VLW_dBmwUaXOe7bHhCt-lnmROrPFyTLslwNHVH1A&quot; /&gt;
  12.   &lt;/div&gt;
  13. &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.

  1. const cropSize = {
  2. 	width: 100,
  3. 	height: 100
  4. }
  6. // Function to crop the image
  7. const crop = () => {
  8. 	const canvas = document.querySelector("#cropped");
  9. 	const ctx = canvas.getContext('2d');
  10. 	
  11. 	ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 0, 0, cropSize.width, cropSize.height);
  12. }
  14. const img = new Image();
  15. img.src = 'https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0';
  17. img.onload = (() => {
  18. 	const canvas = document.querySelector("#image");
  19. 	const ctx = canvas.getContext('2d');
  20. 	
  21. 	ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 70, 140, cropSize.width, cropSize.height);
  22. });
  1. #main {
  2. 	display: flex;
  3. 	flex-direction: column;
  4. 	align-items: center;
  5. 	
  6. 	box-sizing: border-box;
  7. 	
  8. 	width: 500px;
  9. 	height: 400px;
  10. }
  12. #container {
  13. 	flex-grow: 1;
  14. 	
  15. 	box-sizing: border-box;
  16. 	border: 1px solid black;
  17. 	background-color: lightgray;
  18. 	
  19. 	position: relative;
  20. 	width: 100%;
  21. 	height: 100%;
  22. 	
  23. 	display: flex;
  24. 	flex-direction: column;
  25. 	justify-content: center;
  26. 	align-items: center;
  27. }
  29. #image-and-background {
  30. 	
  31. 	position: relative;
  32. 	
  33. 	width: 200px;
  34. 	height: 300px;
  35. 	
  36. 	background-color: white;
  37. }
  39. #background::before {
  40. 	content: '';
  41. 	background: url('https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0') no-repeat;
  42. 	opacity: 0.3;
  43. 	
  44. 	position: absolute;
  45. 	top: 0;
  46. 	right: 0;
  47. 	bottom: 0;
  48. 	left: 0;
  49. }
  1. <div id='main'>
  2.   <div id='container'>
  3.     <div id='image-and-background'>
  4.       <div id='background'>
  5.         <canvas id='image' width='200' height='300'></canvas>
  6.       </div>
  7.     </div>
  8.   </div>
  9. </div>
  11. <div>
  12.   <p>Click on the "Crop" button below for a cropped image</p>
  13.   <canvas id='cropped' width='100' height='100'></canvas>
  14.   <div id='buttons'>
  15.     <input type="button" id="button1" onclick="crop()" value="Crop" />
  16.   </div>
  17. </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 -->

  1. const cropSize = {
  2. 	width: 100,
  3.   height: 100
  4. }
  6. // Function to crop the image
  7. const crop = () =&gt; {
  8. 	const canvas = document.querySelector(&quot;#cropped&quot;);
  9.   const ctx = canvas.getContext(&#39;2d&#39;);
  10.   
  11.   ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 0, 0, cropSize.width, cropSize.height);
  12. }
  15. const img = new Image();
  16. img.src = &#39;https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0&#39;;
  18. img.onload = (() =&gt; {
  20. 	const canvas = document.querySelector(&quot;#image&quot;);
  21.   const ctx = canvas.getContext(&#39;2d&#39;);
  22.   
  23.   ctx.drawImage(img, 70, 140, cropSize.width, cropSize.height, 70, 140, cropSize.width, cropSize.height);
  24.   
  25. });

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

  1. #main {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   
  6.   box-sizing: border-box;
  7.   
  8.   width: 500px;
  9.   height: 400px;
  10.   
  11. }
  13. #container {
  14.   flex-grow: 1;
  15.   
  16.   box-sizing: border-box;
  17.   border: 1px solid black;
  18.   background-color: lightgray;
  19.   
  20.   position: relative;
  21.   width: 100%;
  22.   height: 100%;
  23.   
  25.   
  26.   
  27.   display: flex;
  28.   flex-direction: column;
  29.   justify-content: center;
  30.   align-items: center;
  31. }
  33. #image-and-background {
  34.   
  35.   position: relative;
  36.   
  37.   width: 200px;
  38.   height: 300px;
  39.   
  40.   background-color: white;
  41.   
  42. }
  44. #background::before {
  45.   content: &#39;&#39;;
  46.   background: url(&#39;https://fastly.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0&#39;) no-repeat;
  47.   opacity: 0.3;
  48.   
  49.   position: absolute;
  50.   top: 0;
  51.   right: 0;
  52.   bottom: 0;
  53.   left: 0;
  54. }

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

  1. &lt;div id=&#39;main&#39;&gt;
  2.   &lt;div id=&#39;container&#39;&gt;
  3.     &lt;div id=&#39;image-and-background&#39;&gt;
  4.       &lt;div id=&#39;background&#39;&gt;
  5.         &lt;canvas id=&#39;image&#39; width=&#39;200&#39; height=&#39;300&#39;&gt;&lt;/canvas&gt;
  6.       &lt;/div&gt;
  7.     &lt;/div&gt;
  8.   &lt;/div&gt;
  9. &lt;/div&gt;
  12. &lt;div&gt;
  13.   &lt;p&gt;Click on the &quot;Crop&quot; button below for a cropped image&lt;/p&gt;
  14.   &lt;canvas id=&#39;cropped&#39; width=&#39;100&#39;, height=&#39;100&#39;&gt;&lt;/canvas&gt;
  15.   &lt;div id=&#39;buttons&#39;&gt;
  16.     &lt;input type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;crop()&quot; value=&quot;Crop&quot; /&gt;
  17.   &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定