Save the HTML page in H5 as a picture and hold it long

Source: Internet
Author: User

Tags: small woman how window conversion res ips problem sequence appears

Recently received a new demand: Page A static H5, a page in the middle is the input information, and then jump to the last page, automatically generate the page image, the user can long press the picture saved to the phone.

Show the last page:

Just get this demand, read a lot of articles on the Internet, the most common is to use Html2canvas + canvas2image to achieve. So, follow the footsteps of the predecessors, embarked on a continuous mining pit mining pit mining the journey.

Here is a direct description of the problems I encountered in the process of doing this and the solution:

1.html2canvas Picture cross-domain:

There are many solutions to this problem online:

This is the most commonly used, just at the beginning I just added the red box inside this sentence, but did not have any effect, still error. Later I saw someone say, add the previous sentence, so decisive in the add in.

These two sentences actually express the same meaning: allow the picture to cross the domain.

Of course, there are netizens said, directly to a null value can be, I tried a bit, not ok~~~~.

2. Multiple use of Canvas DrawImage method picture Display Problem 2.1 Picture loading order problem

In my demand, it must be a text description and the QR code is displayed on the picture, just at the beginning I was

1. DrawImage text,

2. DrawImage Two-dimensional code

3. drawImage Background big picture

However, the results surprised me, only the background map loaded rendering. Then, through the omnipotent network to know: DrawImage order should be: The picture at the bottom of the need to load the first rendering.

2.2 Picture not complete

In the 2.1 problem appeared at the same time also encountered this problem, image rendering is not complete, this. Nima ... Demand is just beginning to do, how to embarrass a little girl ...

But there is a problem, it is solved.

Picture rendering is incomplete because the canvas starts rendering when the picture is not loaded.

So the solution is: wait for the picture to be loaded and then perform drawimage operation on it, on the ~ ~ ~ Code:

3.canvas a cross-domain problem saved as a picture

Encountering this problem, I really spent a bunch of time looking at articles, watching blogs, and.

This will be omnipotent netizen to my solution has no effect:

They say: 1. Take the picture and put it on your server (I use the company's image server. But it's not the same address as my release-code server.

2. With canvas2image Ah, however, this is not also cross-domain,, and nothing, to use.

3. What is there again, forget, anyway that day made me a mental breakdown,, and did not solve the problem, and then really can not help, asked the company's great God: The Great God said: "You use base64?"

A language surprise dream people, yes, this method is great, so it will not cross the domain AH. At that time, in order to make progress, direct online picture into Basa64, and then saved into a JS file.

It was like this: the red box indicates the format of the file. 、

At this point, my HTML has shifted to canvas and moved from canvas to IMG presence page,

Later, I was looking at this paragraph, it seems not very good, this file appears very large, so I would like to use this file in the format of turning it into Base64,

1. Use canvas todataurl to convert the image to Base64

But this approach inevitably leads to cross-domain problems, and pass


The Chinese transcoding in this file will be problematic, and I have tried, the basic string transcoding is OK, but for the file transcoding will be problematic

3. The browser is native and supports one thing: Window.atob and Window.btoa

Window.atob is converting the Base64 format to a string or binary encoding format

Window.btoa is to convert a string or binary encoding format to base64 format so the above base64.js really, don't waste your time and energy to see,

What about the file encoding and decoding?

Native also has the method: Filerender () This constructor,

var reader = new FileReader ();

Reader.onload = function (e) {


Reader.readasdataurl (file);

This method has not been tested O (╥﹏╥) O.

So, so far, we need to convert the files to Base64. Format, I did not find the right method or JS plugin to operate, if you have any good way, trouble tell Me (* ̄︶ ̄).

4.The picture is blurred and only a portion of the window is displayed

When I was defining canvas, I defined the canvas as a wide, wide height, which was the size of the background map, so it was rendered in the actual size of the canvas when DrawImage.

However, when the image is changed to the size of the window, so the picture will be blurred, if the picture is set to the canvas width, the picture in the window and display incomplete.

Therefore, it is necessary to calculate the retio of the device,

Basic idea: Calculate ratio---> Then canvas to IMG (render according to canvas actual size)---> Picture scaled by Window size

This method directly returns the ratio of the device.

And then when we were doing canvas rendering,

When the image is rendered later, the width of the image is divided directly by ratio so that the picture can be displayed in the window completely.

5. ios10.2 Canvas Turn picture black

At this point, the page is rendered, and the test on my Android (Huawei) is OK

But the needs of the classmate (iOS) told me: her phone on the last page is black and, there is a white box at the top,, I am a rip, days, not iOS does not support it.

So, using the next seat classmate's cell phone. Well, not at all.

Ah ah ah ah, to collapse.

Look at the Internet, there is a solution is: using double buffering (the possibility of a black screen is drawimage when the amount of computation is very large, and then the rendering is not successful)

The idea is that when you start a new Cachecanvas, you actually render the image in the cached canvas, and then render the content in the Cachecanvas to the canvas that needs to be displayed on the page.

I used a delay in the middle, although the time is very short, but it also ensures that the Cachacanvas does render in a formal canvas rendering.

In this way, the last page of iOS on the seat around me can be displayed, but that ios10.2 still not,, ah, online check, this version of the problem has been there, so, (?_?),

In this way, this demand in my continuous mining process, it seems to be almost finished, there is very little direct code to come in, because it seems to look not very good, so I basically do.

Finally, a few tips:

1. Directly save the webpage picture into base64 format, if the picture is very few, can, if the picture is many, still suggest not so operation, compare a Base64 data format is already very big ...

2. The picture is compressed first and then encoded in base64 format.

3. For the position of the drawimage, it is relative to the actual size of the canvas. Therefore, if you use percentages, it is recommended that you get the width of the window and then assign the value.

4. When using canvas filltext, there is a limit to the maximum width, is the last parameter of Filltext (directly write the value can be, without units, the default appears to be PX).

5. For the general H5, or the picture to pre-load it,. (Many pictures on the Web pre-loading methods, self-search OH).

Save the HTML page in H5 as a picture and hold it long

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: