H5 using canvas for poster functions

recently received a demand, in which users upload images to generate posters. This requirement is more conventional, the realization of the idea is relatively simple, through the use of user input, the uploaded image processing, and finally through the third-party library Html2canvas The corresponding image can be synthesized. Although the idea is simple, but in the process of implementation will encounter a variety of small problems, now will encounter the problems to be summarized.

1. The iphone and some Android models are rotated through the camera photos

reason: As the current mobile phone photos are basically2Mabove, andiOSas long as the more than2MThe picture will rotate automatically. Taken directly after taking pictures.UIimage(withUiimagepickercontrolleroriginalimageremoved), it's itselfimageorientationproperty is3, i.e.Uiimageorientationright. If this image is used directly then it's OK, but if it is clipped, scaled, and so on, it's thisimageorientationproperty will become0. At this point the picture is rotated in other places. imageorientationis read-only and cannot modify its value directly.

solution : when photographed, get input exif.js ( exif.js javascript The function extension of reading the original data of the image, example : photo direction, camera device model, shooting time, ISO ISO, gps geographical location and other data. ) gets to orientation

1 indicates a rotation of 0 degrees, i.e. no rotation.
6 indicates clockwise rotation of the dimension
8 = Rotate the dimension counterclockwise
3 rotation degree
All we have to do is get the picture from input after taking the photo, and get its Orientation value, according to Orientation value to further process the image, processing the code as follows:

Import EXIF from ' Exif-js ';varFile ={upload:function(e) {varFile = E.target.files[0]; varType = File.type.split ('/') [0]; if(Type! = ' image ') {alert (' Please upload pictures '); return; }        varSize = Math.floor (file.size/1024/1024); if(Size > 3) {alert (' Picture size must not exceed 3M '); return;        }; varReader =NewFileReader ();        Reader.readasdataurl (file); varOrientation =NULL; //get photo Direction angle properties, user Rotation controlExif.getdata (file,function() {exif.getalltags ( This); Orientation= Exif.gettag ( This, ' Orientation ');        }); Reader.onloadstart=function() {}; Reader.onloadend=function(e) {varDataurl =Reader.result; varimaged =NewImage (); IMAGED.SRC=Dataurl; Imaged.onload=function() {                varCanvas = document.createelement (' Canvas '); varCTX = Canvas.getcontext (' 2d '); //Setting the canvas's width in a normal environment                varw = 0, H= 0; if( This. width < 750) {W= This. Width; H= This. Height; Canvas.width=W; Canvas.height=h; } Else{W= 750; Canvas.width=W; varScale = This. Width/ This. Height; W= w > This. width? This. width:w; H= w/Scale ; Canvas.height=h; }                //if (Navigator.userAgent.match (/iphone/i) | | navigator.userAgent.match (/samsung/i)) {                if(Orientation! = "") {                    Switch(orientation) { Case3: Ctx.rotate (math.pi/180 *); Ctx.drawimage ( This,-W,-H, W, h);  Break;  Case6:                            //here because the picture is corrected back, so also to re-set the canvas's height has reached a highly adaptiveCanvas.width = 750; varScale = This. Height/ This. Width; Canvas.height= Canvas.width/Scale ; H= > This. Height? This. height:750; W= h/Scale ; Ctx.rotate (* math.pi/180); Ctx.drawimage ( This, 0,-H, W, h);  Break;  Case8: Ctx.rotate (* math.pi/180); Ctx.drawimage ( This,-H, 0, H, W);  Break;  Case2: Ctx.translate (W,0); Ctx.scale (-1, 1); Ctx.drawimage ( This, 0, 0, W, h);  Break;  Case4: Ctx.translate (W,0); Ctx.scale (-1, 1); Ctx.rotate (math.pi/180 *); Ctx.drawimage ( This,-W,-H, W, h);  Break;  Case5: Ctx.translate (W,0); Ctx.scale (-1, 1); Ctx.rotate (* math.pi/180); Ctx.drawimage ( This, 0,-W, H, W);  Break;  Case7: Ctx.translate (W,0); Ctx.scale (-1, 1); Ctx.rotate (* math.pi/180); Ctx.drawimage ( This,-H, 0, H, W);  Break; default: Ctx.drawimage ( This, 0, 0, W, h); }                } Else{ctx.drawimage ( This, 0, 0, W, h); }                //next work on the picture                            };    }; }, Event:function() {        $(". UploadFile"). Change (function(e) {file.upload (e);    }); }, Init:function() {         This. event (); }};module.exports= file;

2, get the user avatar generated poster can not be displayed

Reason: because the user's avatar is the domain name,canvas because of the security mechanism, limited the use of cross-domain pictures, so the picture of the user picture can not be displayed.

Workaround:

(1) back end in the acquisition of the user picture, the avatar image is saved to the server, generate a new image link under the domain name

(2) using nginx as a proxy, forwarded the corresponding request to the avatar image of the server. This shows the implementation of the second method

The front end modifies the image address to the corresponding proxy server domain address

Data.avatar.replace (' thirdwx.qlogo.cn/', ' proxy.newmedium.xyz/wximg/')

Nginx Proxy configuration

     Server {        listen       ;        server_name  xxxxxx;        Add_header Access-control-allow-origin *;         /wximg/ {            proxy_pass http://thirdwx.qlogo.cn/;         }    }

because the project static file domain name on the Cdn, so we can only use a different domain name as the proxy domain name, which involves cross-domain issues, but also in the server and front-end processing of a section, set the header to Access-control-allow-origin *, frontend set to allow cross-domain

    Html2canvas (Document.queryselector (". Poster"), {           ' #ffffff ',           true     }) 

Three steps, one step can not be less.

3, the page has the sound to play when calls Html2canvas generates the poster, theiphone will have the repetition sound

The test found that when the Html2canvas is in use, if the page has audio playback, in the iOS system, the audio is copied one copy, and the playback status is maintained.

just at the beginning has been unable to find the reason, finally no way, from the source code to findHtml2canvasthe implementation of the principle of finding the problem lies. Html2canvasin theDomtranslates toCanvas, the page is copied to aiframe, and then work on the location where the corresponding element label is calculated. So when you copy the page, the audio plays the labelAduioalso copied to theiframe, and thenCanvaswill be deleted when finishediframelabel, but copied to theiframeThe audio has started playing the process and cannot followiframecontent is erased and destroyed.

finally , the solution was found in the official document of Html2canvas. Html2canvas exposing the interface ignoreelements, we just set the Aduio tag to ignore it.

Html2canvas (Document.queryselector (". Poster"), {    true,    function  (EL) {        if (el.tagname = = ' AUDIO ')            {returntrue;        }   }) ;

4, the poster upload data is too large

when the canvas is converted to base64 data, sometimes the user chooses the file picture to be a bit large, resulting in poor upload performance. Finally, you can use the Todataurl method to specify the quality of the canvas converted to the base64 image to solve this problem.

Canvas.todataurl ("Images/jpeg", 0) , the first parameter is to encode the image to jpeg format, the second parameter (0-1 ) is to specify the image quality, the higher the value the greater the quality

H5 using canvas for poster functions