当前位置: 首页 > 软件资讯

js图片转base64,哪位大神有jquery无刷新上传图片、裁剪、保存图片的案例啊

 时间:2020-04-29 09:50:30 来源: 

如何使用js实现IE9下上传图片并预览

<div > <div id="headImgPicview"> <img src="" id="headImgPic" width="200" height="auto"/> </div> <input type="text" id="headImgShow" name="headImg" placeholder="图片(.jpg .jpeg .png)" size="40" pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)" data-foolish-msg="请选择图片!" value="" required readonly/> <div class="am-form-group am-form-file" style="width: 175px"> <button type="button" class="am-btn am-btn-default am-btn-sm"> <i class="am-icon-cloud-upload"></i> 选择要上传的图片</button> <input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple> </div> </div> //文件动态上传方法+格式判断 function imgcheck(imgid,file){ if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val())) ||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){ alert("图片格式不正确!应为:.jpg .jpeg .png"); $('#'+imgid).val(''); }else{ var imgURL = document.getElementById(imgid); $('#'+imgid+'Show').attr('placeholder',imgURL.value); //调用图片预e79fa5e9819331333363356561览 previewImage(imgid+'Pic',file);本回答被网友采纳

我想按下面三个图标 切换上面的图片 怎么用JS做

<!doctypehtml><html>e799bee5baa6e79fa5e9819331333363353764<head><title>鼠标移动到按钮上,显示对应图片</title><metacharset="utf-8"/><scripttype="text/javascript"src="js/jquery-3.1.1.min.js"></script><styletype="text/css">*{margin:0;padding:0;}ul{list-style:none;}a{text-decoration:none;}.main{position:relative;width:720px;height:340px;margin:100pxauto0;}.pic{position:relative;}.picaimg{width:720px;height:340px;position:absolute;display:none;}.btn{width:160px;height:20px;position:absolute;bottom:10px;left:280px;background:#6C6666;border-radius:10px;opacity:0.8;}.btnulli{float:left;}.btnulli{margin:2.5px2.5px;width:15px;height:15px;background:#fff;text-align:center;border-radius:7.5px;cursor:pointer;/*鼠标指针变成小手*/}.btn.on{background:#db192a;}</style><scripttype="text/javascript">$(function(){$("div.btnulli").hover(function(){varindex=$(this).index();$(this).addClass("on").siblings().removeClass("on");$("div.picimg").stop(true).fadeOut();$("div.picimg").eq(index).stop(true).fadeIn();},function(){})})</script></head><body><divclass="main"><divclass="pic"><ahref="#"><imgsrc="img/test01.jpg"/style="display:block;"></a><ahref="#"><imgsrc="img/test02.jpg"/></a><ahref="#"><imgsrc="img/test03.jpg"/></a><ahref="#"><imgsrc="img/test04.jpg"/></a><ahref="#"><imgsrc="img/test05.jpg"/></a><ahref="#"><imgsrc="img/test06.jpg"/></a><ahref="#"><imgsrc="img/test07.jpg"/></a><ahref="#"><imgsrc="img/test08.jpg"/></a></div><divclass="btn"><ul><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li><li><ahref="#"></a></li></ul></div></div></body></html>自己改一下图片的路径就可以了。要想改变按钮的样式,自己可以根据需要修改。我的是鼠标移动上去就改变图片,你也可以自己改成点击事件

显示图片同时显示图片title的js问题

标签a的href决定是否跳转;return false意思是阻止事件冒泡,阻碍浏览器的默认行为,并不代表不让a跳转;不跳转href就是#;

DIV背景图片定时自动切换。效果和致远的主页一样。

这个你可以随便参考一个JQUERY图片切换就能做到<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scriptsrc="Scripts/jquery-1.4.1.min.js"type="text/javascript"></script><scripttype="text/javascript">vart;varspeed=2;//图片切换速度varnowlan=0;//图片开始时间functionchangepic(){varimglen=$("div[name='pic']").find("div").length;$("div[name='pic']").find("div").hide();$("div[name='pic']").find("div").eq(nowlan).show();nowlan=nowlan+1==imglen?0:nowlan+1;t=setTimeout("changepic()",speed*1000);}onload=function(){changepic();}$(document).ready(function(){//鼠标在图片上悬停让切换暂停$("div[name='pic']").hover(function(){clearInterval(t);});//鼠标离开图e68a84e8a2ad7a686964616f31333335333735片切换继续$("div[name='pic']").mouseleave(function(){changepic();});});</script></head><body><divname="pic"style="float:left;position:relative;overflow:hidden;width:300px;height:240px;"><div><imgwidth="300"height="240"src="Chrysanthemum.jpg"alt="1"/></div><div><imgwidth="300"height="240"src="Desert.jpg"alt="2"/></div><div><imgwidth="300"height="240"src="Hydrangeas.jpg"alt="3"/></div></div></body></html>

js如何通过表单文本框的设置来改变图片上的内容

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"></head><body>请选择图片:<inputtype="file"id="file"accept="image/*"/>请输入e69da5e887aae79fa5e9819331333366306434水印文字:<inputtype="text"id="text"/><buttontype="button"id="ok">确定</button><canvasid="stage">浏览器版本太低,请更新浏览器以便支持canvas</canvas><scripttype="text/javascript">var$=document.querySelector.bind(document);varfile=$('#file'),text=$('#text'),button=$('#ok'),stage=$('#stage'),ctx=stage.getContext('2d');file.onchange=function(e){varfile=e.target.files[0];varimage=newImage();varreader=newFileReader();reader.onload=function(){image.src=reader.result};reader.readAsDataURL(file);image.onload=function(){stage.width=this.width;stage.height=this.height;ctx.drawImage(this,0,0,this.width,this.height);};};button.onclick=function(){vartextValue=text.value;if(!textValue)alert('请输入水印文字');ctx.fillStyle='red';ctx.font='150pxArial';ctx.fillText(textValue,20,stage.height-40);}</script></body></html>