1. 将本地上传的图片转化为 dataUrl供图片预览,可以使用
URL.createObjectURL(Blob/File) 或者 FileReader,参考 https://www.cnblogs.com/zhangdiIT/p/7895903.html
-
将本地图片转化为base64,可使用FileReader
-
将网络上的图片转化为base64, 可使用canvas.toDataURL()
-
将base 64转成blob,可使用canvas.toDataURL()
-
将base64图片提交到服务器
/**
* 通过ueditor将base64图片提交到服务器,依赖jquery.
* var base64str = "data:image/png;base64,/9j/4AAQSkZJRg................ABAQAAAQABAAD/2wBDAAMCAgICOK//Z";
* sumitImageFile(base64str).then(function (data) {
* console.log(data);
* });
*/
function sumitImageFile(base64Codes) {
var convertBase64UrlToBlob = function (urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: mime });
};
var getFileExt = function (urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
return mime.replace("image/", "");
};
var deferred = $.Deferred();
var form = document.forms[0];
//var formData = new FormData(form); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
var formData = new FormData();
var fileExt = getFileExt(base64Codes);
//convertBase64UrlToBlob函数是将base64编码转换为Blob
formData.append("upfile", convertBase64UrlToBlob(base64Codes), "file_" + Date.parse(new Date()) + "." + fileExt); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
//ajax 提交form
$.ajax({
url: window.location.origin + '/article/ueditor/asp/controller.asp?action=uploadimage',
type: "POST",
data: formData,
//dataType: "text",
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
//console.log(data);
if (data) {
data = JSON.parse(data);
if (data.state == "SUCCESS") {
deferred.resolve(window.location.origin + data.url);
}
else {
deferred.reject("error");
}
}
else {
deferred.reject("error");
}
//window.location.href = "${ctx}" + data;
},
xhr: function () { //在jquery函数中直接使用ajax的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log("正在提交." + percentComplete.toString() + '%'); //在控制台打印上传进度
}
}, false);
return xhr;
}
});
return deferred.promise();
}
2. JS 截屏
<html>
<head>
<style>
.box {
width: 600px;
height: 3000px;
background-color: pink;
}
</style>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript">
function save_screen_capture_to_chunzheng(subject) {
html2canvas(document.body).then(function(canvas) {
return canvas.toDataURL(); //base64 string
}).then(function(dataUrl) {
return sumitImageFile(dataUrl, subject);
}).then(function(data) {
console.log(data);
if (data && data['upload_length'] > 0) {
//在这里提交您的表单:比如: 当前表单的id是form_1, 可以写 $('#form_1').submit()
//todo:
}
});
}
function sumitImageFile(base64Codes, subject) {
var convertBase64UrlToBlob = function(urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
};
var getFileExt = function(urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
return mime.replace("image/", "");
};
var deferred = $.Deferred();
var form = document.forms[0];
//var formData = new FormData(form); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
var formData = new FormData();
var fileExt = getFileExt(base64Codes);
//convertBase64UrlToBlob函数是将base64编码转换为Blob
formData.append("file", convertBase64UrlToBlob(base64Codes), subject + "." + fileExt); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
//ajax 提交form
$.ajax({
url: '你提交的URL',
type: "POST",
data: formData,
//dataType: "text",
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(data) {
deferred.resolve(data);
},
xhr: function() { //在jquery函数中直接使用ajax的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log("正在提交." + percentComplete.toString() + '%'); //在控制台打印上传进度
}
}, false);
return xhr;
}
});
return deferred.promise();
}
</script>
</head>
<body>
<div class='box'></div>
<input type="button" value="button" onclick="save_screen_capture_to_chunzheng('玉米又涨价啦')"> 生成界面如下:
</body>
</html>