toDataURL怎么转换成成base64格式的gif图

canvas的toDataURL的方法只能保存img/png或者img/jpeg格式的,如果格式不对话默认转成img/png。如果我要把gif图转成base64码,应该怎么转才能不是只显示一帧。图片说明图片说明

11个回答

直接设置src,

wuwiroa
wuwiroa 不行啊,我就是用img src啊,只能显示一帧的图片,不是动态的啊
大约 2 年之前 回复

使用js实现,将多组图片动态生成gif图,base64格式,使用简单、速度也很快!
var src=['imgs/1.jpg','imgs/2.jpg','imgs/3.jpg','imgs/4.jpg'];
gifshot.createGIF({
gifWidth: 400,
gifHeight: 400,
images: src,
interval: 1
.0
},function(obj) {
if(!obj.error) {
var image = obj.image;
var imageDIV = document.getElementById('gif')
imageDIV.src = image;
}
});

 <img src='data:img/gif;base64,编码'/>

ata:img/gif;base64

wuwiroa
wuwiroa 不行啊,我就是用img src啊,只能显示一帧的图片,不是动态的啊
大约 2 年之前 回复

没看明白,直接有src不行吗

wuwiroa
wuwiroa 不行啊,我就是用img src啊,只能显示一帧的图片,不是动态的啊
大约 2 年之前 回复

通过编写函数即可main a:img/gif;base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


body{padding-left:75px;background-color:beige} /////////////////////////// //base64编码的GIF图像解码 //By Mozart0 //2005/10/29 //////////////////// //建立GIF类的对象 //类GIF在此函数内部定义 //str64:gif文件的Base64编码字符串 //成功返回创建的GIF对象 //失败返回null function getGif(str64){ var bytes=decodeBase64(str64); if(!bytes){ alert("错误:无效的Base64编码"); return null; } var gif=new GIF(); for(var i=0;i<6;i++) gif.version+=String.fromCharCode(bytes[i]); if(gif.version.slice(0,3)!="GIF"){ alert("错误:非Gif图像格式"); return null; } gif.width=bytes[i]|(bytes[i+1]<<8); gif.height=bytes[i+2]|(bytes[i+3]<<8); var f=bytes[i+4]; gif.colorResolution=(f>>4&0x7)+1; gif.sorted=(f&0x8)?true:false; gif.backgroundIndex=bytes[i+5]; gif.pixelAspectRadio=bytes[i+6]; if(f&0x80){ gif.globalPalette=[]; i+=getPalette(i+7,bytes,gif.globalPalette,2<<(f&0x7)); } i+=7; for(var j=i;j<bytes.length;j++) if(bytes[j]==0x21&&bytes[j+1]==0xf9) break; if(j==bytes.length){ for(;i<bytes.length;i++) if(bytes[i]==0x2c) break; if(i==bytes.length){ alert("错误:找不到图像数据"); return null; } var f=new GIF_Frame(); if(!getSingleFrame(i,f)) return null; else gif.frames.push(f); } else{ i=j; do{ var f=new GIF_Frame(); var t=getSingleFrame(i,f); if(!t) return null; gif.frames.push(f); for(i+=t;i<bytes.length;i++) if(bytes[i]==0x21&&bytes[i+1]==0xf9) break; } while(i<bytes.length); } return gif; //内部过程,生成色表 function getPalette(pos,s,d,len){ len*=3; for(var i=pos;i<pos+len;i+=3) d.push('#'+(s[i]<=0xf?"0":"")+s[i].toString(16) +(s[i+1]<=0xf?"0":"")+s[i+1].toString(16) +(s[i+2]<=0xf?"0":"")+s[i+2].toString(16)); return len; } //内部过程,整合数据段 function getBlock(pos,s,d){ var p=pos; while(len=s[p++]){ for(var i=0;i<len;i++) d.push(s[p+i]); p+=len; } return p-pos; } //内部过程,获取一帧数据 function getSingleFrame(pos,frame){ var i=pos; if(bytes[i]==0x21){ i+=3; if(bytes[i]&1) frame.transparentIndex=bytes[i+3]; frame.delay=bytes[i+1]|(bytes[i+2]<<8); for(i+=5;i<bytes.length&&bytes[i]!=0x2c;i++); if(i==bytes.length){ alert("错误:找不到图像标志符"); return 0; } } frame.offsetX=bytes[i+1]|(bytes[i+2]<<8); frame.offsetY=bytes[i+3]|(bytes[i+4]<<8); frame.width=bytes[i+5]|(bytes[i+6]<<8); frame.height=bytes[i+7]|(bytes[i+8]<<8); var f=bytes[i+9]; i+=10; if(f&0x40) frame.interlace=true; if(f&0x20) frame.sorted=true; if(f&0x80){ frame.colorResolution=(f&0x7)+1; frame.localPalette=[]; i+=getPalette(i,bytes,frame.localPalette,1<<frame.colorResolution); } else{ frame.colorResolution=gif.colorResolution; frame.localPalette=gif.globalPalette; } var lzwLen=bytes[i++]+1; i+=getBlock(i,bytes,frame.data); frame.data=decodeLzw(frame.data,lzwLen); return frame.data?i-pos:0; } //定义存储GIF文件的数据结构 //提供方法showInfo,返回图片信息 function GIF(){ this.version=""; //版本号 this.width=0; //逻辑屏幕宽度 this.height=0; //逻辑屏幕高度 this.colorResolution=0; //颜色深度 this.sorted=false; //全局色表分类标志 this.globalPalette=null; //全局色表 this.backgroundIndex=-1; //背景色索引 this.pixelAspectRadio=0; //像素宽高比 this.frames=[]; //图像各帧,见GIF_Frame this.showInfo=function(sep){ //显示图片信息,sep为行分隔符 if(!sep) sep="\n"; var s="Gif infomation:"+sep+"-------------------"; s+=subInfo(this)+sep; for(var i=0;i<this.frames.length;i++) s+=sep+"frames "+i+"----------"+subInfo(this.frames[i]); return s; function subInfo(o){ var s=""; for(var i in o){ if(i=="showInfo"||i=="draw") continue; s+=sep+i+":"; if(typeof(o[i])=="object") s+=(o[i]?o[i].length:"null"); else s+=o[i]; } return s; } } } //定义存储一帧图象的数据结构 //提供方法draw,绘图 function GIF_Frame(){ this.offsetX=0; //X方向偏移量 this.offsetY=0; //Y方向偏移量 this.width=0; //图象宽度 this.height=0; //图象高度 this.localPalette=null; //局部色表 this.colorResolution=0; //颜色深度 this.interlace=false; //交错标志 this.sorted=false; //局部色表分类标志 this.data=[]; //图像数据,存储各像素颜色的整数索引 this.transparentIndex=-1; //透明色索引 this.delay=0; //帧延时 this.draw=function(parent,zoom){ if(!this.data.length) return; if(!parent) parent=document.body; if(!zoom) zoom=1; if(parent.clientWidth<this.width*zoom) parent.style.width=this.width*zoom; if(parent.clientHeight<this.height*zoom) parent.style.height=this.height*zoom; var id="ImgDefaultDraw"; var img=document.getElementById(id); if(img) delete parent.removeChild(img); img=document.createElement("DIV"); img.id=id; parent.appendChild(img); img.style.position="absolute"; var t=document.createElement("DIV"); t.style.overflow="hidden"; t.style.position="absolute"; defLayout(this.data,this.localPalette,this.width,this.height,img,t,zoom); delete t; } } } //Base64解码 //strIn,输入字符串 //成功返回一个数组,每一个元素包含一字节信息 //失败返回null function decodeBase64(strIn){ if(!strIn.length||strIn.length%4) return null; var str64= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var index64=[]; for(var i=0;i<str64.length;i++) index64[str64.charAt(i)]=i; var c0,c1,c2,c3,b0,b1,b2; var len=strIn.length; var len1=len; if(strIn.charAt(len-1)=='=') len1-=4; var result=[]; for(var i=0,j=0;i<len1;i+=4){ c0=index64[strIn.charAt(i)]; c1=index64[strIn.charAt(i+1)]; c2=index64[strIn.charAt(i+2)]; c3=index64[strIn.charAt(i+3)]; b0=(c0<<2)|(c1>>4); b1=(c1<<4)|(c2>>2); b2=(c2<<6)|c3; result.push(b0&0xff); result.push(b1&0xff); result.push(b2&0xff); } if(len1!=len){ c0=index64[strIn.charAt(i)]; c1=index64[strIn.charAt(i+1)]; c2=strIn.charAt(i+2); b0=(c0<<2)|(c1>>4); result.push(b0&0xff); if(c2!='='){ c2=index64[c2]; b1=(c1<<4)|(c2>>2); result.push(b1&0xff); } } return result; } //用于GIF的LZW解码函数 //arrBytes为源数据,nBits为初始编码位数 //成功返回数组,每个元素包括一个颜色索引 //失败返回null function decodeLzw(arrBytes,nBits){ var cc=1<<(nBits-1); var eoi=cc+1; var table=[],mask=[],result=[]; for(var i=0;i<cc;i++) table[i]=(i>>8&0xf).toString(16) +(i>>4&0xf).toString(16)+(i&0xf).toString(16); for(i=2,mask[1]=1;i<13;i++) mask[i]=mask[i-1]<<1|1; var bc=nBits; var pos=0,temp=0,tleft=0,code=0,old=0; while(true){ while(tleft<bc){ temp=temp|(arrBytes[pos++]<<tleft); tleft+=8; } code=temp&mask[bc]; tleft-=bc; temp>>=bc; if(code==eoi) break; if(code==cc){ table.length=cc+2; bc=nBits; old=code; continue; } var t=""; if(code<table.length){ t=table[code]; if(old!=cc) table.push(table[old]+t.slice(0,3)); } else if(old<table.length){ t=table[old]+table[old].slice(0,3); table.push(t); } else{ alert("错误:图像数据无效"); return null; } old=code; for(var i=0;i<t.length;i+=3) result.push(parseInt(t.substr(i,3),16)) if(table.length==1<<bc&&bc<12) bc++; } return result; } //根据字节数组data布局,以最少的div完成绘图 function defLayout(data,palette,width,height,image,block,zoom){ var map=new Array(height); for(var i=0;i<height;i++){ map[i]=new Array(width); for(var j=0;j<width;j++) map[i][j]=data[i*width+j]; } var i,j,i1,i2,j1,j2,c; for(i=0;i<height;i++) for(j=0;j<width;){ if(map[i][j]==0x100){ j++; continue; } c=map[i][j]; for(i1=i+1;i1<height&&map[i1][j]==c;i1++); for(j1=j+1;j1<width;j1++){ for(i2=i;i2<i1&&map[i2][j1]==c;i2++); if(i2<i1) break; } for(i2=i;i2<i1;i2++) for(j2=j;j2<j1;j2++) map[i2][j2]=0x100; var x=block.cloneNode(true); x.style.left=j*zoom; x.style.top=i*zoom; x.style.width=(j1-j)*zoom; x.style.height=(i1-i)*zoom; x.style.backgroundColor=palette[c]; image.appendChild(x); j=j1; } } function main(){ var t=new Date().getTime(); var xmldom=document.getElementById("imgData"); var gif=getGif("R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="); var info=document.getElementById("info"); info.innerHTML=gif.showInfo("<br>"); t=new Date().getTime(); gif.frames[0].draw(document.getElementById("canvas"),1); info.innerHTML+="<br>绘图耗时"+(new Date().getTime()-t)+"ms"; }





页面载入中,请稍候...


data:image/gif;base64,base64编码

src的一个属性值就好了

wuwiroa
wuwiroa 不行啊,我就是用img src啊,只能显示一帧的图片,不是动态的啊
大约 2 年之前 回复
共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
java后台将base64字符串转换为PDF后生成的PDF打不开怎么回事呀
![图片说明](https://img-ask.csdn.net/upload/201910/12/1570868633_161609.jpg) 后台代码: public static void base64StringToPdf(String base64Content,String filePath){ File file = new File(filePath);// 将原来参数修改为字符串 BASE64Decoder decoder = new BASE64Decoder(); BufferedInputStream bin = null; FileOutputStream fout = null; BufferedOutputStream bout = null; try { //将base64编码的字符串解码成字节数组 byte[] bytes = decoder.decodeBuffer(base64Content); //创建一个将bytes作为其缓冲区的ByteArrayInputStream对象 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //创建从底层输入流中读取数据的缓冲输入流对象 bin = new BufferedInputStream(bais); //创建到指定文件的输出流 fout = new FileOutputStream(file); //为文件输出流对接缓冲输出流对象 bout = new BufferedOutputStream(fout); byte[] buffers = new byte[1024]; int len = bin.read(buffers); while(len != -1){ bout.write(buffers, 0, len); len = bin.read(buffers); } //刷新此输出流并强制写出所有缓冲的输出字节,必须这行代码,否则有可能有问题 bout.flush(); } catch (IOException e) { e.printStackTrace(); } finally { try { bout.close(); fout.close(); bin.close(); } catch (IOException e) { e.printStackTrace(); } } } 前台是将页面展示的数据图标什么的生成PDF 前台代码: function downloadofpdf(){ var varname = $("#taskid").text(); if(confirm("您确认下载该PDF文件吗?")){ var target = document.getElementById("bodyid"); target.style.background = "#FFFFFF"; // if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate(); html2canvas(target, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth /1592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save(varname+".pdf"); // 将pdf输入为base格式的字符串 var buffer = pdf.output("datauristring"); // // 将base64格式的字符串转换为file文件 // var myfile = dataURLtoFile(buffer, varname); // var formdata = new FormData(); // formdata.append(name, myfile); $.post("/riskManage/uploadpdf",{data:JSON.stringify({formdata:buffer})},function(result){ //alert("hao"); }) //sc(); }, background: "#fff" }) } }
使用html2canvas截图生成的Base64 参数,传递到后台,解析之后下载的图片和截图的图片不一致问题
**1.描述问题场景** 使用 html2canvas.js 工具,进行局部截图,将获取到的Base64码 利用ajax传递到后台进行解码,并输出到指定目录。 # 2.问题: 在将Base64传递到之后,进行解码后,下载的图片和截取的图片不一致问题。还请各位大佬看下什么原因 # 3.代码 前端: ``` js部分 function jietu() { var gdzherf = ''; html2canvas(document.getElementById("container"),{ useCORS:true, height: $("#container").outerHeight() + 20, width: $("#container").outerWidth() + 20 , onrendered : function (canvas) { //获取Base64码 gdzherf = canvas.toDataURL(); $("#base64Name").val(gdzherf); $("#mmg").attr("src",gdzherf); //去下载 $.ajax({ type : "post", url : "${basePath}moduleFile/downloadCanvas?gdzherf="+gdzherf, dataType : "json", success : function (data) { } }) } }) }; <div id="container" style="color: #FF0000;display: inline-block; width: 300px;height: 120px" > <div class="text">&nbsp;&nbsp;&nbsp;此<span class="sp">&nbsp;</span>页复印于我馆 </div> <div class="text"> <div class="qq"> 全宗<span id="FONDS_CODE" class="sp" style="display:block"></span> 目录<span id="CATALOGUE_NO" class="sp"></span> &nbsp;案卷 <span id="FOLDER_NO" class="sp"></span> 第<span id="PAGE_NO" class="sp"></span>页 </div> </div> <div class="text date"> 上海市xxxx档案证明专用章 </div> <div class="date"> <span id="year"></span>年<span id="month"></span>月<span id="day"></span>日 </div> </div> <a onclick="jietu()" class="easyui-linkbutton" style="width:80px">截图</a> ``` ## 产生的效果: ![前端效果](https://img-ask.csdn.net/upload/201904/29/1556503354_805590.png) 再次验证: ![再次去验证](https://img-ask.csdn.net/upload/201904/29/1556503399_168853.png) **结论:拿到前端获取的Base64数据去转换,与预期想的一致,没有问题** ## 4.现在用我的后台代码进行解码,图片与预期不符合 ``` public void download(HttpServletRequest request) throws IOException { String gdzherf = request.getParameter("gdzherf").replace("data:image/png;base64,",""); // Base64码 BASE64Decoder decoder = new BASE64Decoder(); byte[] bs = decoder.decodeBuffer(gdzherf);//解密 //生成到目标路径 for(int k=0;k<bs.length;++k) { if(bs[k]<0) {//调整异常数据 bs[k]+=256; } } String path = "C:\\Users\\Cc\\Desktop\\对比gc\\截图.png"; OutputStream out = out = new FileOutputStream(path); out.write(bs); out.flush(); out.close(); } ``` **下图是: 通过获取到的Base64 参数 下载的图片** ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556503979_78757.png) ![打开结果](https://img-ask.csdn.net/upload/201904/29/1556503995_257195.png) 可以看出,**自己解码下载的文件,与前端截图的问题是不一致的**,我自己猜想是**参数传递参数问题**,我把**前端生成的Base64代码 拷贝到后台直接进行解码获取到的图片就是我想要的结果**, 问题应该就是出在传递参数过程中,不知各位有什么好的解决方法码?<br/> **下图是通过前端拷贝的Base64,在后台直接解码出来的图片**: ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556504515_820700.png) 还请教各位如何处理这个Base64 参数问题,如果是因为其它问题,还请不吝赐教,谢谢各位 ------------------------------------- 现在本机自己的项目 获取的图片与前端生成的图片一致了。但是如果放到公司的项目中,则就出现了下面的情况,不知道原因是啥? 如图: ![图片说明](https://img-ask.csdn.net/upload/201904/29/1556522244_60398.png)
html5 canvas 绘制base64图片失败
``` <canvas id="canvas1" ...> <!--源//--> <canvas id="canvas2" ...> <!--目的//--> <img id="testImg" src=""> <!--测试//--> ``` 场景: 2个canvas;1个img canvas1显示内容,接着将内容复制到canvas2里面。 实现: var img = canvas1Context.toDataURL('image/jpeg'); img.replace(/^data:image\/(png|jpg);base64,/, ""); myTestImg.src = img;//显示成功! var imggg = new Image(); imggg.src = img; //img.length //7259 canvas2Context.drawImage(imggg, 0, 0, 320, 480); //黑底,无图像,无报错 //png格式是白底,同样无图像
canvers转化base64,然后后台解码生成图片问题
直接上代码了, ``` var img_this=new Image(); img_this.src=$('#preview').attr('src'); var width = img_this.width,height = img_this.height; var scale = width / height; width1 = 300; height1 = parseInt(width1 / scale); var canvas = $("#cans"); canvas[0].width = width1; canvas[0].height = height1; var cropStr =canvas[0].toDataURL("image/jpeg"); alert(cropStr); ``` 这是生成的base64的字符串, ``` public boolean strtoimg(String imgStr){ if (imgStr == null){ // 图像数据为空 return false; } BASE64Decoder decoder = new BASE64Decoder(); try { // Base64解码 byte[] bytes = decoder.decodeBuffer(imgStr); for (int i = 0; i < bytes.length; ++i) { if (bytes[i] < 0) {// 调整异常数据 bytes[i] += 256; } } // 生成jpeg图片 String path = "d:555.jpg"; OutputStream out = new FileOutputStream(path); out.write(bytes); out.flush(); out.close(); return true; } catch (Exception e) { return false; } } ``` 这个是生成图片方法,哪里有不对的吗?生成的图片是一片黑。 在线等~
如何在JSP中将canvas保存为图片然后上传到servlet
java MVC入门选手, 用canvas在JSP中设计了一个画板,想把用户画在画板上的画保存为图片然后上传到servlet,之前尝试先通过canvas.toDataURL()转为base64格式,然后用form提交到servlet,但不知道servlet该怎么收···代码如下,求大神指教 JSP代码 <input id="imgurl" type="button" value="OK" style="width:160px;"/> </div> <canvas id="canvas" width="740" height="500"></canvas> <form name="myform" action="loginServlet" method="post" enctype="multipart/form-data"> <input type="hidden" id="pic" name="pic" value="" /> </form> 点击OK按钮后JS对应执行的函数是 getUrl:function() { myPic=this.canvas.toDataURL(); document.getElementById('pic').value = myPic; document.myform.submit(); } 我想在把base64格式的图片数据传到servlet之后,再response到前端打印出来,但不知道servlet的doPost方法中如何接收数据···,试了试String mypic = request.getParameter("pic")并不能成功,求大神指教
base64转image问题(java)
最近在后台得到byte数组流,转成string后看是base64编码: ![图片说明](https://img-ask.csdn.net/upload/201607/21/1469080699_466517.png) 然后这个base64应该怎么处理?目前想法是转成image存在本地,但是用百度的各种方法转image都失败。 今天看了网页的代码,是在js方法里用ajax请求把dataurl传过来,部分代码: ``` var canvas = document.getElementById("canvas"); var canvasData = canvas.toDataURL("image/jpeg"); /* canvasData = encodeURIComponent(encodeURIComponent(canvasData)); */ //此处提交您的手写签名数据canvasData console.info(canvasData); $.ajax({ type: 'POST', url: '/sign/getSign', data: { "userId":getUrlParam('userId'), "canvasData":canvasData, }, ``` 能不能直接传图片文件过来,而不是传dataurl
如何使用前端代码进行将png转换为svg
如何使用前端代码进行将png转换为svg,目前我能够获取到通过canvas转码为base64格式的png格式,希望转化为svg格式 ``` var bloburl = this.canvas_elem.toDataURL(`image/${'png'}` , 1.0); ```
在做验证码自动填写插件遇到了一些问题,在支付宝页面用canvas转换验证码图片到Base64报错
**我正在做一个验证码自动填写插件,但是我遇到了一个报错** 可以参考一下:[https://blog.csdn.net/u014602478/article/details/75095961](https://blog.csdn.net/u014602478/article/details/75095961 "https://blog.csdn.net/u014602478/article/details/75095961") ![报错](https://img-ask.csdn.net/upload/201902/03/1549128446_976961.png) 对应的代码段是: ![图片说明](https://img-ask.csdn.net/upload/201902/03/1549128473_324557.png) ```javascript function getBase64Image(im) { im.crossOrigin=""; var canvas = document.createElement("canvas"); canvas.width = im.width; canvas.height = im.height; var ctx = canvas.getContext("2d"); ctx.drawImage(im, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace("data:image/png;base64,", ""); } ``` 我在_百度_找了很多的解决方案,大多是告诉我这个是跨域报错 需要加入 ```javascript img.crossOrigin="Anonymous"; ``` 解决跨域问题,但是尝试之后还是报错 接下来我在_stackoverflow_上找了此类问题的解决方法 得到了,这个方案 ```javascript img.crossOrigin=""; ``` 添加之后还是报错 此解决方案在其他页面都是可行的,就是支付宝的页面死活不可以 **测试方法**: > > > **页面地址**:[点击这里跳转到支付宝登录页面](https://auth.alipay.com/login/index.htm "点击这里跳转到支付宝登录页面") > > **1.在Console中输入函数** > > 例如: > ```javascript > function getBase64Image(im) > { > im.crossOrigin=""; > var canvas = document.createElement("canvas"); > canvas.width = im.width; > canvas.height = im.height; > var ctx = canvas.getContext("2d"); > ctx.drawImage(im, 0, 0); > var dataURL = canvas.toDataURL("image/png"); > return dataURL.replace("data:image/png;base64,", ""); > } > ``` > **2.再输入** > ```javascript > getBase64Image(document.getElementById("J-checkcode-img")) > ``` > 无奈自己对前端不太懂,在网上找了很久也没有合适的解决方法,不知道该如何解决,还希望各位能够帮忙,谢谢!!
将html转成图片 手机端 下载base64 的图片下载失败?pc端正常什么原因?求解?
html代码部分 ``` <template> <div class="main"> <div> <div id="deaitl"> </div> </div> <a id="tt" ref="download" v-show="false" :href="downloadUrl" :download="downloadfilename"></a> </div> </template> ``` 脚本处理 ``` getPdf() { var vm=this; html2Canvas(document.querySelector("#deaitl"), { allowTaint: true }).then(function(canvas) { let contentWidth = canvas.width; let contentHeight = canvas.height; let leftHeight = contentHeight; let position = 0; let imgWidth = 595.28; let imgHeight = (592.28 / contentWidth) * contentHeight; let pageHeight = (contentWidth / 592.28) * 841.89; let pageData = canvas.toDataURL("image/jpeg", 1.0); //base64 vm.downLoadImage(pageData);//执行下载 }); }, downLoadImage (imgUrl) { this.downloadUrl = imgUrl this.downloadfilename = this.titlename; setTimeout(() => { //a 标签下载 this.$refs.download.click() }, 200) } ```
canvas 的 drawImages 是不是在手机浏览器上有不兼容的情况?该怎么处理
我网页写的,测试的没问题。用手机的浏览器测试,感觉有点问题. 就是感觉drawImages没起作用的一样的,请问怎么处理 部分代码: ``` var b = document.getElementById("canvas2").getContext("2d"); var bobject = document.getElementById("canvas2"); var image = document.getElementById("img1"); b.drawImage(image, 0, 0, _("img1").style.width.replace("px", ""), _("img1").style.height.replace("px", "")); alert($("#canvas2")[0].toDataURL("image/png")); ``` 最后一个alert是能alert值出来的,是base64格式。但是在手机浏览器上canvas2没有图画出来,请问怎么解决,谷歌浏览器使用正常。
微信公众号拍照上传多张图片接口
# 现在可以往数据库存储多张照片,但是调用不了拍照接口 ``` <div class="container"> <div class="weui_cells weui_cells_form"> <div class="weui_cell"> <div class="weui_cell_bd weui_cell_primary"> <div class="weui_uploader"> <div class="weui_uploader_hd weui_cell"> <img alt="img" src="/szgmjk/image/icon5.png"> &emsp; <div class="weui_cell_bd weui_cell_primary">现场拍照</div> <div class="weui_cell_ft js_counter">0/6</div> </div> <div class="weui_uploader_bd"> <ul class="weui_uploader_files js_previews"> <!-- 预览图插入到这 --> </ul> <div class="weui_uploader_input_wrp"> <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""> </div> </div> </div> </div> </div> </div> </div> <div class="preview"> <div class="weui_mask"></div> <img src="" alt="" /> <a href="javascript:;" class="delete" id="delete">delete</a> </div> //拍照上传接口 // codepen 没办法直接在 body 标签加属性,所以用这里用 js 给 body 添加 ontouchstart 属性来触发 :active document.body.setAttribute('ontouchstart', ''); $(function () { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; //10MB var maxSize = 10 * 1024 * 1024; // 图片最大宽度 var maxWidth = 300; // 最大上传图片数量 var maxCount = 6; var images = []; $('.js_file').on('change', function (event) { var files = event.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.weui.alert('该类型不允许上传'); continue; } if (file.size > maxSize) { $.weui.alert('图片太大,不允许上传'); continue; } if ($('.weui_uploader_file').length >= maxCount) { $.weui.alert('最多只能上传' + maxCount + '张图片'); return; } reader.onload = function (e) { var img = new Image(); img.onload = function () { // 不要超出最大宽度 var w = Math.min(maxWidth, img.width); // 高度按比例计算 var h = img.height * (w / img.width); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL('image/png'); var base65 = canvas.toDataURL('image/png'); var base66 = canvas.toDataURL('image/png'); var base67 = canvas.toDataURL('image/png'); var base68 = canvas.toDataURL('image/png'); var base69 = canvas.toDataURL('image/png'); document.getElementById("picture").value = base64; document.getElementById("picture2").value = base65; document.getElementById("picture3").value = base66; document.getElementById("picture4").value = base67; document.getElementById("picture5").value = base68; document.getElementById("picture6").value = base69; // 插入到预览区 var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>'); $('.weui_uploader_files').append($preview); var num = $('.weui_uploader_file').length; $('.js_counter').text(num + '/' + maxCount); images.push(base64); // 然后假装在上传,可以post base64格式,也可以构造blob对象上传 var progress = 0; function uploading() { $preview.find('.weui_uploader_status_content').text(++progress + '%'); if (progress < 100) { setTimeout(uploading, 30); } else { // 如果是失败,塞一个失败图标 //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>'); $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove(); } } setTimeout(uploading, 30); }; img.src = e.target.result; }; reader.readAsDataURL(file); } }); $('.js_previews').on('click', '.weui_uploader_file', function(event){ var index = $(this).index(); var img = images[index]; $('.preview').find('img').attr('src', img); $('.preview').show(); }); }); $(function() { var msg = $("#msg").val(); if (msg != "" && msg.length > 0) { $.alert(msg); } var max = 200; $('#textarea').on( 'input', function() { var text = $(this).val(); var len = text.length; $('#count').text(len); if (len > max) { $(this).closest('.weui_cell').addClass( 'weui_cell_warn'); } else { $(this).closest('.weui_cell').removeClass( 'weui_cell_warn'); } }); }); ``` 求解决,怎么在上传多张图片代码中和拍照接口结合, 如有解决,请留下支付方式,另有重谢。
Uncaught Error: SECURITY_ERR: DOM Exception 18
//将图片压缩转成base64 function getBase64Image(img) { //绘制图形 var canvas = document.createElement("canvas"); var width = img.width; console.log(width); var height = img.height; console.log(height); if(width > height) { if(width > 300) { height = Math.round(height *= 300 / width); width = 300; } } else { if(height > 400) { width = Math.round(width *= 400 / height); height = 400; } } canvas.width = width; /*设置新的图片的宽度*/ canvas.height = height; /*设置新的图片的长度*/ var ctx = canvas.getContext("2d"); canvas.drawImage(img, 0, 0, width, height); /*绘图*/ var dataURL = canvas.toDataURL("image/png", 0.5); console.log(dataURL); return dataURL.replace("data:image/png;base64,", ""); } var dataURL = canvas.toDataURL("image/png", 0.5);的时候抛出//Uncaught Error: SECURITY_ERR: DOM Exception 请问该怎么解决
前端的有关IE兼容性的问题(图片的下载)
通过canvas画图, 然后生成图片,方式如下: var myc = document.getElementById("myCanvas"); var ctx=myc.getContext("2d"); var image = new Image(); ctx.clearRect(0,0,800,800);//清空一波画布 ctx.drawImage(一些参数);//画一张图片 image.src = myc.toDataURL("image/png");//生成这张图片,并将格式设定为png (生成这里貌似就出了问题,在火狐,谷歌之类的浏览器,进行了这一步之后是可以再图片上右击,然后进行图片的存储的,可是IE不行,IE的图片另存为那一栏是灰色的) 最后进行下载到本地, var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; // 加工image data,替换mime type imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * 在本地进行文件保存 * @param {String} data 要保存到本地的图片数据 * @param {String} filename 文件名 */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; // 下载后的问题名 var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // download saveFile(imgData,filename); 然而这段代码就是在IE里面运行不了,火狐,谷歌之类都试过都可以正常运行,正常生成图片,并进行下载。 然后我在网上找了这么一段代码: var imgURL = img.src; var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == "complete")break; } oPop.document.execCommand("SaveAs"); oPop.close(); 我发现当图片的路径地址URL确定的时候,就是说页面中的图片确实存在,且有真实路径的情况下是可以进行下载的(在IE下),但是在我用canvas画图画出来的图片再来进行存储的时候for(; oPop.document.readyState != "complete"; )这一行代码报错,报的错意思就是oPop不可为null之类的空值,原错是:无法获取未定义或 null 引用的属性“document”。 求各位大神帮忙看看吧,实在是没招儿了。
javascript localStorage 读取为空
第一次打开页面时读取到的localStorage值为空吗,只有第二次会读取到? 我请空浏览器缓存后打开页面,getItem读取到的localStorage为空,再次刷新后就有了,有办法第一次就能获取到吗? 代码如下: ``` /** * [setImgArr :设置需要本地缓存的图片数组] * 注意:图片按数组顺序存入localStroage, * 使用name="cacheswitch"属性作为标识 * [getImgArr :将缓存图片取出,放入数组中] * @type {Array} */ var setImgArr = [], getImgArr = []; /** * [getImgSrc 获取页面中有标识的图片的src,添加到本地缓存数组中,并从本地缓存中取出赋值给img src] * */ getImgSrc(); function getImgSrc() { $('img').each(function() { var attr=$(this).attr("name"); if(attr=="cacheImg") { setImgArr.push($(this).attr("src")); } }); for(i in setImgArr) { setImg(setImgArr[i]);//设置图片缓存 getImg(setImgArr[i]);//获取图片缓存 } var attrCache=document.getElementsByName("cacheImg"); for(var i=0;i<attrCache.length;i++) { // attrCache[i].src=getImgArr[i]; } } /** * [setImg 设置本地图片缓存] * @return {[type]} [description] */ function setImg(key) { var img=document.createElement('img'); img.addEventListener('load',function(){ //创建一个canvas var imgCanvas=document.createElement("canvas"), imgContext=imgCanvas.getContext("2d"); //确保canvas元素的大小和图片尺寸一致 imgCanvas.width=this.width; imgCanvas.height=this.height; //渲染图片到canvas中,使用canvas的drawImage()方法 imgContext.drawImage(this,0,0,this.width,this.height); //用canvas的dataUrl的形式取出图片,imgAsDataURL是一个base64字符串 var imgAsDataURL=imgCanvas.toDataURL("image/png"); //保存到本地存储中 //使用try-catch()查看是否支持localstorage try { localStorage.setItem(key,imgAsDataURL);//将取出的图片存放到localStorage }catch(e) { console.log("Storage failed:"+e);//存储失败 } },false); img.src=key; } /** * [getImg 从本地缓存获取图片并且渲染] * @param {[type]} key [localStorage中的键名称] * @return {[type]} [存储值-base64的字符串] */ function getImg(key) { var srcStr = localStorage.getItem(key);//从localStorage中取出图片 console.log(getImgArr); getImgArr.push(srcStr); } ``` 附上代码截图: ![图片说明](https://img-ask.csdn.net/upload/201606/28/1467077564_939961.png) ![图片说明](https://img-ask.csdn.net/upload/201606/28/1467077574_532928.png)
获取的图片地址乱码解决,但是保存的图片乱码怎么解决?在线等,求大神,解决,速结贴
package com.togest.emis.modules.resource.web; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.codec.binary.Base64; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.togest.emis.framework.utils.EncodeUtils; /** @author mmk * */ @Controller public class PsaveController { @RequestMapping(value="save",method = RequestMethod.POST) public void save(Map map,HttpServletRequest request,HttpServletResponse response) throws IOException{ String imageData2 = request.getParameter("imageData2"); String file_path = request.getParameter("file_path"); file_path = URLDecoder.decode(file_path , "utf-8"); System.out.println("++++++++++++++++"+file_path); //String f = new String(request.getParameter("file_path").getBytes("ISO-8859-1"),"UTF-8"); //System.out.println("+++++++++++++++++"+f); String file_name = request.getParameter("file_name"); String Path = request.getSession().getServletContext().getRealPath("/"); String filePath2 = file_path.substring(0, 34); String filePath=file_path.replace(filePath2,Path); filePath =EncodeUtils.isoDecode(filePath); String fileName=file_name; File file = new File(filePath); System.out.println("+++++++"+filePath); //System.out.println("+++++++++"+EncodeUtils.isoDecode(filePath)); if(imageData2!=null){ try{ FileOutputStream write = new FileOutputStream(file); byte[] decoderBytes = Base64.decodeBase64(imageData2.replace("data:image/png;base64,","")); imageData2 = imageData2.replace("base64,",""); write.write(decoderBytes); write.flush(); write.close(); }catch(Exception e){ e.printStackTrace(); } } } } 保存控制器代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <!DOCTYPE html> href="${pageContext.request.contextPath}/system/css/wColorPicker.css" /> href="${pageContext.request.contextPath}/system/css/wPaint.css" /> <!-- src="${requestScope.filePath}" name="${requestScope.fileName}" />--> <!-- --> <td colspan="2"> <div> <div id="box"></div> <input type="button" value="保存" onClick="saveImage2()" onblur="saveImage2()" /> <input type="button" value="提交" onblur="saveImage2()" onclick="saveImage2()"> <input type="button" value="全屏" onclick="full_screen()"> </div> <br /> </td> </tr> </table> <br /> <br /> <script type="text/javascript"> $(document).ready(function() { //alert('${filePath}'); ///alert('${ctx}/fileupload/download_file_url?fileDir=${filePath}'); $('#canvasImage3').attr('src','${ctx}/fileupload/download_file_url?fileDir=${filePath}'); }); function saveImage2() { var imageData2 = $("#wPaint2").wPaint("image");//获取wPaint的image属性值可获取base64格式的图片数据 var file_path = encodeURI(document.getElementById("canvasImage3").src);//这个获取乱码 file_path = encodeURI(file_path); var file_name = document.getElementById("canvasImage3").name; alert(file_path); $.ajax({ url : '${ctx}/save', type : 'post', data : { imageData2 : imageData2, file_path : file_path, file_name : file_name }, dataType : "json", success : function(result) { alert(result); if ("ture" == $.trim(result)) { $("#box").html("保存成功"); } else { $("#box").html("保存失败"); } }, error : function() { $("#box").html("保存成功"); } }); //$("#canvasImage2").attr('src', imageData2); } function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } var flag = false; //控制小图 function DrawImage(ImgD) { var image = new Image(); image.src = ImgD.src; if (image.width > 1620 || image.height > 1200) { image.width = 1620; image.height = 1200; } $("#wPaint2").css({ width : image.width, height : image.height }); $("#wPaint2").wPaint({ menuOrientation : 'vertical', imageBg : image.src }); } function full_screen() { var full = document.getElementById("full"); requestFullScreen(full); } function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> ![图片说明](https://img-ask.csdn.net/upload/201608/01/1470031972_457168.png)
手机页面利用canvas压缩图片再上传服务器,谷歌和微信内置浏览器可以华为自带浏览器却不行
如题,先利用canvas压缩图片,再通过ajaxFileUpload等把图片传到服务器,canvas.toDataURL("image/jpeg", 0.2);明明是jpeg了,在谷歌和微信内置浏览器也可以实现,但是用华为机自带的浏览器测试时,却强制性的变成png,压缩的图片也有很大缺失,变成一大块黑色。求高手指点。
html2canvas截图如何解决跨域的问题?
1、问题描述 如果不跨域的话,截图正常。 如果有跨域的图片,那么js报错,报错信息如下: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 2、代码 ``` /** * 截图 */ function doScreenShot(){ html2canvas(document.body, { onrendered: function(canvas) { canvas.id = "mycanvas"; var image =canvas.toDataURL("image/png").replace("image/png","image/octet-stream"); window.location.href=image; // it will save locally } }); } ``` 3、补充 看到官方(https://github.com/niklasvh/html2canvas)上面有介绍代理啥的,也没看明白怎么使用,好像还没有java方面的代理。有人能补充一下这方面的使用介绍么? 或者有其他的web页面截图方面的方法也可以介绍下,谢谢~ ------------- 附: html2canvas 1、官网 https://github.com/niklasvh/html2canvas 2、这个是别人发的提问帖子,问的同样的问题,提问的人说他问题已经解决了,我他妈楞是没看懂啊http://stackoverflow.com/questions/9825962/how-to-use-html2canvas-proxy
HTML5 中canvas做背景上面怎么加入HTML的标单控件
利用canvas绘制了一个带有动态效果的背景,现在想要在上面加上表单控件,该怎么去做 之前有思路是设置为 document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')'; 可是还是不行,再body写表单控件会出现在canvas效果图的上面
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方...
吐血推荐珍藏的Visual Studio Code插件
作为一名Java工程师,由于工作需要,最近一个月一直在写NodeJS,这种经历可以说是一部辛酸史了。好在有神器Visual Studio Code陪伴,让我的这段经历没有更加困难。眼看这段经历要告一段落了,今天就来给大家分享一下我常用的一些VSC的插件。 VSC的插件安装方法很简单,只需要点击左侧最下方的插件栏选项,然后就可以搜索你想要的插件了。 下面我们进入正题 Material Theme ...
如何防止抄袭PCB电路板
目录 1、抄板是什么 2、抄板是否属于侵权 3、如何防止抄板 1、抄板是什么 抄板也叫克隆或仿制,是对设计出来的PCB板进行反向技术研究;目前全新的定义:从狭义上来说,抄板仅指对电子产品电路板PCB文件的提取还原和利用文件进行电路板克隆的过程;从广义上来说,抄板不仅包括对电路板文件提取、电路板克隆、电路板仿制等技术过程,而且包括对电路板文件进行修改(即改板)、对电子产品外形模具进行三维...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
Java世界最常用的工具类库
Apache Commons Apache Commons有很多子项目 Google Guava 参考博客
相关热词 c# clr dll c# 如何orm c# 固定大小的字符数组 c#框架设计 c# 删除数据库 c# 中文文字 图片转 c# 成员属性 接口 c#如何将程序封装 16进制负数转换 c# c#练手项目
立即提问