JavaScript標(biāo)準(zhǔn)庫提供了多種截圖上傳的實(shí)現(xiàn)方式，各具特點(diǎn)，適用于不同場(chǎng)景。在使用前需要考慮諸如上傳大小限制、圖片格式和安全性等重要因素。
以下是幾種常見的JavaScript截圖上傳實(shí)現(xiàn)方式。
1. H5對(duì)Canvas進(jìn)行截圖上傳
// 選擇圖片
var chooseBtn = document.getElementById("choose-img");
chooseBtn.addEventListener("change", function(){
// 獲取圖片文件
var imgFile = this.files[0];
// 判斷是否是圖片
if(!/image\/\w+/.test(imgFile.type)){
alert("請(qǐng)選擇圖片文件！");
return false;
}
// 加載圖片
var reader = new FileReader();
reader.readAsDataURL(imgFile);
reader.onload = function(e){
var img = new Image();
img.src = e.target.result;
img.onload = function(){
// 根據(jù)圖片大小適配畫布大小
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
// 繪制圖片
ctx.drawImage(img,0,0,width,height);
// 上傳圖片
var imgData = canvas.toDataURL("image/jpeg", 0.8);
// ajax上傳
$.ajax({
type: "POST",
url: "upload.php",
data: {data:imgData},
success: function(data){
alert("上傳成功！");
}
});
}
}
}, false);2. 使用網(wǎng)頁截圖JS庫實(shí)現(xiàn)上傳
// 引入網(wǎng)頁截圖JS庫
<script src="html2canvas.js"></script>
var content = document.getElementById("content"); // 需要截圖的元素
var btn = document.getElementById("screenshot-btn"); // 截圖上傳按鈕
btn.addEventListener("click", function(){
html2canvas(content, {
onrendered: function(canvas) {
// 轉(zhuǎn)為圖片的base64碼
var imgData = canvas.toDataURL('image/jpeg', 0.8);
// ajax上傳
$.ajax({
type: "POST",
url: "upload.php",
data: {data:imgData},
success: function(data){
alert("上傳成功！");
}
});
}
});
}, false);3. 使用Flash進(jìn)行截圖上傳
// 引入swfupload.js等相關(guān)JS文件
<script src="swfupload.js"></script>
<script src="handlers.js"></script>
var swfupload;
var flashvars = {};
var params = {
upload_url: "upload.php", // 上傳地址
file_size_limit : "100 MB", // 文件大小限制
file_types : "*.jpg;*.gif;*.png", // 支持的圖片格式
file_types_description : "圖片文件",
file_upload_limit : 1, // 上傳數(shù)量限制
file_queue_limit : 1,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false
};
var settings = {
flash_url : "js/swfupload.swf", // Flash文件地址
flash9_url : "js/swfupload_FP9.swf",
upload_url : "upload.php", // 上傳地址
post_params : {"PHPSESSID" : ""},
file_size_limit : "100 MB", // 文件大小限制
file_types : "*.jpg;*.gif;*.png", // 支持的圖片格式
file_types_description : "圖片文件",
file_upload_limit : 1, // 上傳數(shù)量限制
file_queue_limit : 1,
button_width: "80",
button_height: "27",
button_placeholder_id : "swfupload-btn", // 上傳按鈕
button_cursor : SWFUpload.CURSOR.HAND,
swfupload_loaded_handler : swfUploadLoaded,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete
};
swfupload = new SWFUpload(settings);總結(jié)：
JavaScript截圖上傳可以方便地實(shí)現(xiàn)圖片上傳功能，提升用戶交互體驗(yàn)。不過需要注意的是，在使用前需要仔細(xì)考慮上傳大小限制、圖片格式和安全性等重要因素，以避免造成不必要的麻煩。另外，不同的上傳方式各有特點(diǎn)，可以根據(jù)需要選擇合適的方式進(jìn)行開發(fā)。