Html2canvas-items encountered in the Pit point summary (update ...)

The horizontally centered element then runs left-biased

Clearly is the horizontal center of the code, out of the left, the structure is left picture right text, sometimes the picture ran to the left, sometimes the whole left a little bit
This problem is not often encountered, the scene is the parent div element Text-align=center, the internal two child elements are set to Display:inline-block mode. Then the drawing will appear on the left side of the div biased left or directly on the left side of the case.
The problem has not been solved, and there is no study because of what, when there is time to not appear ...

Dom with a background map will have a bottom line.
, if there is a DOM element that is filled with a background graph and there is no structure inside, then the bottom of the frame will have a line consistent with the bottom of the background image.
Sometimes it's solved by stretching the height of the DOM element, and sometimes not.

the operation is insecure
Canvas.todataurl Error The operation is insecure
Canvas.todataurl (type, encoderoptions); syntax


Encoderoptions (the second parameter) can set the picture quality for a picture of image/jpeg or IMAGE/WEBP type, with a value of 0-1, or a default value of 0.92 instead.

Html2canvas in base64 code is empty
In or can be said in the mobile browser, Canvas.todataurl unsuccessful. Canvas.todataurl (type) Gets the empty data:;
Toss for a half day ...
Colleagues said that if the length of the base64 code has a limit, forget more than how much, then I try to enlarge four times times to enlarge twice times, the problem solved!!
Do not laugh at me magnified four times times, in order to clear ha ha. But the change to twice times and four times times the ratio is not bad. Instead of digging a hole and filling it out for a while!

Invisible elements are blank after
Can't see, such as opacity for 0, or visibility for hidden, let alone display:none. Not even,
Cut out of the same is white, it is conceivable, after all, not cut the thing is of course white.
The workaround is to have the canvas part hidden behind. The final choice, the level is set to-1, the upper layer to cover him.

The premise is that the previous layer to another can set the background color, can cover him not to be seen by the world

Long-Press-map function in Html2canvas combination
First use Html2canvas to get an HTML to canvas base64 code,

Then create an IMG element on the page, src=base64 the code, insert the DOM, and cover at the top of all the elements (or where the user needs to hold the Save), opacity set to 0.

Then the user presses the long press to save, and the saved is the invisible transparent map that is ready to be covered there beforehand.
It turns out that the transparency of the picture is not visible in the top of the page, it can be stored in a map.

And a lot of H5 on the market, the results of the page and the last picture is not the same, it is estimated that this, after all, invisible code

Html2canvas+jsbridge save two images simultaneously
When the Html2canvas and Jsbridge are in collaboration, they trigger a simultaneous two-image-map occurrence.

The first deposit diagram is perfect, if you do not turn off the second memory map, you will save two, will also save two. It is only good to use the Save diagram for the first time.
Is the Jsbridge tune two times, the second automatic adjustment reason at present speculation is Html2canvas cause,

Because of the layer positioning, there will be a problem only after Html2canvas returns base64 code. The specific reason is not found.
The Final Solution is: With Sessionstore, the first time after the picture is cut, the image address is deposited into the sessionstore,

After the judgment, Sessionstore in the Base64 code will not have to Html2canvas generated code, directly take data storage diagram,

Html2canvas all static resources of the page when triggered (except JS)
CSS and IMG images, which are problems that are found when used in combination with Wdatapicker.

It was nothing, love loading several times, but the Datapicker style is written in the IFRAME, reloading the DOM has also lost the style of others. This is going to be a big thing.
Big return to large, the root cause of the problem is not solved, or a temporary solution to the root of each trigger Html2canvas save the PDF, re-datapicker drawing style, is so capricious!

Html2canvas cross-domain

76474080

The following intercepts some of the author's ideas, mainly for solving the problem in the place:
usecors:true This parameter is very important, there is no configuration, still can not solve the problem;
There are roughly two types of solutions based on the existing solution:
(1). Set the header on a cross-domain server to allow cross-domain requests. Set header settings on the server to allow cross-domain requests (using Nginx for static resource mapping)
(2). Using proxy scripts to get the Base64 encoded string of an alien image
　　
About the cross-domain and resolution solution address: https://lengxing.github.io/
Set the header for cross-domain access http://blog.csdn.net/enter89/article/details/51205752

Leadership recommendations:

Domain name reverse proxy,

Picture allows cross-domain use: access-control-allow-origin: *;

Html2canvas+qrcode truncated two-dimensional code is obscured by white background

Html2canvas execution-because there is one place in the page is the QRCode execution of the address to the QR code, each time after the two-dimensional code is not cut down, that piece is a white block
Then the two-dimensional code img External div structure background color set translucent, two-dimensional code is truncated, the original is a div background color covered img
Principle or do not understand, clearly levels are set up still does not work, unexpectedly by their father to cover is drunk.
The two-dimensional code is white because the outer structure of the white background to cover, and finally the two-dimensional code img External div structure does not set the background color to solve the

Html2canvas, the background music will play repeatedly under IOS11
Workaround See blog: 79207468

1 import Html2canvas from ' Html2canvas/dist/html2canvas.min '; 2 Export {Html2canvas};

Html2canvas

1 /*2 * @Author: [email protected]3 * @Date: 2017-12-25 15:18:124 * Html2image Module5 * @param {object=} parameter parameter configuration6 * @param {string} Parameter.targeteleid: Target element id--area to intercept7 * @param {string} parameter.imgtype: Picture format to keep: Png|jpg|bmp|gif8 * @param {Boolean} Todown: Whether to perform the download function and return the picture Base64 address without executing9 */TenImport {Html2canvas} from './html2canvas '; One //fixed a bug where background music was repeatedly loaded under IOS11 AConst IOSMUSIC = (idname) = ={   -Let Agent = Navigator.userAgent.toLowerCase (),//judging the phone system - version;  the   //Console.log (agent);  -   if(Agent.indexof ("Like Mac OS X") > 0){   -       //iOS -Let Regstr_saf =/os [\d._]*/gi, +Verinfo =Agent.match (REGSTR_SAF);  -Version = (verinfo+ ""). Replace (/[^0-9|_.) /ig, ""). Replace (/_/ig, ".");//get the specific system version number +Let Typenum = Version.split (".") [0];//gets the first digit of the system version number A       //Console.log (version); at       //Console.log (typenum); -       if(Typenum >= 11){   -$ (idname). Removeattr ("AutoPlay");  -       }   -   }   - } inExport Let html2img = (Parameter,todown =true) = { -Const PROMISE =NewPromise ((resolve,reject) ={ to     if(Parameter.imgtype = = ' png ' | | parameter.imgtype = = ' jpg ' | | parameter.imgtype = = ' bmp ' | | parameter.imgtype = = ' gif '){ +Let type =Parameter.imgtype; -       /** the * Get MimeType * * @param {String} type the old Mime-type $ * @return The new Mime-typePanax Notoginseng       */ -Const _FIXTYPE =function(type) { theType = Type.tolowercase (). Replace (/jpg/i, ' jpeg '); +Let R = Type.match (/png|jpeg|bmp|gif/) [0]; A           return' image/' +R; the       }; +       /*picture cross-domain and fuzzy processing*/ -Let sharecontent = Parameter.targeteleid,//Required Package (native) DOM object $width = sharecontent.clientwidth,//sharecontent.offsetwidth;//Get DOM width $Height = sharecontent.clientheight,//sharecontent.offsetheight;//Get DOM height -Canvas = document.createelement ("Canvas"),//Create a canvas node -scale = 2;//define any magnification to support decimals theCanvas.width = width * scale;//Define Canvas Width * Zoom -Canvas.height = height * scale;//Define Canvas Height * ZoomWuyiCanvas.style.width = sharecontent.clientwidth * scale + "px"; theCanvas.style.height = sharecontent.clientheight * scale + "px"; -Canvas.getcontext ("2d"). Scale (scale, scale);//get context, set scale WuLet opts = { -Scale:scale,//The scale parameter added AboutCanvas:canvas,//Custom Canvas $Loggingfalse,//log switch for easy viewing of the Html2canvas internal execution process -Width:width,//Dom Original width - Height:height, -Usecors:true //"Important" Turn on cross-domain configuration A       }; +       /*when Html2canvas, the background music repeats the problem. */ the Iosmusic (parameter.musicid); -       /*Html2canvas*/ $Html2canvas (sharecontent,opts). Then (function(canvas) { theLet Imgdata = Canvas.todataurl (' image/png '); the         //Console.log (Canvas.todataurl (' image/png '). Substring (0,20)); the         //Console.log (Canvas.todataurl (' image/png '). length); the         //Let save_link = Document.createelementns (' http://www.w3.org/1999/xhtml ', ' a '); -         //save_link.href = Imgdata.replace (_fixtype (type), ' Image/octet-stream '); in         if(todown) { theLet Link_title = Parameter.titlestr? Parameter.titlestr + ' _ ': ' Easypass_ '; theSave_link.download = Link_title + (NewDate ()). GetTime () + '. ' +type; AboutLet event = document.createevent (' mouseevents '); theEvent.initmouseevent (' click ',true,false, window, 0, 0, 0, 0, 0,false,false,false,false, 0,NULL); the save_link.dispatchevent (event); the}Else{ + Resolve (imgdata); -         } the       }); Bayi}Else{ theRejectNewError (' Parameter.imgtype type is wrong, it should be a string, and there are only four types of values. ‘)); the     } -   }); -   returnpromise; the}

html2img

The configuration is adjusted to suit your needs.

Last Call:

1 html2img ({2 Targeteleid:ocanvas,3Imgtype: ' PNG ',4TITLESTR: ' Test what kind of car you are ',5MusicID: ' #musicAudio '6},false)7. then ((imgurl) ={8Let oimg = document.createelement (' img ');9oimg.id = ' oimg ';TenOimg.classname = ' o-img '; OneOimg.src=Imgurl; A Document.body.appendChild (oimg); -});

2018-06-25 17:54:43 (ongoing update ...)

Html2canvas-items encountered in the Pit point summary (update ...)