Nowadays, there are many WeChat public account operation activities, and there is a need to generate pictures. After the pictures are generated, they can be sent to friends and circulated in Moments, which is conducive to product promotion!
1. You can use canvas to generate images, but since there is already an open source library called html2canvas, I didn’t write it myself in order to save time.
github address:html2canvas
Stop rambling, let’s look at things first! ! !
LiveDemo
/** * Get the pixel ratio based on window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; } return 1; } /** * Convert the incoming value to is an integer*/ function parseValue(value) { return parseInt(value, 10); }; /** * Draw canvas */ async function drawCanvas (selector) { // Get the DOM node you want to convert const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); // The calculated width and height of the DOM node const width = parseValue(box.width); const height = parseValue(box.height); // Get the pixel ratio const scaleBy = DPR(); // Create a custom canvas element var canvas = document.createElement('canvas'); // Set the canvas element attribute width and height to DOM node width and height * pixel ratio canvas.width = width * scaleBy; canvas.height = height * scaleBy; // Set canvas css width and height to DOM node width and height canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; // Get the brush const context = canvas.getContext('2d'); // Enlarge all drawing content by pixel ratio context.scale(scaleBy, scaleBy); let x = width; let y = height; return await html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x,y) }) } /** * Convert image 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')2. Since today’s mobile phones all have high-definition screens, blur will appear if you don’t do any processing. Why does blur occur? This involves device pixel ratio 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 obtain the pixel ratio of the device. So what should we do after obtaining the pixel ratio?
var canvas = document.createElement('canvas'); // Set the canvas element attribute width and height to DOM node width and height * pixel ratio canvas.width = width * scaleBy; canvas.height = height * scaleBy; // Set canvas The css width and height are DOM node width and height canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; // Get the brush const context = canvas.getContext('2d'); // Enlarge all drawing content by pixel ratio context.scale(scaleBy, scaleBy);3. After obtaining the device pixel ratio, multiply canvass.width and canvas.height by the device pixel ratio, which is scaleBy; at this time, set canvas.style.width and canvas.style.height to the width and height of the dom. Think about it, why do you write this? Finally, when drawing, the drawn content is enlarged by pixel ratio
For example, the width and height of the iPhone 6S device are 375 So if you draw it on a one-to-one basis, it will be blurry on a high-definition screen. Just look at the picture and tell the story. 6S DPR=2
6plus DPR=3
4. Finally, call canvas.toDataURL(image/png); assign the value to image.src. Since pictures cannot be saved in WeChat, you can only generate picture files and call WeChat’s own long-press function to save pictures to albums, as shown in the figure:
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.