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

This article mainly introduces "how to solve the problem of generating pictures in the html mobile terminal". In the daily operation, I believe many people have doubts about how to solve the problem of generating pictures on the html mobile terminal. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to solve the problem of generating pictures in the html mobile terminal". Next, please follow the editor to study!

1. You can use canvas to generate pictures, but since you already have html2canvas as an open source library, you don't have to write it yourself to save time.

LiveDemo

/ * get pixel ratio according to window.devicePixelRatio * / function DPR () {if (window.devicePixelRatio & & window.devicePixelRatio > 1) {return window.devicePixelRatio;} return 1;} / * convert the input value to an integer * / function parseValue (value) {return parseInt (value, 10);} / * draw canvas * / async function drawCanvas (selector) {/ / get the DOM node const dom = document.querySelector (selector); const box = window.getComputedStyle (dom); / / DOM node calculated width and height const width = parseValue (box.width); const height = parseValue (box.height) / / get pixel ratio const scaleBy = DPR (); / / create a custom canvas element var canvas = document.createElement ('canvas'); / / set the width and height of canvas element attribute to DOM node width / height * Pixel ratio canvas.width = width * scaleBy; canvas.height = height * scaleBy / / set the width and height of canvas css node to DOM node width and height canvas.style.width = `$ {width} px`; canvas.style.height = `$ {height} px`; / get brush const context = canvas.getContext ('2d'); / / magnify all paint content by context.scale (scaleBy, scaleBy); let x = width; let y = height Return await html2canvas (dom, {canvas}) .then (function () {convertCanvasToImage (canvas, x, y)})} / * the picture is converted to base64 format * / function convertCanvasToImage (canvas, x, y) {let image = new Image (); let _ container = document.getElementsByClassName ('container') [0]; let _ body = document.getElementsByTagName (' body') [0] Image.width = x; image.height = y; image.src = canvas.toDataURL ("image/png"); _ body.removeChild (_ container); document.body.appendChild (image); return image;} drawCanvas ('.container')

two。 Since today's mobile phones have high-definition screens, there will be blurring if you don't handle it, why is it blurred? This involves the device pixel ratio than the devicePixelRatio js provides window.devicePixelRatio to obtain the device pixel ratio.

Function DPR () {if (window.devicePixelRatio & & window.devicePixelRatio > 1) {return window.devicePixelRatio;} return 1;}

This DPR function is to get the pixel ratio of the device, so what do you do after getting the pixel ratio?

Var canvas = document.createElement ('canvas'); / / set canvas element attribute width / height to DOM node width / height * pixel ratio canvas.width = width * scaleBy; canvas.height = height * scaleBy; / / set canvas css node width / height to DOM node width / height canvas.style.width = `$ {width} px`; canvas.style.height = `$ {height} px` / / get brush const context = canvas.getContext ('2d'); / / magnify all paint content by pixel ratio context.scale (scaleBy, scaleBy)

3. After getting the device pixel ratio, multiply canavs.width and canvas.height by the device pixel ratio, that is, scaleBy; sets canvas.style.width and canvas.style.height to the width and height of dom at this time. Why do you want to write that? Finally, when the drawing is hungry, the content will be magnified by the pixel ratio.

For example, iphone6S is a device with a width and height of 375 X 667, 6S window.devicePixelRatio = physical pixels / dips (2 '750 and 375), so do designers usually give you designs of 750' 1334? So if you draw it according to the ratio of one to one, it will blur under the high-definition screen.

4. Finally, call canvas.toDataURL ("image/png"); assign a value to image.src. Because the picture cannot be saved in Wechat, it can only generate a picture file. Call the long press to save picture to album function that comes with Wechat.

At this point, the study on "how to solve the problem of generating pictures in html mobile terminal" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.