Let's talk about how to use SVG to achieve image mosaic effect

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

I forwarded an article by my friend Vajoy on the public account before - Skillfully use CSS to stylize the image mosaic.

The core is to use an interesting property in CSS--image-rendering, which can be used to set the image scaling algorithm. [Recommended learning: css video tutorial]

What is image-rendering?

CSS property image-rendering is used to set the image scaling algorithm. It applies to the element itself, to images in other attributes of the element, and to child elements.

The syntax is relatively simple:

{
    image-rendering: auto;              // 默认值，使用双线性（bilinear）算法进行重新采样（高质量）
    image-rendering: smooth;         // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
    image-rendering: crisp-edges;  // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
    image-rendering: pixelated;      // 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的
}

Among them, image-rendering: pixelated is more interesting and can mosaic a low-precision image.

For example, suppose we have an image of 300px x 300px, and we let it be converted into 30px x 30px:

Let’s enlarge the distorted image to 300px x 300px:

##Based on this, we set the settings for this image

image-rendering: pixelated, you can get a mosaic image:

<img  src="/static/imghwm/default1.png" data-src="pic.jpeg?30x30" class="lazy" alt="Let's talk about how to use SVG to achieve image mosaic effect" >

img {
    width: 300px;
    height: 300px;
    image-rendering: pixelated
}

##image-rendering: pixelated<strong></strong> Limitations of achieving mosaic effectOK, then why do you need to reduce and then enlarge first, and then use

image-rendering: pixelated

? Let's make a comparison and set image-rendering: pixelated directly to the original image:

Set

image-rendering directly to the original image: pixelated

will only make the image more jagged, but will not directly produce a mosaic effect. This is also consistent with the description of

image-rendering: pixelated

. When enlarging the image, the nearest neighbor algorithm is used, so the image looks like it is composed of large blocks of pixels. Only based on the enlarged and blurred image can we use

image-rendering: pixelated

to get a mosaic picture!

Use CSS to reduce and then enlarge the image?

So, suppose we only have a clear original image and want to use CSS to get a mosaic effect. Is it feasible? Following this idea, we can think:

Can we use CSS to reduce the image and then enlarge it, and then use

image-rendering: pixelated

?

no. Pictures on the WEB are like smart objects in Photoshop - you can modify its size at will (for example, enlarge it many times to make it blurry), but when you finally change the picture back to its original size, the picture will return to its original size. Looks like (without any distortion)

. So, if you want to get a blurry image when there is only one original image, you have to turn to Canvas, which is a little troublesome. We just want a mosaic effect.

SVG filter overlay to achieve mosaic effect

This can lead to today’s protagonist,

SVG filter

, using several layers of SVG filters By superposing, you can actually achieve a mosaic effect filter very easily. And, SVG filters can be easily introduced through CSS filters.

The code is actually very simple. SVG defines a filter and uses the superposition effect of multiple layers of filters to achieve a mosaic effect. Then, it is introduced through CSS filter and can be applied to any element:

<img  src="/static/imghwm/default1.png" data-src="任意无需缩放的原图.png" class="lazy" alt="Let's talk about how to use SVG to achieve image mosaic effect" >
<svg>
  <filter>
    <feflood></feflood>
    <fecomposite></fecomposite>
    <fetile></fetile>
    <fecomposite></fecomposite>
    <femorphology></femorphology>
  </filter>
</svg>

img {
    width: 300px;
    height: 300px;
    filter: url(#pixelate);
}

In this way, we get a mosaic effect:

If you just want to use this effect, you don’t even need to understand the entire SVG

What exactly did you do? Of course, if you are a person who asks the question, you need to have a certain SVG foundation. It is recommended that you read these introductions about SVG filters of mine: <ul> <li><a href="https://github.com/chokcoco/cnblogsArticle/issues/27" target="_blank">interesting! Powerful SVG filters</a></li> <li><a href="https://github.com/chokcoco/iCSS/issues/106" target="_blank">Interesting! The generation scheme of irregular borders</a></li> <li><a href="https://github.com/chokcoco/iCSS/issues/107" target="_blank">Shocking! Can you use SVG filters to create emoticons? </a></li> </ul> <h2 id="strong-Limitations-of-CSS-SVG-to-implement-mosaic-strong"><strong>Limitations of CSS/SVG to implement mosaic</strong></h2> <p>Of course, the limitation of CSS/SVG filter to implement mosaic is that if you don’t want to If the user can see the original image, then using this method directly on the client is equivalent to directly exposing the original image. </p> <p>Because the CSS/SVG filter method is to mosaic images on the front end, and the original image is required. </p> <p>Of course, using the two above-mentioned image mosaic techniques, we can still use it to create some simple interactive effects, like this: </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/deade6439637a00749d538cc6e2a383e-5.gif?x-oss-process=image/resize,p_40" class="lazy" alt="" loading="lazy"></p> <p> You can find all the codes for the above DEMO and SVG filters in these two DEMOs: </p> <ul> <li><a href="https://codepen.io/Chokcoco/pen/gOXEJJE" target="_blank">CodePen Demo - image-rendering pixelated application</a></li> <li><a href="https://codepen.io/Chokcoco/pen/JjOVjop" target="_blank" textvalue="SVG Pixel Filter">SVG Pixel Filter</a></li> </ul> <blockquote> <p>Original address: https://www.cnblogs.com/coco1s/p/16134088.html<br></p> <p>Author: ChokCoco</p> </blockquote> <p> (Learning video sharing: <a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端">web front-end</a>)</p>

The above is the detailed content of Let's talk about how to use SVG to achieve image mosaic effect. For more information, please follow other related articles on the PHP Chinese website!