js通過canvas生成圖片縮略圖
更新時間:2020年10月02日 18:11:55 作者:Dean
對于生成縮略圖一般做法是通過后端語言php等來生成,但是為了給服務器減壓,我們或許可以從前端來著手,先生成好不同尺寸的縮略圖,傳給后端,而后端只需要將前端傳過來的圖片進行存儲就好了
現(xiàn)今大部分的網(wǎng)絡應用在上傳圖片的時候都會同時保存幾種尺寸的圖片,專業(yè)術語也就是生成縮略圖,而對于生成縮略圖一般做法是通過后端語言php等來生成,但是為了給服務器減壓,我們或許可以從前端來著手,先生成好不同尺寸的縮略圖,傳給后端,而后端只需要將前端傳過來的圖片進行存儲就好了。
使用Canvas我們可以輕松生成各種尺寸的圖片,具體實現(xiàn)如下:
function resizeImage(src,callback,w,h){
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
im = new Image();
w = w || 0,
h = h || 0;
im.onload = function(){
//為傳入縮放尺寸用原尺寸
!w && (w = this.width);
!h && (h = this.height);
//以長寬最大值作為最終生成圖片的依據(jù)
if(w !== this.width || h !== this.height){
var ratio;
if(w>h){
ratio = this.width / w;
h = this.height / ratio;
}else if(w===h){
if(this.width>this.height){
ratio = this.width / w;
h = this.height / ratio;
}else{
ratio = this.height / h;
w = this.width / ratio;
}
}else{
ratio = this.height / h;
w = this.width / ratio;
}
}
//以傳入的長寬作為最終生成圖片的尺寸
if(w>h){
var offset = (w - h) / 2;
canvas.width = canvas.height = w;
ctx.drawImage(im,0,offset,w,h);
}else if(w<h){
var offset = (h - w) / 2;
canvas.width = canvas.height = h;
ctx.drawImage(im,offset,0,w,h);
}else{
canvas.width = canvas.height = h;
ctx.drawImage(im,0,0,w,h);
}
callback(canvas.toDataURL("image/png"));
}
im.src = src;
}
在線實例地址:http://demo.jb51.net/js/2020/thumbnail/,圖片素材是拿的我們做的一個相框制作應用的截圖,有興趣的朋友可以聯(lián)系我哦,大家一起討論,一起玩。
相關文章
JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
Javascript的setTimeOut和setInterval函數(shù)應用非常廣泛,它們都用來處理延時和定時任務,下面這篇文章主要給大家介紹了關于JavaScript?setTimeout和setInterval的用法與區(qū)別,需要的朋友可以參考下2022-04-04
JS高級調試技巧:捕獲和分析 JavaScript Error詳解
前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error(),瀏覽器也會在我們調用 API 出錯時拋出異常。但估計絕大多數(shù)前端工程師都沒考慮過收集這些異常信息2014-03-03

