JS任意截图并上传图片，上传视频、上传文件
2024-06-01 21:55:36
**
JS截图上传图片
**
在前端WEB开放过程中，经常使用上传图片、上传视频、上传音频以及上传其他文件等，通常都使用到各种上传插件，但是很多插件只是单纯的上传文件，不具备图片截图，即使有也很传统，今天我自己写了通过鼠标在图片进行绘制需要截图的矩形框便可以进行截图，很方便，很快捷，可以应用各种场景，比如轮播图只需要某个部分、头像截取、产品图，不需要PS重新设计图，上传图片后通过鼠标截取指定部分便可以截取想要的图片，同样具备视频上传预览，音频上传预览。如下图演示。
使用技术：使用了Vue（可有可无，就是简单事件操作，可以改成自己框架的使用方式）、ElementUI（进度条和按钮，可以改成自己框架的按钮样式）、原生POST网络请求XMLHttpRequest，技术没有的问题兄弟姐妹，可以把上传进度条改成Canvas绘制，我懒得改了，可以把上传哪里改成原生的
<style>
.clearfix {clear:both!important}
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.fl{float:left}
.fr{float:right}
.c_red {color: red}
.f14{font-size: 14px}
.cursor{cursor:pointer}
</style>
<div class="clearfix" style="position: relative;overflow: hidden;"><div class="fl" style="width: 600px;"><div style="padding: 16px"><div style="background: url('{__static__}/image/bg.png');position: relative;height: 568px;width: 100%"><canvas id="canvas" width="568px" height="568px" style="background: #fff;position: relative;z-index: 800">抱歉，您的浏览器不支持canvas元素</canvas><div v-if="is_show == true" style="position: absolute;z-index: 1000;top: 0px;left: 0px;background: rgba(0,0,0,0.5);width: 100%;height: 573px;text-align: center;"><div style="margin-top: 230px"><!-- element ui 进度条 --><el-progress type="circle" :stroke-width="8" text-color="FFFFFF" :percentage="progress"></el-progress></div></div></div></div></div><div class="fl" style="width: calc(100% - 600px) !important;"><div class="tc" style="padding-top: 16px;padding-right: 16px;"><div class="tl" style="position: relative;width: 100%;height: 183px;cursor: pointer;overflow: hidden;background: url('{__static__}/image/bg.png')"><img id="img" src="" @click="showBigImg"></div><div style="position: relative !important;width: 100% !important;padding-top: 14px"><div><a href="javascript:;" class="loadingfile" style="width: 159px;border-radius: 0px">选择文件<input type="file" value="" class="head"></a></div><div class="tl" style="line-height: 32px"><span>图片压缩：</span><span>是</span><input type="radio" name="isCs" value="1" /><span>否</span><input type="radio" name="isCs" value="2" checked="checked"/></div></div><div class="f14 c_red tl" style="width: 100%;padding-top: 6px;line-height: 24px">点击选择文件按钮，上传图片后在左边图片上，按住鼠标左键移动画出需要上传的指定位置图片，无任何操作将原图上传，该截图功能只支持图片上传</div></div></div>
</div>
<div class="tpl-botton" style="bottom: 0px;text-align: right;padding-top: 6px;padding-bottom: 2px;padding-right: 6px"><el-button type="primary" @click="onSave()">立即上传</el-button><el-button style="width:105px" onclick="closeHead()">取消</el-button>
</div>
<script type="text/javascript">
var form = null;
var imgurl = "";
var fileData= null;
var imgbase = null;
var vue = new Vue({el: "#dcappm",data() {return {progress: 0,is_show: false,}},created() {window.is_show = this.is_show;},methods: {//保存onSave(){var _this = this;if(this.is_show){parent.erro("文件正在上传中，请稍后操作！");return;}if(!fileData){parent.erro("请上传文件！");return;}if(imgbase == null){if(isCheck() == 1){initCompression(imgurl, function(){_this.upload();});}else{form = new FormData();form.append("file", fileData);_this.upload();}}else{//组装上传参数if(isCheck() == 1){initCompression(imgbase, function (){_this.upload();});}else{var file = blobToFile(imgbase, fileData.name);form = new FormData();form.append("file", file);_this.upload();}}},//上传upload(){var _this = this;this.is_show = true;HttpClient({url: "{__app__}/v1/upload/load", //上传地址type: "POST",data: form,success: function(data){_this.progress = 0;_this.is_show = false;localStorage.setItem("XFROM_UPLOAD_IMG", JSON.stringify(data.list));initView();parent.closeformdia(data.msg);},progress: function(progress){_this.progress = Math.ceil(progress);},error: function(error){parent.erro(error);}});},showBigImg(val){//预览大图，自己实现该功能parent.openWord(val.target.currentSrc);}}
});
var canvas = document.getElementById("canvas");
if (canvas.getContext) {var context = canvas.getContext('2d'); //2d用单引用括起来
}
//绘制
canvas.drawing = function (x1, y1, x2, y2, e) {let self = this;if (!context) {return;} else {// 设置画笔的颜色和大小context.fillStyle = "red"; // 填充颜色为红色context.strokeStyle = "#FF00E4"; // 画笔的颜色context.lineWidth = 2; // 指定描边线的宽度context.save();context.beginPath();if (self.strokeRectFlag) {// console.log('画空心矩形')self.initCanvas();if (e.shiftKey === true) {// 正方形let d = ((x2 - x1) < (y2 -y1)) ? (x2 - x1) : (y2 - y1);context.strokeRect(x1, y1, d, d);} else {// 普通方形context.strokeRect(x1, y1, x2 - x1, y2 - y1);}} else if (self.strokeCircelFlag) {// console.log('画空心圆形')self.initCanvas();let k = ((x2 - x1) / 0.55);let w = (x2 - x1) / 2;let h = (y2 - y1) / 2;if (e.shiftKey === true) {// circlelet r = Math.sqrt(w * w + h * h);context.arc(w + x1, h + y1, r, 0, Math.PI * 2);} else {// bezier double ellipse algorithmcontext.moveTo(x1, y1 + h);context.bezierCurveTo(x1, y1 + h * 3, x1 + w * 11 / 5, y1 + h * 3, x1 + w * 11 / 5, y1 + h);context.bezierCurveTo(x1 + w * 11 / 5, y1 - h, x1, y1 - h, x1, y1 + h);}context.stroke();}context.restore();context.closePath();}
};
//按下鼠标
canvas.onmousedown = function mouseDownAction(e) {let self = this;self.X1 = e.offsetX;self.Y1 = e.offsetY;self.isMouseDown = true;//self.loadImage();
};
//移动鼠标
canvas.onmousemove = function mouseMoveAction(e) {let self = this;if (self.isMouseDown) {self.X2 = e.offsetX;self.Y2 = e.offsetY;self.drawing(self.X1, self.Y1, self.X2, self.Y2, e);}
};//鼠标抬起
canvas.onmouseup = function mouseUpAction(e) {let self = this;self.lastImage = canvas.toDataURL('image/png');self.isMouseDown = false;if((e.offsetX - self.X1) > 0 && (e.offsetY - self.Y1) > 0){//生成切片图片var cvas = document.createElement('canvas')var ctt = cvas.getContext('2d');var imgs = new Image();imgs.crossOrigin = 'Anonymous';imgs.src = imgurl;imgs.onload = function() {//第一次坐标点var X1 = self.X1;var Y1 = self.Y1;//最后坐标点var X2 = e.offsetX;var Y2 = e.offsetY;if(this.width > this.height){var pifx = (this.width / canvas.width);var newH = (this.height / pifx);var tranY = (canvas.height - newH) / 2; //平移点//图片上起始真实坐标点img_x1 = X1 * pifx;img_y1 = (Y1 - tranY) * pifx;//图片上最后真实坐标点img_x2 = X2 * pifx;img_y2 = (Y2 - tranY) * pifx;//图片的长宽var img_w = img_x2 - img_x1;var img_h = img_y2 - img_y1;//绘制图片cvas.width = img_w;cvas.height = img_h;ctt.drawImage(imgs, img_x1, img_y1 , img_w , img_h , 0 , 0 , cvas.width , cvas.height);}else if(this.width < this.height){var pifx = (this.height / canvas.height);var newW = (this.width / pifx);var tranX = (canvas.width - newW) / 2; //平移点//图片上起始真实坐标点img_x1 = (X1 - tranX) * pifx;img_y1 = Y1 * pifx;//图片上最后真实坐标点img_x2 = (X2 - tranX) * pifx;img_y2 = Y2 * pifx;//图片的长宽var img_w = img_x2 - img_x1;var img_h = img_y2 - img_y1;//绘制图片cvas.width = img_w;cvas.height = img_h;ctt.drawImage(imgs, img_x1, img_y1 , img_w , img_h , 0 , 0 , cvas.width , cvas.height);}else{var pifx = (this.height / canvas.height);//图片上起始真实坐标点img_x1 = X1 * pifx;img_y1 = Y1 * pifx;//图片上最后真实坐标点img_x2 = X2 * pifx;img_y2 = Y2 * pifx;//图片的长宽var img_w = img_x2 - img_x1;var img_h = img_y2 - img_y1;//绘制图片cvas.width = img_w;cvas.height = img_h;ctt.drawImage(imgs, img_x1, img_y1 , img_w , img_h , 0 , 0 , cvas.width , cvas.height);}//显示截图var cutImgUrl = cvas.toDataURL('image/png');imgbase = cutImgUrl;initShows(cutImgUrl);}}
};
//加载绘制
canvas.loadImage = function () {let self = this;let img = new Image();img.crossOrigin = 'Anonymous';img.src = self.lastImage;context.drawImage(img, 0, 0, canvas.width, canvas.height);
};
//初始化
canvas.initCanvas = function () {context.clearRect(0, 0, canvas.width, canvas.height);//canvas.loadImage();
};//上传请求
var HttpClient = function (param){var xmlHttp = null;if (window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}else if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}if(xmlHttp != null){if(param.type == null){param.error("请求类型错误！");return;}xmlHttp.onload = function() {if (this.status == 200) {var data = JSON.parse(this.response);param.success(data);};};xmlHttp.upload.onprogress = function(e) {if (e.lengthComputable) {var percentComplete = (e.loaded / e.total) * 100;param.progress(percentComplete);}};xmlHttp.onerror = function(e) {param.error(e);};//xmlHttp.timeout = 1000*60*20;xmlHttp.ontimeout = function () {param.error("请求超时");}if(param.type == "GET" || param.type == "get"){xmlHttp.open("GET", param.url, true);//true 异步}else{xmlHttp.open("POST", param.url, true);}xmlHttp.setRequestHeader('AUTH-TOKEN', localStorage.getItem("xform_token"));xmlHttp.send(param.data);}else{param.error("请求不支持");}
}//Radio选择值
var isCheck = function (){var temp = document.getElementsByName("isCs");var value = 1;for(var i=0; i < temp.length; i++) {if(temp[i].checked){value = temp[i].value;break;}}return value;
}//blob流转file
var blobToFile = function (dataurl, fileName){var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}var file = new File([u8arr], fileName, {type: mime});file.lastModifiedDate = new Date();return file;
};//图片压缩
var initCompression = function(csImg, success){var csCanvas = document.createElement('canvas')var csContext = csCanvas.getContext('2d');var csImage = new Image();csImage.crossOrigin = 'Anonymous';csImage.src = csImg;csImage.onload = function() {// 图片原始尺寸var originWidth = this.width;var originHeight= this.height;// 最大尺寸限制var maxWidth = 720;var maxHeight = 480;// 目标尺寸var targetWidth = originWidth;var targetHeight= originHeight;// 图片尺寸超过设置的限制if (originWidth > maxWidth || originHeight > maxHeight) {if (originWidth / originHeight > maxWidth / maxHeight) {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));} else {targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));}}//canvas对图片进行缩放csCanvas.width = targetWidth;csCanvas.height = targetHeight;csCanvas.style.background = "rgba(0,0,0,0)";// 清除画布csContext.clearRect(0, 0, targetWidth, targetHeight);// 图片压缩csContext.drawImage(csImage, 0, 0, targetWidth, targetHeight);var csImgURL = csCanvas.toDataURL('image/jpeg', 1);//组装上传参数var file = blobToFile(csImgURL, fileData.name);form = new FormData();form.append("file", file);if(success){success();}}
};//显示右边小图
var initShows = function(imgurl){//生成切片图片var imgs = new Image();imgs.crossOrigin = 'Anonymous';imgs.src = imgurl;var cut = document.getElementById("img");cut.style = "";var setWH = 183;imgs.onload = function() {// 图片原始尺寸var originWidth = this.width;var originHeight= this.height;if(originWidth > originHeight){var pifx = (this.width / setWH);var newH = (this.height / pifx);cut.style.marginTop = (setWH - newH) / 2 + "px";cut.style.width = "100%";}else if(originWidth < originHeight){var pifx = (this.height / setWH);var newW = (this.width / pifx);cut.style.marginLeft= (setWH - newW) / 2 + "px";cut.style.height = "100%";}else{cut.style.width = "100%";cut.style.height = "100%";}cut.src = imgurl;}
};//初始化绘图
var initDraw = function (flag) {context.globalAlpha = 1;canvas.strokeRectFlag = false;canvas.strokeCircelFlag = false;canvas[flag] = true;// 设置鼠标样式，默认画笔，如果canvas.style.cursor = "url({__static__}/image/paintbrush.png) 0 0, default";if (canvas.eraserFlag) {canvas.style.cursor = "url({__static__}/image/eraser-20.png) 10 10, default";}//添加图片canvas.style.background = "url("+imgurl+")";canvas.style.backgroundRepeat = "no-repeat";var imgs = new Image();imgs.crossOrigin = 'Anonymous';imgs.src = imgurl;imgs.onload = function() {if(this.width > this.height){var pifx = (this.width / canvas.width);var newH = (this.height / pifx);canvas.style.backgroundPositionY = (canvas.height - newH) / 2 + "px";canvas.style.backgroundSize = "100% " + newH + "px";}else if(this.width < this.height){var pifx = (this.height / canvas.height);var newW = (this.width / pifx);canvas.style.backgroundPositionX = (canvas.width - newW) / 2 + "px";canvas.style.backgroundSize = newW + "px 100%";}else{canvas.style.backgroundSize = "100% 100%";}}
};//视频预览
var video = document.createElement('video');
var interval = null;
var initVideo = function(){context.globalAlpha = 1;canvas.style.backgroundRepeat = "no-repeat";canvas.style.backgroundSize = "100% 100%";/* video.setAttribute("controls","controls");video.setAttribute("autoplay","autoplay");video.setAttribute("loop","loop");video.setAttribute("style","width:568px;height:586px"); */video.controls = false;video.loop = true;video.autoplay = true;video.src = imgurl;video.addEventListener('play',function(e){var width = e.target.videoWidth;var height = e.target.videoHeight;//1000/25=40interval = window.setInterval(function(){if(width > height){var pifx = (width / canvas.width);var newH = (height / pifx);var tranH = (canvas.height - newH) / 2context.drawImage(video, 0, tranH, canvas.width, newH);}else if(width < height){var pifx = (height / canvas.height);var newW = (width / pifx);var tranX = (canvas.width - newW) / 2context.drawImage(video, tranX, 0, newW, canvas.height);}else{context.drawImage(video, 0, 0, canvas.width, canvas.height);}}, 40);});video.addEventListener('pause',function(){//clearInterval(interval);})
}//上传音频预览
var audio = new Audio();
var initAudio = function (){context.globalAlpha = 1;audio = new Audio();audio.controls = false;audio.loop = true;audio.autoplay = true;audio.src = imgurl;var AudioContext = window.AudioContext || window.webkitAudioContext;var audioContext = new AudioContext();var analyser = audioContext.createAnalyser();analyser.fftSize = 256;analyser = audioContext.createAnalyser();var audioSrc = audioContext.createMediaElementSource(audio);audioSrc.connect(analyser);analyser.connect(audioContext.destination);context.lineWidth= 2;var grd = context.createLinearGradient(0, 0, 600, 0);grd.addColorStop(0, "#30EE20");grd.addColorStop(1, "#EE2020");var grd2 = context.createLinearGradient(0, 0, 600, 0);grd2.addColorStop(0, "#30EE20");grd2.addColorStop(1, "#EE2020");var het = 0;interval = window.setInterval(function(){context.clearRect(0, 0, canvas.width, canvas.height);var dataArray = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(dataArray);context.beginPath();//568pxfor (var i = 0; i < 50; i++) {var value = dataArray[6*i];context.fillStyle = grd;context.fillRect(i * 11.36, 284, 10, -value + 1);context.fillRect(i * 11.36, 280 - value, 1, het);context.fillStyle = grd2;context.fillRect(i * 11.36, 284, 10, value + 1);context.fillRect(i * 11.36, 320 + value, 1, het);}}, 1000 / 60);
}//其他格式上传预览，可以自己开发
var initOther = function(){context.globalAlpha = 1;context.fillStyle = "#ffffff";context.fillRect(0, 0, canvas.width, canvas.height);context.font = "30px Arial";var x = (canvas.width / 2) - 100;var y = (canvas.height / 2) - 10;// 创建渐变var gradient = context.createLinearGradient(0, 0, canvas.width, 0);gradient.addColorStop("0", "magenta");gradient.addColorStop("0.5", "blue");gradient.addColorStop("1.0", "red");// 用渐变填色context.strokeStyle = gradient;context.strokeText("暂 不 支 持 预 览", x, y);
}//初始化canvas
var initView = function () {//关闭视频if(video.playing){video.pause();}if(video){video.pause();}//关闭音频if(audio){audio.pause();}//清除定时器for(var n = 0; n <= interval; n++){clearInterval(n);}canvas.style.background = "url('')";context.globalAlpha = 0;context.restore();//context.closePath();context.clearRect(0, 0, canvas.width, canvas.height);
}//关闭
var closeHead = function () {if(is_show){parent.erro("图片正在上传中，请稍后操作！");return;}initView();parent.closeformdia(); //关闭弹出
}//上传文件
var file = document.querySelector('.head'); //document.getElementById('file');
file.onchange = function() {fileData = this.files[0];//这是我们上传的文件var reader = new FileReader();reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示/*当读取操作成功完成时调用*/reader.onload = function(e) {initView();imgurl = this.result;var type = fileData.type;var suffix = type.split("/");if(suffix[0] == "image"){initShows(imgurl);//方框initDraw("strokeRectFlag");//圆框//initDraw("strokeCircelFlag");}else if(suffix[0] == "video"){initShows("{__static__}/icon/error2.png");//视频initVideo();}else if(suffix[0] == "audio"){initShows("{__static__}/icon/error2.png");//音频initAudio();}else{initShows("{__static__}/icon/error2.png");//其他initOther();}}
}
</script>
<?php
/*** 上传文件控制器*/
class UploadController extends Controller {/*** 上传所有文件*/public function load(){$allowFiles = array(".xls", ".xlsx", ".doc", ".docx", ".png", ".jpg", ".jpeg", ".gif", ".wav", ".mp4", ".3gp", ".mp3", ".avi", ".zip", ".rar", ".7z");$upload = new Upload($_FILES, $allowFiles, 200);$upload->save();}
}
<?php
/*** 上传文件类*/
class Upload {//上传文件句柄private $files = [];//上传文件路径private $dirpath = __UPLOAD__ . "/data/uploads";//上传文件最大private $fileSize = 100 * 1024 * 1024; //默认100M 1MB=1024KB=1048576 Byte字节//允许上传文件类型private $allowFiles = [".png", ".jpg", ".jpeg", ".gif", ".xls", ".xlsx" , ".zip", ".mp4", ".3gp", ".mp3", ".avi", ".doc", ".docx"];/*** 构造函数* @param unknown $fileList 上传文件清单* @param unknown $allowFiles 上传后缀名限制* @param number $fileSize 上传文件大小限制 单位：MB*/public function __construct($fileList, $allowFiles = null, $fileSize = 0){$this->files = $fileList;if(!empty($allowFiles) && is_array($allowFiles)){$this->allowFiles = array_merge($this->allowFiles, $allowFiles);}if(!empty($fileSize) && $fileSize > 0){$this->fileSize = $fileSize * 1024 * 1024;}}/*** 删除文件* @param unknown $path*/public function delete($path){$unfile = $path;if(is_file($path)){unset($unfile); //解除文件占用@unlink($path);}}/*** 上传文件* @param unknown $fileList $_FILE;* @return unknown*/public function save(){if(empty($this->files)){$this->show(-1, "上传文件不存在");}$value = array();foreach ($this->files as $file){if(!file_exists($file['tmp_name'])){$this->show(-2, "上传文件不存在");}if (!is_uploaded_file($file['tmp_name'])) {$this->show(-2, "文件上传错误");}$fileName = $file['name'];$fileSize = $file['size'];$fileExt = strtolower(strrchr($fileName, '.'));$newPath = date("Ymd");$newName = Regular::getRandStr(12).date("YmdHis");//文件完整路径$path = $this->dirpath."/".$newPath."/".$newName.$fileExt;if($fileSize > $this->fileSize){$this->show(-3, "上传文件大小超过了限制");}if(!in_array($fileExt, $this->allowFiles)){$this->show(-4, "不支持该格式文件上传");}File::createDir($this->dirpath."/".$newPath);if (!file_exists($this->dirpath."/".$newPath) && !chmod($this->dirpath."/".$newPath, 0777)) {$this->show(-5, "目录创建失败");} else if (!is_writeable($this->dirpath."/".$newPath)) {$this->show(-6, "目录没有写权限");}if (!(@move_uploaded_file($file["tmp_name"], $path) && file_exists($path))) {$this->show(-7, "文件创建失败");} else {//文件创建成功if($this->prefixType($fileExt) == "image"){//木马检测if(!$this->check_illegal($path)){@unlink($path);$this->show(-101, "文件上传异常，图片格式不正确");}}$value[] = array("file_id" => md5($newName),"title" => $newName,"original" => $fileName,"url" => "data/uploads/".$newPath."/".$newName.$fileExt,"type" => $this->prefixType($fileExt),"size" => $fileSize);}}$this->show(0, "上传成功", $value);}/*** 输出信息* @param unknown $code* @param unknown $msg* @param unknown $data*/private function show($code, $msg, $data = null) {$arr = array("code" => $code,"msg" => $msg,);if(!empty($data)){$arr["list"] = $data;}echo json_encode($arr, JSON_UNESCAPED_UNICODE);exit();}/*** # 检测图片是否含有木马* @param string $image 图片地址* @return bool*/private function check_illegal($image) {if (file_exists($image)) {$resource = fopen($image, 'rb');$fileSize = filesize($image);fseek($resource, 0);if ($fileSize > 512) { // 取头和尾$hexCode = bin2hex(fread($resource, 512));fseek($resource, $fileSize - 512);$hexCode .= bin2hex(fread($resource, 512));} else { // 取全部$hexCode = bin2hex(fread($resource, $fileSize));}fclose($resource);if (preg_match("/(3c25)|(3c3f.*?706870)|(3C534352495054)|(2F5343524950543E)|(3C736372697074)|(2F7363726970743E)/is", $hexCode)) {return false;}}return true;}/*** 自定义文件类型* @param unknown $prefix* @return string*/private function prefixType($prefix) {//图片$array1 = [".jpg",".png",".jpeg",".gif"];if(in_array($prefix, $array1)) {return "image";}//文档$array2 = [".doc",".docx"];if(in_array($prefix, $array2)) {return "doc";}//表格$array3 = [".xls",".xlsx"];if(in_array($prefix, $array3)) {return "excel";}//视频$array4 = [".mp4",".avi",".asf",".mov",".wmv",".3gp",".rm",".rmvb",".flv",".f4v"];if(in_array($prefix, $array4)) {return "video";}//音乐$array5 = [".mp3",".mpeg-4",".midi",".wma",".vqf",".amr",".ape",".flac",".aac"];if(in_array($prefix, $array5)) {return "music";}//压缩包 7z、CAB、ARJ、LZH、TAR、GZ、ACE、UUE、BZ2、JAR、ISO$array6 = [".zip",".rar"];if(in_array($prefix, $array6)) {return "zip";}return "other";}
}
资源图片
JS任意截图并上传图片，上传视频、上传文件相关推荐
- wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用 一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章 二:效果: ①角色为 ...
- vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
- plupload php 分片,plupload上传视频等大文件
本文演示了新浪微博plupload上传视频文件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv.本文的视频上传分两步,首先选择文件,然后点击上传按钮开始上传 ...
- 如何不通过网络把电脑上的视频上传到手机端
平时想要把电脑上的一小段视频快速的保存到手机上,咱们普通人的第一印象肯定是通过网络在线传输,比如通过QQ,微信,钉钉阿之类的一些社交软件和办公软件然后在通过社交软件把视频保存到自己手机上.那么大家应该 ...
- xbox one 越狱_如何在Xbox One上播放视频和音乐文件
xbox one 越狱 The Xbox One has integrated TV features and support for streaming media apps like Netfli ...
- 怎样将视频放到计算机文档里,怎么样从电脑上把视频好音频文件传到MP5里
2013-10-16 骁龙800和Tegra 4是什么,干嘛用的,优缺点各是啥,买小米3要骁龙800的还是Tegra 4 两个都是CPU的型号 TD版采用的是NvidiaTegra4的CPU,这个CP ...
- 根据网络上的视频的m3u8文件通过ffmpeg进行合成视频
下载好的.m3u8文件: ffmpeg的下载链接: Download FFmpeghttps://www.ffmpeg.org/download.html windows下: mac下: 这里,我们 ...
- 【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传
一.效果演示 a.测试界面初始化 b.点击[上传视频] c.点击[开始上传] d.点击[上传音频]选择音频之后点击[开始上传] c.点击[上传图片],注意图片上传为单按钮,选择文件之后自动完成上传 d ...
- yii2.0使用ueditior完成上传单张，多张图片，上传视频等操作
一.前言 由于工作需求需要集成富文本编辑器,本来是想要选用之前用过的WangEditor的,但是考虑到WangEditor还是比较小众,所以最终选择了没用过的Uedtor,这篇文章主要讲述了Yii2. ...
最新文章
- 当 AI 闯入法律界，第一步是当律师的得力助手
- webrtc rtsp播放
- Java调用WebService接口实现发送手机短信验证码功能，java 手机验证码，WebService接口调用...
- 【原】HTML页面元素加载顺序研究报告（2）----背景图片
- Android关机流程源码分析
- 前端总结·基础篇·CSS（二）视觉
- [DB]MariaDB 与 MySql 数据库
- SharePoint 2010 客户端对象模型使用 ECMAScript
- 综述：关系抽取，挑战与机遇并存！
- GD32F303串口ISP方式下载程序
- 前端学习（基础介绍）
- CTOD安悦系统目录转移软件
- 入门力扣自学笔记96 C++ （题目编号749）
- 2014汽车之家笔试
- 【Linux】linux清除ip地址命令
- linux vnc共享时权限设置,用VNC实现远程桌面共享(支持Windows, Linux, ...) - 易水博客...
- chrome浏览器完整保存整个网页 可离线访问
- 工业级路由器和家用路由器的区别_工业级路由器和家用路由器有何区别？
- 手机内存卡照片丢失怎么恢复
- 软工网络15个人阅读作业1-评分发布