資訊專欄INFORMATION COLUMN
摘要：對圖片進行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點壓縮后圖片的大小壓縮完成渲染。。。。
//------------ 對圖片進行壓縮
function compress(imgPath) {
var image = new Image();
//新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點)
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
// 對圖片進行繪制,在div里顯示成正方形
var searchImgPath = "拿到圖片地址";
var searchImgSize ="140";//要生成的正方形尺寸
compress(searchImgPath,searchImgSize);
// 對圖片進行繪制,在div里顯示成正方形
function compress(imgPath,maxSize) {
var image = new Image();
//新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點)
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://specialneedsforspecialkids.com/yun/103372.html
摘要：對圖片進行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點壓縮后圖片的大小壓縮完成渲染。。。。 //------------ 對圖片進行壓縮 function compress(imgPath) { var image = new Image(); //新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點) image.src = imgPath; ...
摘要：對圖片進行壓縮新建一個標(biāo)簽還沒嵌入節(jié)點壓縮后圖片的大小壓縮完成渲染。。。。 //------------ 對圖片進行壓縮 function compress(imgPath) { var image = new Image(); //新建一個img標(biāo)簽（還沒嵌入DOM節(jié)點) image.src = imgPath; ...
摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實際前端業(yè)務(wù)中，也經(jīng)常會有很多的項目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言： 圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實際前端業(yè)務(wù)中，也經(jīng)常會有很多的項目需要用到圖片加工和處理。由于過去一段時間公司的業(yè)務(wù)需求，讓我在這方面積累...
閱讀 3433·2023-04-25 18:14
閱讀 1526·2021-11-24 09:38
閱讀 3244·2021-09-22 14:59
閱讀 3060·2021-08-09 13:43
閱讀 2562·2019-08-30 15:54
閱讀 563·2019-08-30 13:06
閱讀 1540·2019-08-30 12:52
閱讀 2719·2019-08-30 11:13
