JavaScript image processing and synthesis summary, javascript Image Synthesis

JavaScript image processing and synthesis summary, javascript Image Synthesis
Introduction

Image processing has now become a new demand in our lives. Presumably, we often have this demand. In actual front-end services, many projects often require image processing and processing. Due to the business needs of the company in the past period, I have accumulated some dry goods in this regard. After years, I will summarize a series of articles to share with you, hope to inspire and help you with front-end kids shoes

This series is divided into the following four parts:

1. Scaling and cropping of basic image processing technologies;
2. Basic image processing technology-image synthesis;
3. Text synthesis of basic image processing technology;
4. Algorithm-type image processing technology;

In this article, I will mention a lot of pitfalls or experiences encountered in practical practice. It should be a good job ~~ If you can read through, you should be able to greatly improve your understanding of the front-end image processing field. If you are interested, you can discuss it with me in depth. I hope this article will be able to achieve the goal of inspiring others, let the front-end have more possibilities in image processing. Please forgive us for any shortcomings.

Through these accumulation, I encapsulated several common functions in projects:

Image Synthesis: Example Git image cropping: Example Git personas except: Example Git

After all these old routines, we started to take off!

First, I will divide the front-end image processing into two types: basic type and algorithm type;

Basic image processing technologies: image scaling, rotating, adding borders, image merging, and jigsaw puzzles all belong to basic image processing services. The difference is that pixel-level algorithms are not required, instead, the image is transformed by calculating and changing the size and position of the image. For example, common Paster functions:

Image processing of the algorithm type: This type of image processing is more complex, and features the pixel level Algorithm for the image.RGBAChannel value, for example, we usephotshopOr the beautification, filter, black/white, image cutting, and fuzzy operations performed on images by meitu xiuxiu and other tools. The focus of this type is on the algorithm and performance. For example, common makeup functions:

This series starts our journey from basic type processing. Basic image processing has a large number of application scenarios in actual projects.canvasCapabilities to complete, there is no performance and compatibility issues, can meet the online operation standards. Here I roughly divide basic types of image processing into the following types, which can basically cover all daily business scenarios:

• Scaling of images;
• Crop an image;
• Synthesis of images;

Synthesize images and images, such as pasters, borders, and watermarks; add text to images; and add basic geometric images to images;

Tips: I have encapsulated this type of image processing scenario into a plug-in that can basically meet all the needs of this type of image processing. GIT address (Welcome to discuss );

Before introducing specific functions, we should first learn a bit about the pre-knowledge because Image Rendering relies entirely on image loading.

1. Cross-origin of images

First, image loading and rendering involve the cross-origin issue of images. Therefore, if an online image is used, you must set a cross-origin header on the image server andLabelcrossOriginSet*Otherwise, a cross-origin error is reported when the canvas is drawn.

Tips: we have accumulated some pitfalls. You can share them with us:

1. crossOriginMust be strictly set. This parameter is set only when it is a cable, while the local path orbase64The image cannot be set; otherwise, an error is reported in some systems, leading to image loading failure;
2. When the project is a local package environment, such as built-inAppMedium,crossOriginInvalid value,webviewWhether set or not, a cross-domain error is reported. Solution: Convert all imagesbase64Can be correctly drawn;
3. crossOriginThe value must be set before the image is loaded.AssignmentsrcSet previously; otherwise, the setting is invalid;

2. image loading

BecausecanvasYou need to make sure that the image has been loaded. Therefore, you need to useOfonloadEvent, you can usehtmlOr usejsCreate an image object:

Function loadImage (image, loader, error) {// create an image object to load the Image; let img = new image (); // you must set the crossOrigin attribute when the image is a linefeed; if (image. indexOf ('HTTP ') = 0) img. crossOrigin = '*'; img. onload = () => {loaded (img); // clear the object and release the memory. setTimeout () => {img = null ;}, 1000) ;}; img. onerror = () =>{ error ('img load error') ;}; img. src = image ;}

After introducing the pre-knowledge of image loading, let's take a look at the simplest Image Processing-scaling and cropping!

Tips: When you read this article canvasNot familiar. You can query the corresponding APIThis document is enough. canvasBasic APIProvide a detailed explanation.

I. Scaling Images

The most common scenario of image scaling is image compression. While ensuring image clarity, you can reduce the image size by reducing the image size reasonably. It is widely used in practical scenarios. For example, a picture uploaded by a user may be of a very large size. For example, the size of the picture taken by a mobile phone can often be reached.1920*2560The size may exceed 5 MB. In the project, we may not need to use such a large size. At this time, image compression can greatly optimize the loading speed and save bandwidth;

1. CreatecanvasCanvas, set the width and height to the size to be compressed;

The canvas is the scaled size of the image. Here, there is a point to ensure that the proportion of the image remains unchanged. Therefore, you need to calculate the width and height of the canvas:

Let imgRatio = img. naturalWidth/img. naturalHeight; // create a canvas container; let cvs = document. createElement ('canvas '); // obtain the canvas in the container; let ctx = cvs. getContext ('2d '); cvs. width = 1000; cvs. height = cvs. width/imgRatio;

2. Draw the image and export itbase64;

Here we use two most common methods:

ctx.drawImage(image, dx, dy, dw, dh): In fact, this method can receive a maximum of nine parameters for compression. You only need to use five of them. The remaining parameters will be used in other parts for further explanation;

Image: the source of the image to be drawn. You must receive the image that has been loaded.HTMLImageElement,HTMLCanvasElementOrHTMLVideoElement; Dx/dy: coordinates of the starting point of the painting relative to the upper left corner of the canvas; dw/dh: width and height of the painting. The width ratio is not locked and the image can be deformed;

cvs.toDataURL(type, quality): This method is used to export the content on the canvasbase64Format Image. You can configure two parameters;

Type: image format. Generallyimage/pngOrimage/jpegWhen the image does not contain transparency, we recommend that you usejpegTo reduce the size of the exported image. quality: The image quality, which can be used.0~1Any value between them. After testing, this value is set0.9Which can effectively reduce the size of the image file without affecting the image definition.base64It is a compressed image;

Tips: There is a pitfall here and you want to export it jpgThe format of the image must be image/jpeg, Cannot be used image/jpg;

// Draw the ratio of the original image to the scaled canvas; ctx. drawImage (image, 0, 0, cvs. width, cvs. height); // export the drawn image to the base64 format; let b64 = cvs. toDataURL ('image/jpeg ', 0.9 );

3. Convert images in multiple formatsbase64;

Our common image upload function is native.<input type="file">Tag. The obtained result isFileThe format of the image is different and the size is very large. We should compress the image before using it.

UseFileReader:

Let file = e. files [0]; if (window. fileReader) {let fr = new FileReader (); fr. onloadend = e => {let b64 = e.tar get. result; // b64 is a user upload graph in base64 format;}; fr. readAsDataURL (file );}

Pairbase64UsecanvasCompression;

Tips: there is a small pitfall here.EXIFThe direction value in the information will affect the image display.IOSThe image width and height do not match the image direction. Therefore, special processing is required to correct the image direction. Solution:

1. Availableexif.jsTo obtainOrientationAttribute, usingcanvasTo correct the rotation;

2. Here iscanvasResize.jsPlug-ins can solve the problemFileTobase64.

Ii. Image Cropping

In actual projects, because of the wide and high proportions of images, a relatively fixed proportion is required for display and use. At this time, we need to crop the image into the high aspect ratio we need, the method used is basically the same as the scaling of the image, mainly through adjustmentdrawImageOfdx, dyParameters. The principle is to convertdrawImageStarting Point(dx, dy)Offset up.canvasWe have set it to the desired size after cropping, but the part beyond the canvas will not be drawn, so as to achieve the purpose of cropping. By setting the value flexibly, we can basically meet the needs of various image cropping, A simple example (the black box indicates the size of the created canvas ):

Here you need600*800Vertical center crop600*600As an example, a square chart is encapsulated into a function:

// Usage: let b64 = cropImage (img, {width: 600, height: 600,}); // center crop function cropImage (img, ops) {// original image size; let imgOriginWidth = img. naturalWidth, imgOriginHeight = img. naturalHeight; // the aspect ratio of the image to ensure that the image is not deformed; let imgRatio = imgOriginWidth/imgOriginHeight; // the width and height of the cropped image. The default value is the source image width and height; let imgCropedWidth = ops. width | imgOriginWidth, imgCropedHeight = ops. height | imgOriginHeight; // calculates the offset of the starting coordinate point. Because it is a center crop, it is equal to the difference value before and after/2; let dx = (imgCropedWidth-imgOriginWidth)/2, dy = (imgCropedHeight-imgOriginHeight)/2; // create a canvas and set it to the width and height after cropping. let cvs = document. createElement ('canvas '); let ctx = cvs. getContext ('2d '); cvs. width = imgCropedWidth; cvs. height = imgCropedHeight; // draw and export the image; ctx. drawImage (img, dx, dy, imgCropedWidth, imgCropedWidth/imgRatio); return cvs. toDataURL ('image/jpeg ', 0.9 );}

3. Rotating Images

The image rotation principle is also to draw the image to the canvas for rotation and then export. ActuallycanvasOfrotateMethod;

Let cvs = document. createElement ('canvas '); let ctx = cvs. getContext ('2d '); // move the reference point to the center of the canvas; ctx. translate (ctx. width/2, ctx. height/2); // rotate the canvas; ctx. rotate = 90; // draw an image; ctx. drawImage (img); // export the rotated image; cvs. toDataURL ();

There is a special part, that is, the canvas is rotated here, not the entire canvas container, and the canvas container is not drawn outside, therefore, a problem occurs when the four corners of an image are cropped:

The solution is:

Zoom in the canvas container:

In the above example, because the image is a square, you can enlarge the width and height of the container by 1.5 times to ensure that the image will not be cropped. In reality, the image is not fixed due to the width and height ratio, therefore, the amplification factor is a dynamic value:

Tips: as we move the base point of the canvas to the center of the canvas, we need to adjust it relative to the base point during painting. dxAnd dy;

// Create a canvas and obtain the canvas;... // let iw = img. width, ih = img. height; let ir = iw> ih? Iw/ih: ih/iw; cvs. width = iw * ir * 1.5; cvs. height = ih * ir * 1.5; // move the reference point to the center of the canvas; ctx. translate (cvs. width/2, cvs. height/2); // rotate the canvas; ctx. rotate = 90; // draw an image; ctx. drawImage (img,-cvs. width/2,-cvs. height/2); // export the image ;...

Summary

This article mainly introduces some front-end image processing pre-knowledge:

Image processing technology classification;

Basic image processing technology; algorithm-type image processing technology; image cross-origin; image loading;

There are also two simplest types of basic image processing:

Image Scaling; image cropping; image rotation;

I believe you have a general understanding of image processing. In the next article, we will continue to study the basic types of image synthesis, which is also full of good stuff.

Finally, I would like to thank you for your reading of the kids shoes. If you have any suggestions or questions, please feel free to discuss them with me.