Home > Article > Backend Development > 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?
How to upload pictures on mobile? , and compress the image to a certain size before uploading?
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/...
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>The
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>The
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...
If you do not consider compatibility with
IE
, you can useFileReader API
to read the file and obtain theBase64
value of the fileimg
tag. You can directly useBase64
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.