① js中怎麼把本是長方形圖片壓縮成梯形圖片，我想做出一個立體的圖片轉換效果出來求各位大神指點
郭敦顒回答：
這可能是一項尚未涉及到的等差變形技術——
把本是長方形圖片壓縮成梯形圖片，按其一半設定為正方形，等價於壓縮一邊為直角梯形，按對稱性展開即為等邊梯形了。
設正方形邊長為10cm,400萬像素圖片，那麼每邊有2000個（嚴格說是2001個）等分點，劃平行線，將圖片分成400萬個小方格，這小方格即為像素。每個小方格的邊長則為10cm/2000=50mm/1000=50μm（微米）。
如果把最上方格寬度尺寸由50μm改為40μm向下依次遞增到50μm，社會上尺度是一個等差數列，項數為2000，首項為40μm，末項為50μm。
如此變形，即可把本是長方形圖片壓縮成梯形圖片。
在實用上可利用視線物像的大小與距離成反比（αf=ζ, α—物像尺寸，f—距離， ζ為常數）這一原理，通過照相，把圖片斜放或斜照，即可將本是長方形圖片改變成梯形圖片了。《幾何原本》一書的封面原為長方形的，通過這種攝像，封面變成了梯形。
非常遺憾的是圖片不能上傳了，已有十幾天。此種攝像方法，你若能用得上，可自拍看看效果。
在攝影棚中的一些特技攝影，應該會有這方面的運用。
② 如何利用JS或者CSS樣式來自動調整圖片大小
js版和css版自動按比例調整圖片大小方法，分別如下：
<title>javascript圖片大小處理函數</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
純css的防止圖片撐破頁面的代碼，圖片會自動按比例縮小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
③ js實現圖片轉pdf時怎麼縮小體積
是如何減少pdf文件的大小嗎？
除了轉換PDF文件的格式外，SanPDF還可以壓縮PDF文件大小。如果你需要壓縮PDF文件，SanPDF「合並的PDF文件「工具是您的最佳選擇。
如何免費將PDF文件大小減小到100 KB以下？
步驟如下:
1.打開瀏覽器 搜索SanPDF
2.轉到壓縮PDF文件工具。
3.選擇要壓縮的PDF文件。
4.等待上傳PDF文件被壓縮。我們將在結果頁面上顯示文件大小和壓縮率（百分比）。
5.下載壓縮的PDF文件。
希望可以幫到你鴨
④ 怎麼用JavaScript在線壓縮圖片
主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之後把壓縮好的照片放入內存，最後內存轉入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最後那張失真度很大了，壓縮效率蠻高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)
⑤ jS控制圖片的放大和縮小
圖片按比例縮放
function DrawImage(Img,WIDTH,HEIGHT){
var image=new Image();
image.src=Img.src;
width=WIDTH;//預先設置的所期望的寬的值
height=HEIGHT;//預先設置的所期望的高的值
if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
w=image.width/width;
h=image.height/height;
if(w>h){//比值比較大==>寬比高大
//定下寬度為width的寬度
Img.width=width;
//以下為計算高度
Img.height=image.height/w;
}else{//高比寬大
//定下寬度為height高度
img.height=height;
//以下為計算高度
Img.width=image.width/h;
}
}
}
<img src="xxxx" onload=javascript:DrawImage(this,290,215);>
⑥ js對從伺服器取得的圖片進行壓縮顯示
瀏覽器前端裡面跑js沒辦法壓縮圖片的，js沒io，只能載入圖片，無法讀入真正的圖片數據
⑦ 網站圖片會以壓縮變形來顯示改怎麼解決呢求高手！
這個是因為對img設置了寬度和高度。瀏覽器強制使用了這個尺寸，自然就變形了。
解決方法，
途徑1、盡量使用與頁面顯示塊的比例一致的圖片。
途徑2、如果做不到控制圖片比例。則，用js獲取圖片實際高寬比。若圖片太窄，則將圖片寬度設置為頁面顯示塊的寬度，高度自動；若太寬，則設置高度充滿。頁面此時要將overflow設為hidden，溢出部分不顯示。也可視需要，設置居中等。
⑧ js圖片輪換里如何等比例縮放圖片
希望對你有幫助比例縮放圖片代碼如下：<script language="javascript">
function zone(){
var ben=0.5;//縮小倍數
var zone=document.getElementById("img");
var kuan=zone.width;//原圖寬
var gao=zone.height;//原圖高
//計算高和寬
var new_kuan=kuan*ben;
var new_gao=gao*ben;
//給id=xin的img賦值
document.getElementById("xin").src=zone.src;
document.getElementById("xin").height=new_gao;
document.getElementById("xin").w=new_kuan;
document.getElementById("gao").value=gao;//顯示高
document.getElementById("kuan").value=kuan;//顯示寬
}
</script> <img id="img" src="images/ad03.gif" border="0" />
<input type="button" onclick="zone();" value="獲得"/>
高：<div><input type="text" id="gao" /></div>
寬：<div><input type="text" id="kuan" /></div>
顯示：<img id="xin"/>
⑨ 如何使用JS等比例改變顯示圖片的大小
原理：
用JS在載入圖片後判斷圖片是否突破規定的高和寬，如果超過再根據圖片的寬高比例進行調整。
特別說明，JS代碼只限制圖片的高或者寬時，寬或者高會按照比例進行相應調整。
假如你需要把所有的圖片顯示在140*226的區間裡面，那麼就使用下面這樣的代碼：
<img src=2009/04/1232336585-19.jpg onload='if (this.width>140 || this.height>226) if (this.width/this.height>140/226) this.width=140; else this.height=226;'>