javascript - How to use canvas to convert the content in a div into an image without using a plug-in.

Question

Many people on the Internet mentioned using canvas, but the key content conversion part seems to be mostly assisted by plug-ins, and the only example I found that did not rely on plug-ins ran incorrectly. I would like to ask a master how to convert the content in p into a picture without using a plug-in~~

Answer 1

It’s not that you can’t use plug-ins, but do you know what principles are used internally to implement plug-ins? Do you understand the general principles and logic? Plug-ins are not an implementation method! Plugins are just one solution! Maybe you write it yourself, and the implementation method is the same as the plug-in!

Back to the question, is it feasible to convert p into a picture? What is the workload? Are you aware of it? In terms of feasibility, if there are plug-ins that can be implemented, it means that it is feasible in the existing front-end field. What is the implementation principle?

The first thing you have to think about is that the front-end code runs in the browser. Well, the first thing we have to think about is, does the browser directly provide this kind of API? What are the browser APIs looking for? Find the BOM DOM documentation. As far as I know, Firefox seems to be able to use a certain node as the background of a certain element. It invented the background: -moz-element() syntax in CSS, and there is no API similar to screenshots.

You also mentioned canvas. As a developer, it’s best to stay curious. You can understand very briefly how they implement this kind of plug-in. You don't need to know all the details of how to accomplish this function, but you need to know why this implementation principle works.

OK, how to draw p on canvas? Canvas gives you the ability to process pixels, and theoretically you can draw anything. What the plug-in does is to read p and the style of p, draw p on the canvas, and then recurse the child nodes of p. Okay, is this job easy? It’s certainly not simple! Which god can build a wheel with his bare hands? Then stick the wheel you created on the ground of this question to give you an answer? Which great god can teach you?

The difference between you and the master is not that the master can write html2canvas freehand, but that the master can clearly analyze problems when encountering them.

Of course, I am not a master, I just can’t help but complain when I see this kind of problem.

Answer 2

You need to convert p to svg first, and then convert svg to canvas, but there are a few points to pay attention to:

1. When converting html to svg, please note that there cannot be control elements like input, otherwise the conversion will fail;

2. In the process of converting html to svg, you need to traverse all the styles of html elements and convert them to inline styles before converting to svg, otherwise you may see a blank.

Answer 3

Actually, this is the need you mentioned. You can turn a corner

You can take a screenshot first and then paste it into the input to bind an input paste paste eventpaste 事件
然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')
这不就是一个图片了吗
最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click()Then event.clipboardData.items is read out using var img = new Image()

Finally placed in < code>canvas uses context.dramImage(img,0,0) var url = context.toDataURL('image/png') 🎜Isn’t this just a picture?🎜Finally use const a = document .createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a. click() and the image will be downloaded:)🎜