root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add convert module and imageToBase64 api

develop
就眠仪式 2020-11-21 22:07:28 +08:00
parent e779a9bdd3
commit be714117a5
4 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
component/pear/modules/convert.js Normal file
View File

@ -0,0 +1,27 @@
layui.define(['jquery', 'element'], function(exports) {
"use strict";
/**
* 数 字 滚 动 组 件
* */
var MOD_NAME = 'convert',
$ = layui.jquery,
element = layui.element;
var convert = new function() {
// image 转 base64
this.imageToBase64 = function(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
}
exports(MOD_NAME, convert);
});

3
component/pear/pear.js
View File

@ -38,5 +38,6 @@ layui.config({
dropdown: "dropdown", dropdown: "dropdown",
card: "card", card: "card",
loading: "loading", loading: "loading",
cropper:"cropper" cropper:"cropper",
convert:"convert"
}); });

19
index.html
View File

@ -72,31 +72,20 @@
<script src="component/pear/pear.js"></script> <script src="component/pear/pear.js"></script>
<!-- 框 架 初 始 化 --> <!-- 框 架 初 始 化 -->
<script> <script>
layui.use(['admin','jquery'], function() { layui.use(['admin','jquery',"convert"], function() {
var admin = layui.admin, var admin = layui.admin,
$ = layui.jquery; $ = layui.jquery;
convert = layui.convert;
//本地环境因相对路径差异，特意转base64处理，实际结合后台使用时，可随意发挥
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
var image = new Image(); var image = new Image();
image.src = "admin/images/avatar.jpg"; image.src = "admin/images/avatar.jpg";
image.onload = function(){ image.onload = function(){
var base64 = getBase64Image(image); $(".layui-nav-img").attr("src", convert.imageToBase64(image));
$(".layui-nav-img").attr("src", base64);
} }
// 重新设置配置文件读取路径，默认为同级目录下的 pear.config.json // 重新设置配置文件读取路径，默认为同级目录下的 pear.config.json
admin.setConfigPath("config/pear.config.json"); admin.setConfigPath("config/pear.config.json");
// 进行框架初始化 // 进行框架初始化
admin.render(); admin.render();
}) })

14
view/system/operate/uploadProfile.html
View File

@ -2,8 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title>头像上传</title>
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
<link rel="stylesheet" href="../../../component/pear/css/pear.css" /> <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../../component/pear/css/pear-module/cropper.css" /> <link rel="stylesheet" href="../../../component/pear/css/pear-module/cropper.css" />
</head> </head>
@ -22,12 +21,10 @@
<div class="layui-row"> <div class="layui-row">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;"> <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
<button class="pear-btn pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button> <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
<button class="pear-btn pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button> <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
<button class="pear-btn pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button> <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
<label for="uploadPicture" class="pear-btn pear-btn-primary" title="选择图片"> <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
<span class="layui-icon layui-icon-upload"></span>
</label>
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片"> <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
</div> </div>
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div> <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
@ -63,6 +60,7 @@
formData.append('file', blob, fileName); formData.append('file', blob, fileName);
formData.append('fileName', fileName); formData.append('fileName', fileName);
formData.append('fileToken', timeStamp); formData.append('fileToken', timeStamp);
// $.ajax({ // $.ajax({
// method: "post", // method: "post",
// url: "", //用于文件上传的服务器端请求地址 // url: "", //用于文件上传的服务器端请求地址