Content provider: Jinniu District Wudi Software Development Studio

In a project of the author in 2017, I made a backstage management system for the school. At that time, it was required to have the function of editing papers on the page and then exporting them. This involves knowledge of rich text editors and techniques for turning HTML into images. Today’s post is on how to turn HTML into images. You can see my other blog post on rich text editors how rich text editors work if you want to turn HTML elements into images you need two techniques. Html2canvas — convert HTML to canvas2. Wd-canvas2image — convert canvas to image

Wd-canvas2image: github.com/wudi98/wudi…

NPM download address: www.npmjs.com/package/wd-…

Let’s start by writing a small demo (the actual project is below, so don’t worry) :

First look at the effect: Next code:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
	        margin: 0;
	        padding: 0;
	    }    
	    div {
	        padding: 20px;
	        border: 5px solid black;
	    }
	    h2 {
	        background: #efefef;
	        margin: 10px;
	    }
	    .toPic {
	        display: none;
	    }
	</style>
</head>
<body>
	<h2>Raw HTML</h2>
	<div style="background:red; width: 600px;" class="test">
		<div style="background:green;">
			<div style="background:blue;">
				<div style="background:yellow;">
					<div style="background:orange;">
						6666666666666666666666666666666
					</div>
				</div>
			</div>
		</div>
	</div>
	<h2 class="toCanvas"> <a href="javascript:void(0);">Into a canvas</a></h2>
	<h2 class="toPic"><a href="javascript:void(0);">Into a picture</a></h2>
	<h5>
		<label for="imgW">Width:</label>
		<input type="number" value="" id="imgW" placeholder="Default is original width" />
		<label for="imgH">Height:</label>
		<input type="number" value="" id="imgH" placeholder="Default is original height" />
		<label for="imgFileName">The file name:</label>
		<input type="text" placeholder="File name" id="imgFileName" />
		<select id="sel">
			<option value="png">png</option>
			<option value="jpeg">jpeg</option>
			<option value="bmp">bmp</option>
		</select>
		<button id="save">save</button>
	</h5>
</body>
</html>
Copy the code

The js code is as follows:

<script type="text/javascript" src=". / jquery - 3.3.1. Js. ""></script> /javascript" src="./html2canvas.min.jstext/javascript" src="./canvas2image.js">< span style =" max-width: 100%; clear: both; min-height: 1em;text/javascript"> var test = $(".test").get(0); Click (function (e) {// Call html2Canvas (test, {useCORS: }). Then (function (canvas) {var canvasWidth = canvas.width; Var canvasHeight = canvas.height; // Render canvas $('.tocanvas ').after(canvas); $('.topic ').show(1000); / / click into image $(' toPic '). Click (function (e) {/ / call Canvas2Image plug-in var. Img = Canvas2Image convertToImage (canvas, canvasWidth, canvasHeight); // Render image $(".toPic").after(img); / / click save $(' # save). Click (function (e) {let type = $(' # sel). Val (); Let w = $('#imgW').val(); Let h = $('#imgH').val(); Let f = $('#imgFileName').val(); // Image file name w = (w === ")? canvasWidth : w; // Check whether the input width and height are empty. If they are empty, keep the original value h = (h === "). canvasHeight : h; SaveAsImage (canvas, w, h, type, f); }); }); }); }); Copy the code

Congratulations, you have finished converting HTML to Image! Next, we go into actual combat!

Actual project Presentation:

This is an HTML rich text editor.Now let’s look at the canvas:Finally we turned it into a picture:The project was executed using react. The html2Canvas package was installed directly on the command line. It was -s because the environment was dependent on it online

npm i html2canvas -S
Copy the code

However, the canvas2image package you download from NPM is not usable, so I do not recommend using NPM to install, you can use the author’s resources. Wu Xiaodi’s resources

Github resources: github.com/wudi98/wudi…

This can be relied upon. The author added two click events, which were first converted into canvas and then into pictures. Friends can also directly convert into pictures. The last button is for saving the image

<Tag 
	color="magenta" 
	visible={this.state.visible1} 
	onClick={this.toCanvas.bind(this)} 
	ref={this. ToCanvasImg} > into canvas < / Tag ><Tag 
	color="red" 
	ref={this.toCanvasImgBtn} 
	onClick={this.toImage.bind(this)}
	visible={this.state.visible2}>Into a picture</Tag>
<Tag 
	color="cyan"
	onClick={this.saveImage.bind(this)}
	visible={this.state.visible3}>Save the template</Tag>
Copy the code

And then let’s write the method

toCanvas=(e) = >{
      const jqueryDom = this.editor.$textContainerElem[0].childNodes[0];
      html2canvas(jqueryDom).then(function(canvas) {
        this.setState({
          canvasImg:canvas,
          canvasWidth:canvas.width,
          canvasHeight:canvas.height,
        })
        / / apply colours to a drawing canvas
        this.toCanvasTitle1.current.style.display='block'
        this.toCanvasParent.current.style.display='block'
        this.toCanvasParent.current.appendChild(canvas)
        this.setState({
          visible1:false.visible2:true
        })
      }.bind(this))
    }
  toImage=(e) = >{
    const img = Canvas2Image.convertToImage(this.state.canvasImg,this.state.canvasWidth,this.state.canvasHeight);
    / / apply colours to a drawing canvas
    this.toCanvasTitle2.current.style.display='block'
    this.toImageParent.current.style.display='block'
    this.toImageParent.current.appendChild(img)
    this.setState({
      visible2:false.visible3:true
    })
  }
  saveImage=(e) = >{
    Canvas2Image.saveAsImage(this.state.canvasImg,this.state.canvasWidth,this.state.canvasHeight,'png'.'template.png');
  }
Copy the code

This is what I used in my actual project. Thanks for watching, and please leave a comment if you have any questions. Feel good useful trouble point to let more friends know, thank you!