javascript - How to upload images on mobile? , and compress the image to a certain size before uploading?

How to upload pictures on mobile? , and compress the image to a certain size before uploading?

Reply content:

How to upload pictures on mobile? , and compress the image to a certain size before uploading?

1. For asynchronous upload, if you still want to use the direct file upload method, you can use HTML5's FormData. For specific operations, please refer to this blog. http://www.cnblogs.com/lhb25/...

2. I have another way to upload pictures asynchronously. First convert the image into a base64 string, and then submit the base64 string to the server. After the server receives it, you can use a specific API to convert the base64 string into image content. The following is the specific implementation method:

<code>var getObjectURL = function(file) {
        var url = null;   
        if (window.createObjectURL !== undefined) { // basic  
            url = window.createObjectURL(file);  
        } else if (window.URL !== undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL !== undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;
    }</code>

getObjectURL method is used to convert the image file object in the incoming input into a temporary url, and this url is of the same domain.

<code>var converImgTobase64 = function(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    }</code>

converImgTobase64 method is to pass in the url obtained above and convert it into a base64 string through canvasAPI. Note that this url must be in the same domain and cannot cross domains, so the getObjectURL method is necessary.

Example:

<code>var input = $("input[type=file]")[0],
    src = getObjectURL(input.files[0]);

converImgTobase64(src, function(base64Str) {
    //处理base64Str相关的callback，可以直接在这里发送ajax请求。
});
</code>

The code of this part of the component is in one of my util libraries. Welcome to refer to it and make suggestions for rectification~~~https://github.com/zero-mo/Br...

In addition, for image compression, here is an operation based on canvas, you can try it.
http://www.cnblogs.com/xiao-y...

The following is a quote from my previous answer

If you do not consider compatibility with IE, you can use FileReader API to read the file and obtain the Base64 value of the file
img tag. You can directly use Base64 to display the image.
Afterwards, you can use some plug-ins to crop the image and upload it to the server to save it

FileReader API reference documentation: https://developer.mozilla.org...
jQuery cropping image plug-in (supports mobile): http://www.jq22.com/jquery-in...

As for compression, the size of the cropped image is naturally much smaller than the original image

Original question address: https://segmentfault.com/q/10...

The article I just wrote:
https://segmentfault.com/a/11...
Mainly uses the native HTML5 file form selection, then uses the plug-in to compress it, and finally uploads it directly using the FormData output by the plug-in.