How to use cropper.js and exif.js to realize profile picture upload, zoom, crop and rotation

This article mainly explains "how to use cropper.js and exif.js to achieve avatar upload, zoom, cropping and rotation". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to use cropper.js and exif.js to upload, scale, crop and rotate your profile picture."

Made a small avatar upload function, while dealing with the ios vertical photo rotation problem. Cropper.js (note: cropper compressed version of js in the mobile version of the zoom picture will have a black screen and picture flying bug, so it is recommended to introduce the development version of cropper) rely on jquery,exif is used to obtain photo information, used to fix the ios vertical photo rotation problem, I used the amazeui framework, I also introduced in the file.

This is the html file.

Cropper picture cropping and scaling logo

Turn off upload

Upload the picture left and right.

This is the js file.

$(function () {'use strict'; / / initialize var $image = $(' # image'); $image.cropper ({aspectRatio:1/1, viewMode: 1, autoCropArea:0.8, dragMode:'move', cropBoxMovable:false, cropBoxResizable:false, zoomOnTouch:true, zoomable:true, movable:true,}) Var $inputImage = $('# inputImage'); var URL = window.URL | | window.webkitURL; var Orientation var rotate_num var blobURL; if (URL) {$inputImage.change (function () {var files = this.files; var file; if (files & & files.length) {file = files [0] If (/ ^ image\ /\ w+$/.test (file.type)) {blobURL = URL.createObjectURL (file); $image.attr ("src", blobURL) EXIF.getData (file, function () {EXIF.getAllTags (this); Orientation = EXIF.getTag (this, 'Orientation') }); $image.one ('built.cropper', function () {/ / Revoke when load complete URL.revokeObjectURL (blobURL);}). Cropper (' reset', true) .cropper ('replace', blobURL); $inputImage.val ('') } else {window.alert ('Please choose an image file.');});} else {$inputImage.prop (' disabled', true). Parent (). AddClass ('disabled');} $(' # up-btn-ok'). On ('click',function () {var img_src=$image.attr ("src") If (img_src== ") {$('# my-alert'). Modal ('open'); return false;} var url=$ (this) .attr (" url "); var canvas=$ (" # image "). Cropper (' getCroppedCanvas'); var cv_img = document.createElement (" canvas "); var ctx = cv_img.getContext (" 2d ") Var x = canvas.width/2; var y = canvas.height/2; cv_img.width = canvas.width; cv_img.height = canvas.width; ctx.clearRect (0mem0, canvas.width, canvas.height); / / clear the contents of the canvas first ctx.translate (xmemy) / / move the drawing origin to the midpoint of the canvas if (Orientation = = 6) {ctx.rotate (Math.PI/2);} else if (Orientation = = 3) {ctx.rotate (- Math.PI/2);} else if (Orientation = = 8) {ctx.rotate (Math.PI/1);} ctx.translate (- XCindy) / / move the canvas origin to ctx.drawImage (canvas,0,0); var data=cv_img.toDataURL ("image/jpeg"); $("# pic_img"). Attr ("src", data) $('# new_pic'). Val ($("# pic_img"). Attr ("src")); $('# doc-modal-1'). Modal ('close');});}) Function rotateimgright () {$("# image") .cropper ('rotate', 90);} function rotateimgleft () {$("# image") .cropper (' rotate',-90);} function set_alert_info (content) {$("# alert_content") .html (content) } at this point, I believe you have a deeper understanding of "how to use cropper.js and exif.js to upload, scale, crop and rotate your profile picture". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!