下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML><body><style>button{cursor:pointer;wIDth:24%;border:1px;padding:0px;}.c{max-wIDth:800px;}</style><center><div ><div align="left" height="105" ondragenter="return false" ondragover="return false" ondrop="dropIt(event);"><div align="center">第一步：拖动图片到此处<br>请允许d出窗口，<br>否则除第一张之外的图片无法输出结果<br><p ID="num"></p></div> <output ID="thumbs" ></output></div><div><div align="left">第二步：写上你的图片canvas算法，<br>仅当你需要对图片进行额外加工（如反色，加水印） *** 作时使用<br/><br/>警告！！如果你的图片过大，将可直接导致页面崩溃，请不要选择PNG格式输出。<br/>尽量每次转码后，点击重置按钮或者刷新一下页面再转码下一批。<br /><small>canvas标签的DOM对象"canvas"，canvas的二维绘图对象"can",图像的宽高为w和h,缩放后的大小为img_height*img_wIDth<br />需要绘制的图像为imge，可以使用can.drawImage(img,img_wIDth,img_height)向canvas中重新绘制目标图片。<br>否则你的绘制会显示在图像上方<br />例如<br /> <code align="left" ><pre>ctx=can;ctx.beginPath();ctx.moveto(20,20);ctx.bezIErCurveto(20,100,200,20);ctx.stroke();ctx.fillStyle="#0000ff";ctx.Font="40px Arial";ctx.fillText("Hello World",img_height-300,50); </pre></code></small></div><div align="center"><textarea ID="textarea"></textarea></div></div><div align="left" height="105" align="center"> <center><label for="height">H:</label> <input placeholder="留空为默认高度" type="text" ID='height' onkeyup="s_height=this.value;thii()" onchange=""/> <label for="wIDth">W:</label> <input placeholder="留空为默认宽度" type="text" ID='wIDth' onkeyup="s_wIDth=this.value;thii()" onchange=""/><br/> <small>高度和宽度可使用Js表达式，用h和w表示原始高宽</small> </center> <div> <button onclick="jpg('jpeg')">jpeg</button> <button onclick="jpg('webp')">webp</button> <button onclick="jpg('png')">png</button> <button onclick="document.getElementByID('thumbs').INNERHTML='';ok();">重置</button> </div></div><div ID="done" ></div><div ID="donen"> 生成后右击另存为。注意请允许d出窗口。否则无法同时转码多张图片。</div></div></center><script>var canvas,can;var s_height,s_wIDth;var w,h;var img_height,img_wIDth;window.img=new Array();num=document.getElementByID('num');dui=0;s=new Array();function imagesSelected(myfiles){ for(var i=0,f;f=myfiles[i];i++){ var imageReader=new fileReader(); imageReader.onload=(function(afile){ return function(e){ var span=document.createElement('span'); span.INNERHTML=['<img src="',e.target.result,'" title="',afile.name,'"/>'].join(''); document.getElementByID("thumbs").insertBefore(span,null); dui++; num.INNERHTML="共"+dui+"个文件"; }; })(f); imageReader.onloadend=function(e){ setTimeout('ok()',100); } imageReader.readAsDataURL(f); }}function dropIt(e){ imagesSelected(e.dataTransfer.files); e.stopPropagation(); e.preventDefault();}function thii(){ if(s_wIDth||s_height){ document.getElementByID('height').placeholder='h*('+s_wIDth+')/w'; document.getElementByID('wIDth').placeholder='w*('+s_height+')/h'; }else{ document.getElementByID('height').placeholder='留空为默认高度'; document.getElementByID('wIDth').placeholder='留空为默认宽度'; }}function ok(){ window.img=document.getElementsByClassname("image"); num.INNERHTML="共"+window.img.length+"个文件"; for(i=0;i<window.img.length;i++) num.INNERHTML+="<br />"+window.img[i].Title+':w'+window.img[i].wIDth+'*h'+window.img[i].height; }var jpg=function(type){ window.type=type; textarea=document.getElementByID('textarea'); done=document.getElementByID('done'); done.INNERHTML=''; donen=document.getElementByID('donen'); donen.INNERHTML=''; for(i=0;i<window.img.length;i++){ var span=document.createElement('span'); h=window.img[i].height; w=window.img[i].wIDth; img_height=null; img_wIDth=null; if((!s_height)||(s_height==0)){ img_height=null; }else{ try{ img_height=eval(s_height); }catch(exception){img_height=0;} } if((!s_wIDth)||(s_wIDth==0)){ img_wIDth=null; }else{ try{ img_wIDth=eval(s_wIDth); }catch(exception){img_wIDth=null;} } img_height=(typeof(img_height)=='number')?img_height:h; img_wIDth=(typeof(img_wIDth)=='number')?img_wIDth:h; span.INNERHTML='<canvas height="'+img_height+'" wIDth="'+img_wIDth+'"></canvas>'; document.getElementByID("done").insertBefore(span,null); //var span=document.createElement('span'); } setTimeout('end()',500);}function end(){ type=window.type; window.canvasv=document.getElementsByClassname("canvas"); donen=document.getElementByID('donen'); //donen.INNERHTML=''; for(i=0;i<window.canvasv.length;i++){ canvas=window.canvasv[i]; can=canvas.getContext("2d"); imge=window.img[i]; can.fillStyle="#000000"; can.fillRect(0,img_height); can.drawImage(imge,img_height); can.save(); try { eval(textarea.value); } catch(exception) { alert("textarea内容错误，已恢复默认输出"); can.restore(); } type="image/"+type; myWindow=window.open('',window.img[i].Title,'wIDth=500,height=500,top='+(i*2)+'0,left='+(i*5)+'0') var sz="<Title>"+window.img[i].Title+"</Title><img src='"+canvas.toDataURL(type)+"' Title='"+window.img[i].Title+"' wIDth=100%/><br />右击保存"; //donen.INNERHTML+=sz; myWindow.document.write(sz); myWindow.focus() }}</script></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的借助html5，本地转换图片格式/缩放图片/图片滤镜全部内容，希望文章能够帮你解决借助html5，本地转换图片格式/缩放图片/图片滤镜所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）