Edit Avatar , Realize photo albums , Photo function , And it can zoom and crop , Customizable UI, quote 'cropper.js', 'exif.js'

/* Initialize the clipping plug-in */
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var Cropper = window.Cropper;
var console = window.console || { log: function () {} };
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var actions = document.getElementById('actions');
var isUndefined = function (obj) {
return typeof obj === 'undefined';
};
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,// Crop box scale 1:1
viewMode : 1,// Show
guides :false,// Crop box dotted line Default true Yes
dragMode : "move",
build: function (e) { // Load start
// You can put your transition effect
},
built: function (e) { // Loading complete
$("#containerDiv").show();
$("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : true,// Whether the container displays a grid background
movable : true,// Can I move pictures
cropBoxMovable :true,// Whether to allow dragging the crop box
cropBoxResizable :true,// Whether drag is allowed Change the size of the crop box
};
var cropper = new Cropper(image, options);

/* Select Picture */
var inputImage = document.getElementById('inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('Please choose an image file.');
}
}
$(inputImage).find("img").hide();
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ' disabled';
}

/* Button bound event */
actions.querySelector('.docs-buttons').onclick = function (event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var result;
var input;
var data;

if (!cropper) {
return;
}

while (target !== this) {
if (target.getAttribute('data-method')) {
break;
}
target = target.parentNode;
}

if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
return;
}

data = {
method: target.getAttribute('data-method'),
target: target.getAttribute('data-target'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};

if (data.method) {
if (typeof data.target !== 'undefined') {
input = document.querySelector(data.target);

if (!target.hasAttribute('data-option') && data.target && input) {
try {
data.option = JSON.parse(input.value);
} catch (e) {
console.log(e.message);
}
}
}

if (data.method === 'getCroppedCanvas') {
data.option = JSON.parse(data.option);
}

result = cropper[data.method](data.option, data.secondOption);

switch (data.method) {
case 'scaleX':
case 'scaleY':
target.setAttribute('data-option', -data.option);
break;

case 'getCroppedCanvas':
if (result) {
fileImg = result.toDataURL('image/jpg');
$("#previewResult").attr("src", fileImg).show();
//$("#photoBtn").val(" To choose ");
submitForm();
}

break;

case 'destroy':
$("#inputImage").val("");
$("#containerDiv").hide();
$("#imgEdit").hide();
break;
}

if (typeof result === 'object' && result !== cropper && input) {
try {
input.value = JSON.stringify(result);
} catch (e) {
console.log(e.message);
}
}
}
}

var fileImg = "";
$(function(){
$("#imgCutConfirm").bind("click",function(){
$("#containerDiv").hide();
$("#imgEdit").hide();
//$("#getCroppedCanvasModal").modal("hide");
})
});

// Upload your avatar
function submitForm() {
$("#registerForm").attr("enctype","multipart/form-data");
var formData = new FormData($("#registerForm")[0]);
formData.append("photo", encodeURIComponent(fileImg));//
//formData.append("fileFileName","photo.jpg");
$.ajax({
url: "/my/upphoto",
type: 'POST',
data: formData,
timeout : 10000, // Timeout settings , Unit millisecond
async: true,
cache: false,
contentType: false,
processData: false,
success: function (result) {
},
error: function (returndata) {
Alert.closedLoading();
}
});
}

Mobile image editing and uploading -cropper More articles about

  1. Use localResizeIMG3+WebAPI Upload pictures on the mobile phone

    Preface practice ~ practice ~ Yesterday's use OWIN As WebAPI Host of .. Um. .. A lot of people ask .. Is there something missing - - ok , If you want to OWIN Boarding somewhere else ... The code is as follows : namespace Conso ...

  2. HTML5 Upload photos on the mobile phone

    1.accept="image/*" capture="camera" Automatically call the camera function on the mobile phone accept="image/*" captu ...

  3. Mobile terminal H5 Upload your avatar

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. megapix-image plug-in unit Use Canvas Compressed image upload Solve the problem of picture upload function on mobile phone

    The official account of WeChat recently. . Related functions of subscription number , Found the original page used uploadify Picture upload function to the mobile phone, some types of mobile phones can not be used , such as iphone, As for why, I don't think it's necessary to say much (uploadify Use fla ...

  5. django Summary of common methods &lt; Handwritten pagination - Upload your avatar -redis cache , Ranking ...&gt;

    1. Don't use the built-in module <Paginator> The handwritten pagination function of views.pydef post_list(request): page = request.GET.get('page', 1) # ...

  6. jquery.uploadifive Solve upload limit image or file size

    dotNet Crazy road No.28   It's been a brutal day. , Tomorrow will be more cruel. , The day after tomorrow is beautiful , But most people die tomorrow night , Only those real heroes can see the sun the day after tomorrow .  We're here to put a dent in t ...

  7. About the rich text editor on the mobile phone qeditor Image upload transformation

    Recently, the project needs to add rich text editing on the mobile terminal , I searched the Internet , Most of them are aimed at pc Version of , Not compatible with mobile phones , Of course, due to the small screen of mobile phone and other reasons, many powerful functions of rich text editor are also limited , So the editor function to be found must be concise . For a long time , Find out qed ...

  8. html5,js Plug in to achieve mobile phone avatar cut upload

    Ideas : Open the album first , Select Picture , Cutting pictures , Turn into base64 Format , And then upload it to seven cattle storage , return url, And then to the back end , The whole process is like this . It's using angular frame , The image plug-in uses imagecropper.js, crap ...

  9. Write mobile adaptive page case ,springMVC Code ,SpringMVC Upload code , Get rid of input The original style in the box , send ios The button has no rounded corners ,css Medium border-radius similar

    1. Pages written <%@ page language="java" contentType="text/html; charset=UTF-8"  page ...

Random recommendation

  1. MIT 6.828 JOS Learning notes 8. Exercise 1.4

    Lab 1 Exercise 4 Read about C Knowledge of the pointer part of language . The best reference books, of course, are "The C Programming Language". read 5.1 To 5.5 section . Then download poi ...

  2. flash A few questions about development

    1. Cross-domain request xml or txt problem , Use URLLoader, Cannot be used across domains 2.js and swf Interaction problem , Use as much as possible swfobject.js Dynamically create

  3. Bootstrap3.0 Learn round 12 ( Navigation 、 label 、 Breadcrumb navigation )

    Please check the details http://aehyok.com/Blog/Detail/18.html Personal website address :aehyok.com QQ Technology group number :206058845, The verification code is :aehyok Links to articles in this article :ht ...

  4. docker &amp; nodejs

    Docker Deploy Node js demo Program 1. Get ready node js Program , Use express frame . mkdir demo stay demo Create under folder package.json { "name& ...

  5. Java——( 7、 ... and )Map And HashMap and Hashtable Implementation class

    ------Java train .Android train .iOS train ..Net train . Looking forward to communicating with you ! ------- Map Map For data with mapping relationships , therefore Map Two sets of values are stored in the set , A set of values is used for saving Map Inside ke ...

  6. zoj1940( Three dimensional search )

    Topic link :http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=940 analysis : Three dimensional is actually searching in six directions , Think clearly and carefully , Soon AC 了 ...

  7. java Operator And (&amp;)、 Not (~)、 or (|)、 Exclusive or (^)

    Recently HashMap Source code , Encountered such a piece of code : static final int hash(Object key) { int h; return (key == null) ? 0 : (h = k ...

  8. Answer key P4008 【[NOI2003] Text editor 】

    Block linked list and its application The train of thought is very clear Look at the code comments The code is ugly #include<cstdio> #include<cctype> #include<cstring&g ...

  9. asp.net combination html Use

    In use asp.net When developing a system , It's more convenient to use controls , But you also know that using its controls can lead to uncontrollability , especially css, How to define with front end html+css+js To use asp.net(c#) Well , Here's a small example , Implementation page ...

  10. 【Zookeeper series 】zookeeper Interview questions ( turn )

    Link to the original text :https://segmentfault.com/a/1190000014479433 1.ZooKeeper What is it? ? ZooKeeper It's a distributed one , Open source distributed application coordination service , yes ...