資訊專欄INFORMATION COLUMN
摘要：對圖片進(jìn)行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點(diǎn)壓縮后圖片的大小壓縮完成渲染。。。。
//------------ 對圖片進(jìn)行壓縮
function compress(imgPath) {
var image = new Image();
//新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn))
image.src = imgPath;
image.onload = function() {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var imageWidth = image.width / 3;
//壓縮后圖片的大小
var imageHeight = image.height / 3;
var data = "";
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
data = canvas.toDataURL("image/jpeg")
//壓縮完成
$(".srcDiscernImg").attr("src", data);
console.log("渲染。。。。");
}
}
//-------------canvas，css結(jié)合繪制正方形圖片
html
css
.proimg-search-top .l-search-img{ width:140px; height:140px;margin-bottom: 10px;position:relative;background-color:#fff; }
.proimg-search-top .l-search-img img{ position:absolute;left:50%;top:50%; -moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%) }
js
// 對圖片進(jìn)行繪制,在div里顯示成正方形
var searchImgPath = "拿到圖片地址";
var searchImgSize ="140";//要生成的正方形尺寸
compress(searchImgPath,searchImgSize);
// 對圖片進(jìn)行繪制,在div里顯示成正方形
function compress(imgPath,maxSize) {
var image = new Image();
//新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn))
image.src = imgPath;
image.onload = function() {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var imageWidth = image.width;
//壓縮后圖片的大小
var imageHeight = image.height;
if(imageWidth > imageHeight){//橫的圖片
var imgSize = imageWidth/imageHeight;
imageWidth = maxSize;
imageHeight = imageWidth / imgSize;
}else if(imageWidth < imageHeight){//豎的圖片
var imgSize = imageWidth/imageHeight;
imageHeight = maxSize;
imageWidth = imageHeight * imgSize;
} else{ //如果為正方形
imageWidth = image.width;
imageHeight = image.height;
}
var data = "";
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
data = canvas.toDataURL("image/jpeg")
//壓縮完成
$("#imageSearchSrc").attr("src", data);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103372.html
摘要：對圖片進(jìn)行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點(diǎn)壓縮后圖片的大小壓縮完成渲染。。。。 //------------ 對圖片進(jìn)行壓縮 function compress(imgPath) { var image = new Image(); //新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn)) image.src = imgPath; ...
摘要：對圖片進(jìn)行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點(diǎn)壓縮后圖片的大小壓縮完成渲染。。。。 //------------ 對圖片進(jìn)行壓縮 function compress(imgPath) { var image = new Image(); //新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn)) image.src = imgPath; ...
摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會有很多的項(xiàng)目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言： 圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會有很多的項(xiàng)目需要用到圖片加工和處理。由于過去一段時間公司的業(yè)務(wù)需求，讓我在這方面積累...
摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。原圖片對象上傳裁剪后的對象初始化圖片預(yù)覽根據(jù)裁剪參數(shù)繪制轉(zhuǎn)對象以下將對每個環(huán)節(jié)詳解?；蛘吒鶕?jù)獲取裁剪信息包括旋轉(zhuǎn)和縮放用進(jìn)行手動繪制。 前言 圖片裁剪上傳，不僅是一個很貼合用戶體驗(yàn)的功能，還能夠統(tǒng)一特定圖片尺寸，優(yōu)化網(wǎng)站排版，一箭雙雕。 需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。 我第一個想到的方法就是，將圖片和裁剪參數(shù)（x...
閱讀 3463·2023-04-25 18:14
閱讀 1568·2021-11-24 09:38
閱讀 3282·2021-09-22 14:59
閱讀 3095·2021-08-09 13:43
閱讀 2600·2019-08-30 15:54
閱讀 595·2019-08-30 13:06
閱讀 1580·2019-08-30 12:52
閱讀 2750·2019-08-30 11:13
