One of the basic functions of the project - uploading pictures by mobile phone
Technology stack:
1. Use canvas for compression (this should be familiar)
2. Use EXIF JS to get the photo rotation angle attribute, because some mobile phones will take a rotation angle attribute for the photo taken due to the direction of the mobile phone when taking photos
Core code:
var _orientation; //Photo angle properties EXIF.getData(fileInput, function () { _orientation = EXIF.getTag(fileInput, 'Orientation'); }); let reader = new FileReader(); reader.readAsDataURL(fileInput); reader.onload = function (e) { var image = new Image(); image.src = e.target.result; image.onload = function () { var canvas = document.createElement("canvas"); //Create a temporary canvas var _width = this.width, _height = this.height, _ratio = _height / _width; //Isometric compression if (this.width > 800) { _width = 800; _height = 800 * _ratio; } canvas.width = _width; canvas.height = _height; var ctx = canvas.getContext("2d"); switch (_orientation) { case 6: // Rotate 90 degrees canvas.width = _height; canvas.height = _width; ctx.rotate(Math.PI / 2); ctx.drawImage(this, 0, -_height, _width, _height); break; case 3: // Rotate 180 degrees ctx.rotate(Math.PI); ctx.drawImage(this, -_width, -_height, _width, _height); break; case 8: // Rotational -90 degree canvas.width = _height; canvas.height = _width; ctx.rotate(3 * Math.PI / 2); ctx.drawImage(this, -_width, 0, _width, _height); break; default: ctx.drawImage(this, 0, 0, _width, _height); } //Data objects to be uploaded const resultBase =dataURItoBlob(canvas.toDataURL("image/jpeg", 0.9)); //... omit upload operation code }; } //Convert dataURI to Blob for upload dataURItoBlob:function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type:mimeString}); }
You will often encounter bug s and other problems. It can be frustrating, but try to stay calm and think systematically. Remember that practice is the best way to solve problems.
We collect stones, but we must always look to the Cathedral of the future.
Here I recommend my front-end learning exchange group: 784783012, which is all front-end learning. From the most basic HTML+CSS+JS [cool special effects, games, plug-in packaging, design mode] to the mobile HTML5 project practical learning materials have been sorted out and sent to each front-end small partner. The latest technology, synchronized with the needs of enterprises, where friends are learning and communicating, every day there will be Daniel regularly explain the front-end technology!
Click: join