Mobile picture operation (ii)--preview, rotate, compose

Preview is already mentioned in the previous section, and previews can be made by Data:url format or URL object.

var file = Upload.files[0]; // URL Object var url = url.createobjecturl (file); var New  = ' 100% '=function(e) {  window. Url.revokeobjecturl (this// destroy }

// data:url Format var New  = ' 100% '; var New  function() {  this. result;}; Reader.readasdataurl (file);

Everything is going well, but there are a lot of pits that need to be talked about slowly. Start with a small function from the front.

This small function is to synthesize two images, forming a new picture .

First, the realization of technology

1) The uploaded control is implemented with "input[type=file"

Android WebView does not support this control, no wonder the button is pressed to press, and then only use the interface provided by the client to do the upload

During the discovery, the UC Browser automatically wraps the upload control as a three button, simply set to "opacity:0;" Can.

2) Use "FileReader" To obtain the image content in data URL format by means of method Readasdataurl , and assign the value to image.

iOS when uploading pictures or photos, the display of the width of the high is reversed, this time we added a step to rotate the operation, let the user to control.

When assigning the SRC value to the image, the value "Crossorigin" is assigned, which is used for the subsequent picture cross-domain

3) Draw the picture on "canvas" and rotate the canvas. Rotate by calculating coordinates and angles

4) Merge the rotated "canvas" with the remaining two text images through a new "canvas".

After the two "canvas" is drawn together, the images uploaded through WebView cannot be used with the "Todataurl ()" method, because the canvas is contaminated and the picture in the first canvas is cross-domain.

5) Finally, the content of data URL format is uploaded to the server to save.

Total development time is 3 days, in the process has been a number of technology overturned redo or logical reorganization, compatibility also has a lot of problems, including the picture of the wide and high self-adaptation, but also very imperfect.

Is the final effect, picked the Zhang Song Lion's photo photos:

Second, preview

When I was doing it, the 2nd and 3rd were all together, and that was when the picture was shown and the position was calibrated.

Just in the implementation of the process encountered a lot of trouble, and the time is hasty, the bug fix up a bit longer, only two steps.

first talk about the original process :

1) iOS images upload or take pictures, wide and high opposite

I use an Android phone, just at the beginning did not find this problem, after others to help test the time, only to find this major problem, the next is to toss this thing, want to automatically correct the direction.

1. Get the picture metadata by exif.js , get the "Orientation" attribute to determine the direction "This property in my Android has a value of Undefined,ios", a total of 8 values

On the left is the description and the right is the display. The table with "*" refers to flipping over.

Next is to do the calculation, there are many ways on the internet, for the ">ios7" system, the calculation logic can refer to the next localresizeimg plug-in 195 lines .

By the way, this plugin uses the Gulp development method, if you want to debug to configure the relevant code, you can refer to the " front-end automation build Tool Gulp Records "

Plug-ins also use a lot of promises/a+ specifications, about this specification can refer to "JavaScript promises/a+ specification Implementation "

Exif.getdata (typeoffunction() {  = Exif.gettag (This, "Orientation") ;   // calculation Logic....});

2. The "<=ios7" system is calculated in slightly different ways. IOS6 picture upload will be squashed (when the photo is over 2M), this is a IOS6 bug, larger pictures may occur.

The calculation logic can also refer to the localresizeimg plug-in 165 line . To solve this bug you need to introduce megapix-image.js.

function (megapiximage) {  varnew  megapiximage (IMG);   // calculation Logic });

2) Change the canvas "canvas" through the method "Todataurl" to the data URL format

1. In the mobile QQ browser, the canvas object uses the Todataurl method to obtain no data and needs to refer to the jpeg-encoder.js solution.

var cvs = document.createelement (' canvas '); var ctx = Cvs.getcontext ("2d"0, 0); var theimgdata = ctx.getimagedata (0, 0, Cvs.width, cvs.height); // Encode the image and get a URI back, Toraw was false by default var jpeguri = Encoder.encode (theimgdata, quality);

It took a lot of time to rotate the direction automatically during development. You encounter various problems, such as the "orientation" property is not available, the angle of auto-rotation is not correct.

The back greedy simple, found a canvasresize plug-in , although it will be automatically corrected, but the picture is a little blurred, and the width of the picture is not easy to control. The effect is not satisfactory, had to be divided into two steps.

The final process :

1) Add Rotation page

First calculate the starting coordinate point x and Y, the simple point is the width and height divided by 2, and then through the canvas "translate", and then "rotate" to calculate the angle. At "drawImage", the X and Y points turn negative and shift past.

var xpos = Canvas_width/2; var ypos = canvas_height/2* math.pi/180-width/2,-HEIGHT/2, width, height);

Third, the synthesis

Click on confirm in to automatically synthesize.

1) Picture width and Height adaptive

The width of the canvas is just a simple ratio, and the canvas is divided by the width of the picture, and I have the same width of the picture and the bottom of the picture, as shown:

var multiple = Width/header.width; // Canvas width divided by picture width var header_height = header.height * multiple; // Top Picture var footer_height = footer.height * multiple; // Bottom Picture var footer_y = canvas_height-footer_height;

2) Place the top and bottom picture on the second canvas with the previous rotated canvas

Ctx.drawimage (rotate_canvas, 0, 00,0, footer_y, width, footer_height);

Here comes the problem of a canvas pollution . The above "Rotate_canvas", the picture gets two kinds, one is uploaded through the "File" control, and the other is uploaded on the interface provided by the WebView.

The two unique differences are across domains, and the second interface returns images from another domain name. Picture cross-domain, then Rotate_canvas is also a cross-domain.

Cross-domain, the "Todataurl()" method is affected. This time you need IMG images across domains.

1. Picture Settings Crossorigin Property, this is a HTML5 property, compatibility is not very good, testing a few Android, some lines, some do not.

Rotate_img.crossorigin = "Anonymous";

2. The server needs to be set up to respond correctly to the Access-control-allow-origin header.

When debugging, if the server is not configured, you can use Fiddler to simulate the response header.

A. Find the filter option first

B. Setting the request header

C. Set the response header, note that the content in the request header is identical, less "http" is not

Resources:

Http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201409/278736.shtml H5 The holes in the development of photo application

https://imququ.com/post/how-to-auto-rotate-photo-in-js.html Image Auto-rotation front-end implementation scheme

Http://www.impulseadventure.com/photo/exif-orientation.html JPEG Rotation and EXIF orientation

http://blog.csdn.net/linlzk/article/details/48652635 using Exif.js to solve the 90-degree rotation problem of uploading portrait photos on iOS phones

Http://www.slideshare.net/99leon/html5-create-thumbnail Html5 Create thumbnail

Mobile picture operation (ii)--preview, rotate, compose