django & cropper.js &bootstrap 實現頭像擷取並上傳
index.html
<!doctype html>
{% load staticfiles %}
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頭像擷取</title>
<link main.js
var imageId = "";
$(function () {
'use strict';
var console = window.console || { log: function () {} },
$alert = $('.docs-alert'),
$message = $alert.find('.message'),
showMessage = function (message, type) {
$message.text(message);
if (type) {
$message.addClass(type);
}
$alert.fadeIn();
setTimeout(function () {
$alert.fadeOut();
}, 3000);
};
// Demo
// -------------------------------------------------------------------------
(function () {
var $image = $('.img-container > img'),
$dataX = $('#dataX'),
$dataY = $('#dataY'),
$dataHeight = $('#dataHeight'),
$dataWidth = $('#dataWidth'),
$dataRotate = $('#dataRotate'),
options = {
mouseWheelZoom: false, //禁用滑鼠滑輪縮放
preview: '.img-preview',
crop: function (data) {
$dataX.val(Math.round(data.x));
$dataY.val(Math.round(data.y));
$dataHeight.val(Math.round(data.height));
$dataWidth.val(Math.round(data.width));
$dataRotate.val(Math.round(data.rotate));
}
};
$image.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'dragstart.cropper': function (e) {
console.log(e.type, e.dragType);
},
'dragmove.cropper': function (e) {
console.log(e.type, e.dragType);
},
'dragend.cropper': function (e) {
console.log(e.type, e.dragType);
}
/*,
'zoomin.cropper': function (e) {
console.log(e.type);
},
'zoomout.cropper': function (e) {
console.log(e.type);
}
*/
}).cropper(options);
// Methods
$(document.body).on('click', '[data-method]', function () {
var data = $(this).data(),
$target,
result;
if (data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
result = $image.cropper(data.method, data.option);
if (data.method === 'getCroppedCanvas') {
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
}).on('keydown', function (e) {
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// Import image
var $inputImage = $('#inputImage'),
URL = window.URL || window.webkitURL,
blobURL;
if (URL) {
$inputImage.change(function () {
//alert("change");
var files = this.files,
file;
if (files && files.length) {
file = files[0];
imageId = file.name;
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('replace', blobURL);
//$inputImage.val('');
} else {
showMessage('Please choose an image file.');
}
}
});
} else {
$inputImage.parent().remove();
}
// Options
$('.docs-options :checkbox').on('change', function () {
var $this = $(this);
options[$this.val()] = $this.prop('checked');
$image.cropper('destroy').cropper(options);
});
// Tooltips
$('[data-toggle="tooltip"]').tooltip();
}());
});
Django後臺處理邏輯
def sub(request):
#return HttpResponse("Hello world ! ")
#imgName = request.GET.get('url')
#context['error'] = 'system exception'
'''
if request.method == "POST":
pf = plateForm(request.POST,request.FILES)
if pf.is_valid():
imgName = uf.cleaned_data['username']
plateImg = uf.cleaned_data['headImg']
return HttpResponse('upload ok!')
'''
x = request.POST.get('x')
y = request.POST.get('y')
w = request.POST.get('w')
h = request.POST.get('h')
#print(request.FILES['file'])
imgType = request.FILES['file'].name.split(".")[1]
imgName = handle_uploaded_file(request.FILES['file'],imgType)
#print("===>>>",x,y,w,h)
if(x !=None and y != None and w!= None and h != None):
line = imgName+"."+imgType+"\t"+x+"\t"+y+"\t"+w+"\t"+h
with open("plate.txt","a+") as f:
f.write(line+"\n")
return HttpResponse("1")
else:
return HttpResponse("0")
def handle_uploaded_file(f,ImgType):
newImageName = str(time.time()).split(".")[0]
destination = open(BASE_DIR+BASE_IMG_DIR+str(newImageName)+"."+ImgType, 'wb')
for chunk in f.chunks():
destination.write(chunk)
destination.close()
return newImageName相關推薦
django & cropper.js &bootstrap 實現頭像擷取並上傳
index.html <!doctype html> {% load staticfiles %} <html lang="zh"> <head> <meta charset="UTF-8"> <meta
【jQuery插件】使用cropper實現簡單的頭像裁剪並上傳
contex 高亮 leo 通過 時也 可能 現在 substring ica 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少時間才看到了這個插件
cropper.js 實現裁剪圖片並上傳(PC端)
由於之前做專案的時候有需求是需要實現裁剪圖片來做頭像並上傳到伺服器，所以上網查詢了很多資料，也試用了許多案例，發現cropper外掛裁剪是比較完善的，所以結合之前的使用情況，編寫了此案例。本案例是參考cropper站點例項，進行修改簡化。 ##option相
cropper.js 實現裁剪圖片並上傳(移動端)
上一篇文章已經編寫了PC端的裁剪圖片案例，這次是涉及移動端的頭像裁剪更換，類似於微信更換頭像功能。。。 思路跟PC端的案例是一樣的，這裡就不多說了。 將案例放到伺服器上，如果出現上傳失敗可能是： 1
(轉)Android學習-使用Async-Http實現圖片壓縮並上傳功能
activit 一次 make down cte hot for lfw ram （轉）Android學習-使用Async-Http實現圖片壓縮並上傳功能 文章轉載自：作者：RyaneLee鏈接：http://www.jianshu.com/p/940fc7ba39e1
前臺Jcrop配合後臺Graphics實現圖片裁剪並上傳
模式 ubi ini gin pre log 清空 圖像 ets Jcrop：一個功能強大的圖片裁剪插件 版本：Jcrop v0.9.12 VS版本：vs2015 下載地址：http://code.ciaoca.com/jquery/jcrop/version/Jcrop-
【前端】js+php實現圖片拖拽上傳
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽圖片上傳</title> </head> <body>
基於HTML5+js+Java實現單檔案檔案上傳到伺服器功能
HTML5程式碼： 方法一：直接表單提交 1 2 3 4 5 6 <form name="upform" action="url" method="POST"> &n
整合springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap實現許可權管理檔案上傳下載多資料來源切換操作日誌記錄等功能
花了兩週,學習了下springboot,然後做個小東西練練手.專案基於jdk1.8+maven整合了springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap等技術,springboot+Listener(監聽器),Filter
Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！
最近說專案可能會用到一個電子簽名，不需要識別的那種，只是一個單純手寫簽名，然後以base64的格式提供給前端web頁面。其實挺簡單的，自定義一個手寫view就上線了。Android 電子簽名，手寫簽名案列實現方法！ 先上圖： 按鈕說明：第一個按鈕是清除手寫板，第二個是將手寫板的
html5+exif.js+canvas實現手機端照片上傳預覽、壓縮、旋轉功能
html5+canvas進行移動端手機照片上傳時，發現ios手機上傳豎拍照片會逆時針旋轉90度，橫拍照片無此問題；Android手機沒這個問題。 因此解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的ios照片進行角度旋轉修正。 利用exif.js讀取照片的拍攝資訊
Vue + Canvas 實現頭像截圖上傳功能（一）
此文共分為兩篇，上篇主要是展示最終的效果，下篇為程式碼實現部分。 首先，上圖看最終的製作效果。 這是選擇圖片前: 這是選擇圖片後： 主要需求有這幾點：
Java實現頭像擷取裁剪後圖片儲存,獲取的是base64資料,怎麼轉換為圖片並儲存到資料庫。並讀取出來。
Java實現頭像拖拽擷取裁剪後圖片儲存,獲取的是base64資料,base64資料轉換為圖片後存入到資料庫。並讀取出來。 1.操作過程效果截圖： 點選編輯頭像進入頭像上傳頁面 頭像上傳頁面 點選選擇圖片，選擇需要上傳的圖片進行拖拽裁剪 裁剪後的
HTML5 file API加canvas實現圖片前端JS壓縮並上傳 （轉載）
www. 手機 回調 pre lan 瀏覽器中 rdp 效果 二進制 一、圖片上傳前端壓縮的現實意義 對於大尺寸圖片的上傳，在前端進行壓縮除了省流量外，最大的意義是極大的提高了用戶體驗。 這種體驗包括兩方面： 由於上傳圖片尺寸比較小，因此上傳速度會比較快，交互會更
js+bootstrap實現分頁、頁碼跳轉
製作page.jsp，在其他頁碼引入，只需把最外層的form標籤的id設定為myForm； 其中 totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁 <%@ page language="jav
js實現檔案拖拽上傳並顯示待上傳的檔案列表
首先實現html頁面的內容:<body> <div name="single" style="text-align: center; "> <A class=btn_addPic href="javascript:void
（轉）linux自動備份oracle數據庫並上傳到備份服務器 腳本實現
oralce 查看 cal .com 中間 term star 開始 library 實際項目中，備份數據是不可缺少的一步，完成數據的自動備份減少個人的工作量，是我們的目標。之前很少寫過腳本，不過這些簡單的操作還是可以做到的！話不多說，開始具體介紹：oracle版本：10.
安卓獲取軟硬件信息並上傳給server(Socket實現)
獲取 acad soc 實現 環境 theme info fcm ntop 首先，項目結構如圖--A：分為client部分CheckInfo和server端CheckInfo_Server。CheckInfo獲取手機信息（Mac，Cpu，內存，已安裝軟件信息等）並上
微信端調取相冊和攝像頭，實現圖片上傳，並上傳到本地服務器
配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時，遇到了圖片上傳的問題，查看了微信的開發者文檔，裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC
基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)
允許 jquery pac locale 錯誤信息 部分 src alt date 首先需要導入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte