HTML5 call phone camera and compress, upload

Recently just done a function, in the app to use the embedded page to upload images.
From a functional perspective, the native implementation should be the best. After all, everything on the page is separated by a browser, and all implementations depend on the interface provided by the browser, and the different browsers implement the interface differently ... In the end will fall into the compatibility of the big pit!
Spit Groove to spit groove, but toss the momentum can not be lost!

Use the input File[camera] property to invoke the camera

Simply so easy!

type="file" accept="image/*;" capture="camera" >

Just one simple piece of code, you can open the camera by tapping it in your phone's browser.

captureWhat is it? is actually the setting of the open mode.

<!-- capture=camcorder，调用手机摄像功能 --><input type="file" accept="video/*" capture="camcorder" > <!-- capture=microphone，调用手机录音功能 --><input type="file" accept="audio/*" capture="microphone" >

Meizu MX5 Test Results:

• Google Chrome can open the camera and camera functions, and other methods are the camera, library, File Manager and other hybrid options.
• Bring your own browser open as a file manager.

This indicates that this property compatibility is still a problem. But it's not going to stop me from going on!

Image compression

In today's age of tens of millions of pixels, a photo is often 5M in size. As a conscientious developer, we are responsible for the user's traffic.
What should I do? I don't know. Everyone is using the canvas implementation, I also use.

document.getElementById(‘file‘).addEventListener(‘change‘, function() { var reader = new FileReader(); reader.onload = function (e) { compress(this.result); }; reader.readAsDataURL(this.files[0]);}, false);

Regardless of how the file field is opened, you can get the change selected file or the photo taken in the event.

To create an FileReader object, we need to call readAsDataURL the convert file to an base64 image encoding, as in data:image/jpeg;base64…… this format.
onloadis an asynchronous callback that executes the code inside the method when the file finishes reading. this.resultthe record reads the result, if the read fails, the value is null . Here is the picture compression of the specific operation.

var compress = function (res) {var img =New Image (), maxh =160; Img.onload = function () {var CVS = document.createelement (if (img. Height > Maxh) {img. Width *= maxh/img. height; img. height = Maxh;} Cvs. width = img. width; CVs. height = img. height; Ctx.clearrect (0, 0, Cvs. width, CVS. height); Ctx.drawimage (IMG, 0, 0, Img. Width, img. height); var dataurl = Cvs.todataurl ( ' Image/jpeg ', 0.6); //biography} img.src = res;}           

Creates an Image object that src assigns a value to the read result, and also onload writes the code that handles the picture in an asynchronous callback.
We're going to start using canvas image compression here.

First, the dimensions are scaled proportionally, then the picture is drawn onto the canvas, and the method is finally called to toDataURL compress the image quality.

context.toDataURL(‘MIME类型‘, 图像质量0-1);  // 该方法返回base64图像编码

The code omits some of the supervisor operations, such as file type constraints and file size judgments (less than a certain value can not be compressed).
Finally, the data is sent to the back-end operation, this is not said.

HTML5 Call Camera

Through the above code has been able to call the phone camera to take pictures, compress, upload the whole process.
However, in the process of tossing and finding a way to call the camera. Attention, yes 摄像头 ! The camera is called using input. The difference is that the camera is only capturing images, and the camera also includes some native photos, settings, and other controls.

You can do a lot of interesting things by calling the camera, such as photo beautification, filters, and so on. It can be said that implementing a third-party camera is no problem.
Previously downloaded an Android camera app, less than 100K size, can achieve some of the style of photography, perhaps HTML5 implementation of it.

Need to use is the Getusermedia API, the specific implementation here will not post.

"HTML5 Label for use"

1	<inputtype="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"class="sign_file"/>

"Equal to zoom picture"

12345678910111213141516171819202122232425262728293031323334

function drawOnCanvas(file) {    var reader = new FileReader();    reader.onload = function(e) {        var dataURL = e.target.result,        canvas = document.querySelector(‘canvas‘),        ctx = canvas.getContext(‘2d‘),        img = new Image();        img.onload = function() {            var square = 320;            canvas.width = square;            canvas.height = square;            var context = canvas.getContext(‘2d‘);            context.clearRect(0, 0, square, square);            var imageWidth;            var imageHeight;            var offsetX = 0;            var offsetY = 0;            if (this.width > this.height) {                imageWidth = Math.round(square * this.width / this.height);                imageHeight = square;                offsetX = -Math.round((imageWidth - square) / 2);            } else {                imageHeight = Math.round(square * this.height / this.width);                imageWidth = square;                offsetY = -Math.round((imageHeight - square) / 2);            }            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);            var base64 = canvas.toDataURL(‘image/jpeg‘, 0.5);            $(‘#j_thumb‘).val(base64.substr(22));        };        img.src = dataURL;    };    reader.readAsDataURL(file);}

The FileReader object is used to parse the local image address obtained by the file control, please Baidu for more details. Set the parsed address to the SRC attribute of the img tag, then draw the picture through the canvas object, and in the process there is a scaling algorithm, then use the DrawImage method to draw the image into the canvas.
"How to get pictures of picture data to backend processing"
The base64 encoded value can be obtained by Canvas.todataurl (' image/jpeg ', 0.5), then you can follow the traditional post or Ajax approach.

"Let the Picture Show"

1234	document.querySelector(‘input[type=file]‘).onchange = function() {    varfile = input.files[0];    drawOnCanvas(file);};

"Background processing Mode"

123	$base64= $_POST[‘formFile‘];$IMG = base64_decode( $base64 );file_put_contents(‘1.png‘, $IMG);

Root traditional upload picture is different, this time backstage need to use Base64_decode decoding

DEMO

HTML5 call the phone camera and compress, upload