Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to realize the web browser side". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to implement the web browser side" can help you solve the problem.

Implementation scheme of browser side

Development: the visual effect of the big event tab is basically the same as that of the album details page, and the development time can be reduced if it can be reused.

Development: how to reuse?

As a result, there are two ways to try dom to transfer images on the browser:

Html2canvas

Html2canvas is a library that takes screenshots of all or part of a page through JS on the browser side.

Html2canvas is easy to use. The core code of screenshot is as follows:

Let imgBase64;html2canvas (htm, {onrendered: function (canvas) {/ / generate base64 picture data imgBase64 = canvas.toDataURL ();})

Easy to use, but there are a lot of holes, pits encountered and solutions:

1. Screenshot blur

The main solutions are:

1) magnify the width and height properties of canvas by 2x.

2) set the CSS style width and height of canvas to twice the previous size.

two。 The screenshot is incomplete

The dom height obtained by the source code is not accurate. Modify the source code and pass it manually after obtaining the height. The modification method is as follows:

Source code:

Return renderDocument (node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index) .then (function (canvas) {if (typeof (options.onrendered) = = "function") {log ("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered (canvas);} return canvas;})

After modification

/ / add a custom height width var width = options.width! = null? Options.width: node.ownerDocument.defaultView.innerWidth; var height = options.height! = null? Options.height: node.ownerDocument.defaultView.innerHeight; return renderDocument (node.ownerDocument, options, width, height, index). Then (function (canvas) {if (typeof (options.onrendered) = = "function") {log ("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered (canvas);} return canvas;}); 3. Slow screenshot

Screenshots are slow to start with the principle of html2canvas, html2canvas is not a real screenshot, but traverses the loaded page DOM, collects information about all elements, and then draws using canvas based on attributes read from DOM.

Based on this screenshot principle, there is not much room for slow problem optimization, and html2canvas has some restrictions on CSS. It can only correctly render the CSS attributes it supports. The complete CSS attribute support list can be viewed on the official website.

With regard to slowness, the simplest solution is to generate screenshots in advance before the user operates.

4.crash

After the html2canvas screenshot, upload the base64 of the image to the client's sharing component. When the base64 exceeds 500k, the client may get stuck or crash. If the slow problem is tolerated, this problem is really unacceptable.

Svg

In addition to html2canvas, there are also lighter and faster libraries, which are based on svg and are really much faster than html2canvas.

The attempt of the svg scheme:

/ / domlet htm = 'here is the content of the page.'; let DOMURL = window.URL | | window.webkitURL | | window;let canvas = document.createElement ('canvas'); let ctx = canvas.getContext (' 2d'); let img = new Image (); let svg = new Blob ([htm], {type: 'image/svg+xml;charset=utf-8'}); let url = DOMURL.createObjectURL (svg); let imgBase64;img.onload = function () {ctx.drawImage (img, 0,0) ImgBase64 = canvas.toDataURL ();} img.src = url

Pitfalls that cannot be bypassed by the svg solution:

Cross-domain images are not supported under 1.ios

Due to security restrictions, the cross-domain problem cannot be avoided by adding crossOrigin attributes to cross-domain images under ios.

2.crash

Like html2canvas, svg will eventually be transferred to base64 upload and sharing components after transferring pictures. Jams and crash problems that may be caused by base64 exceeding 500K also exist.

Server-side implementation scheme

Development: the browser-side solution crash problem can not stand, why not generate pictures on the server side, send pictures URL to the sharing component?

In order to maximize the reuse of the code, the headless browser phantomjs screenshot is preferred.

PhantomJS

PhantomJS is a headless browser based on the WebKit kernel, which provides a command line interface for the browser environment. We can take screenshots of web pages, grab web data and other operations. For more details, please visit the official website of PhantomJS.

When installing PhantomJS, be careful to install the following dependencies:

Sudo yum-y install gcc gcc-c++ make flex bison gperf ruby openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel libpng-devel libjpeg-devel

The server-side solution selects the phantomjs-node library, and the core code to implement the screenshot is as follows

Var sitepage = null; var phInstance = null; phantom.create () .then (instance = > {phInstance = instance; return instance.createPage () }) .then (page = > {let htm = [',','+ new Date () +','' '] .join ("") Page.property ('content',htm); page.render ('. / test.png'). Then ((err) = > {phInstance.exit ()}) .catch (err = > {phInstance.exit ();})}) .catch (error = > {phInstance.exit ();})

PhantomJS has also encountered a lot of holes, mainly environmental problems:

1. No screenshot generation

Development: it is normal to generate screenshots on mac and windows. After deployment to the test environment, screenshots cannot be generated, PhantomJS logs can be printed, and there is no clear error message. What is the permission problem under linux?

View PhantomJS and directory permissions, PhantomJS does not have write permissions, fix permission problems, pictures still can not be generated.

Development: the screenshots named by letters are generated normally, and the image file names are not supported to contain numbers?

After some verification, the screenshot name contains the number phantomjs-node can not generate the picture file normally.

two。 Blank screenshot

Development: colors and patterns can be rendered to screenshots, only text can not be rendered, font problems?

Make sure that the font directory in the test machine is empty, update the font, and the text can finally be rendered to the screenshot.

3. Screenshot blur

It's a vague question again...

Css uses relative rem units, and PhantomJS screenshot is used to set zoom parameters:

/ / csshtml {font-size: 100px;} .owner_avatar {width:.30rem;height: .30rem; border-radius: .30rem; margin-right: .10rem;} .events_img {width: .50rem; height:.50rem;} / / phantomjs scaling processing page.property ('viewportSize', {width:828,height:736}); page.property (' zoomFactor',2) page.property ('content',htm); 4. Slow loading of screenshots

After the blur problem is set to 2 times the image, the image size soars to 6MB, resulting in slow loading. Set the screenshot quality:

Page.render (fileName, {quality:85}). Then ((err) = > {phInstance.exit ();}) 5. Slow screenshot

PhantomJS generates the simplest screenshot, which takes about 2S. This speed is obviously unacceptable, and a better optimization method has not been found yet.

Node canvas

Node canvas extends canvas API to provide interfaces with nodes, such as streaming PNG data, converting to Buffer instances, etc. More information can be found on the official node canvas website.

Setting up the environment of node canvas is troublesome, and the dependent library is similar to PhantomJS, so I won't list it here.

The core code for drawing a picture:

Const {createCanvas, loadImage} = require ('canvas'); const canvas = createCanvas (200,200); const ctx = canvas.getContext (' 2d'); ctx.font = '30pxaccounttx.fillText (' test', 50,100); loadImage ('test.jpg'). Then ((image) = > {ctx.drawImage (image, 0,0,70,70);})

Compared with the following imagemagick solutions, node canvas has better performance. Node canvas only implements a simple demo without going deep, and there are not many pitfalls.

ImageMagick and GraphicsMagick

ImageMagick is a powerful, stable and free set of tools and development kits that can be used to read, write, and process more than 90 image files, including popular TIFF, JPEG, GIF, PNG, PDF, and PhotoCD formats.

ImageMagick can dynamically generate pictures according to the needs of web applications, and can also resize, rotate, sharpen, subtract colors or increase special effects on a picture, and save the results of the operation in the same format or other formats. The operation on the picture can be done through the command line, or you can also use Cmax Candle +, Perl, Java, PHP, Python or Ruby programming to complete. More details can be found on the ImageMagick website.

GraphicsMagick, a branch of ImageMagick 5.5.2, is said to have become more stable and excellent. More details can be found on the GraphicsMagick website.

It seems that GraphicsMagick is a better choice, but because the library node gm does not implement GraphicsMagick's translucent and rounded support, and makes some performance comparisons for the album's big event long images, there is little difference between the two, so choose to use ImageMagick.

The way for node gm to switch ImageMagick is very simple, as long as the following settings are added:

Var gm = require ('gm'); var imageMagick = gm.subClass ({imageMagick: true})

Inevitably, there are some pitfalls when using ImageMagick:

1. Translucent mask

Design: the background of the album cover uses a white transparent mask, the color of the mask is determined according to the cover image, the dark cover image uses white text, and the light cover image uses black text.

Developer: OK, first canvas to get the color information of the cover image, and then judge the color depth

/ / RGB and YUV transfer each other Y > = 128 is a light color YQing = 0.299mm R' + 0.587g / g'+ 0.114V / g =-0.147mm / r'- 0.289g / g / g + 0.436g / b'= 0.492* (B / Y') V / V = 0.615v / r'- 0.515g / g'- 0.100g / g'= 0.877 * (R / V / Y') R'= Y'+ 1.140V / V / G'= Y'- 0.394transparent U'-0.581transparent 2.032*U'//ImageMagick B' = Y'+ set transparent color. Fill ("rgba (0L0) 0.5) ") 2. Round corner of the head portrait

Design: these avatars should use rounded corners.

Developer: OK (luckily ImageMagick supports fillets)

.fill ("avatar.jpg") .drawCircle (80,120,120,120)

ImageMagick fillet image implementation is similar to canvas, draw a circle, and then use the avatar image to fill to achieve the avatar fillet.

3. Nickname emoji emoji

It is troublesome for ImageMagick to draw emoticons in nicknames, use fonts that support emoji, and have tried Twitter color emoji fonts, but ImageMagick has BUG and cannot be restored to color.

Final solution:

1) use equal width fonts to facilitate the calculation of accurate emoji positions

2) ImageMagick draws emoticons in nicknames

.draw ("image Over" + size + "" + url)

ImageMagick performance optimization:

It takes about 100ms for ImageMagick to generate a single image, but if there are more concurrent requests, the aPCge time-consuming soars to 3s. This speed is obviously unacceptable. After some optimization, the aPCge time is reduced to about 1s. The main optimization points are as follows:

1.gm code splicing, executed in VM

Call gm many times to manipulate images, which seriously affects performance. The image operation code is stitched into strings and executed in VM. Gm is called only once. The core code is as follows:

Let sandbox = {gm: imageMagick, start: Date.now ()} / / calculate picture height let offset = getOffset (); let qrcodeStr = getQrcodeStr (); let titleStr = (function () {return ['.fontSize (24)', '.fill ("gray")', '.drawText (164j152, "I am the title")];}) () Let str ='gm (828 FONTS + offset.height +', "# fff"). Font ("'+ FONTS +'", 48)'+ titleStr + qrcodeStr + '.quality (90). Write ("test.jpg", function (err) {console.log (err | | Date.now ()-start)})'; let script = new vm.Script (str); let context = vm.createContext (sandbox); script.runInContext (context); 2.mpc format

Mpc is a persistent cache format provided by ImageMagick, which reduces the overhead of decoding and encoding pixels in the image format.

Mpc generates two files:

1) an extension .mpc retains all attributes related to an image or image sequence (such as width, height, color space, etc.).

2) an extension .cache, which is the pixel cache in the local raw format.

When reading mpc image files, ImageMagick reads image attributes and maps memory to the pixel cache on disk without decoding image pixels, but the file size of mpc is larger than other image formats.

Mpc image files are suitable for write-once, multiple-read mode, using mpc to map the image directly to memory, rather than rereading and decompressing the source image each time.

3.Q8 version

The ImageMagick Q16 version allows 16-bit images to be read and written without scaling, but the pixel cache consumes twice as much resources as the Q8 version, which is usually faster than the Q16 version.

Pixel cache consumption = width * height * bit depth / 8 * channel Q8 bit depth = 8Q16 bit depth = 16 channel = red + green + blue + alpha strength, that's all for "how to implement the web browser". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.