js通過(guò)canvas生成圖片縮略圖
現(xiàn)今大部分的網(wǎng)絡(luò)應(yīng)用在上傳圖片的時(shí)候都會(huì)同時(shí)保存幾種尺寸的圖片,專(zhuān)業(yè)術(shù)語(yǔ)也就是生成縮略圖,而對(duì)于生成縮略圖一般做法是通過(guò)后端語(yǔ)言php等來(lái)生成,但是為了給服務(wù)器減壓,我們或許可以從前端來(lái)著手,先生成好不同尺寸的縮略圖,傳給后端,而后端只需要將前端傳過(guò)來(lái)的圖片進(jìn)行存儲(chǔ)就好了。
使用Canvas我們可以輕松生成各種尺寸的圖片,具體實(shí)現(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); //以長(zhǎng)寬最大值作為最終生成圖片的依據(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; } } //以傳入的長(zhǎng)寬作為最終生成圖片的尺寸 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; }
在線實(shí)例地址:http://demo.jb51.net/js/2020/thumbnail/,圖片素材是拿的我們做的一個(gè)相框制作應(yīng)用的截圖,有興趣的朋友可以聯(lián)系我哦,大家一起討論,一起玩。
- 原生js生成圖片驗(yàn)證碼
- Java利用Phantomjs實(shí)現(xiàn)生成圖片的功能
- Node.JS用純JavaScript生成圖片或滑塊式驗(yàn)證碼功能
- 在JSP頁(yè)面中動(dòng)態(tài)生成圖片驗(yàn)證碼的方法實(shí)例
- js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法
- JSP開(kāi)發(fā)之生成圖片驗(yàn)證碼技術(shù)的詳解
- Nodejs中使用captchapng模塊生成圖片驗(yàn)證碼
- 基于linnux+phantomjs實(shí)現(xiàn)生成圖片格式的網(wǎng)頁(yè)快照
- JavaScript之移動(dòng)端H5生成圖片解決方案講解
相關(guān)文章
JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04js實(shí)現(xiàn)的仿新浪微博完美的時(shí)間組件升級(jí)版
本博客沒(méi)有華麗的布局,只求樸實(shí)的js的代碼,只為js代碼愛(ài)好者提供,一周大概會(huì)出1-2篇js前沿代碼的文章.只是代碼,不說(shuō)技術(shù)2011-12-12使用js實(shí)現(xiàn)動(dòng)態(tài)背景
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)動(dòng)態(tài)背景,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11javascript 文章截取部分無(wú)損html顯示實(shí)現(xiàn)代碼
近在做一些內(nèi)容搜索的工作,搜索出來(lái)的內(nèi)容為html格式,列表部分需要顯示每項(xiàng)內(nèi)容的一部分。2010-05-05利用canvas實(shí)現(xiàn)的加載動(dòng)畫(huà)效果實(shí)例代碼
之前看到一個(gè)Android的加載效果不錯(cuò),一直想自己動(dòng)手做一個(gè),正好這段時(shí)間重溫了一個(gè)Canvas,所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實(shí)現(xiàn)加載效果的相關(guān)資料,需要的朋友可以參考下。2017-07-07JavaScript移除數(shù)組內(nèi)重復(fù)元素的方法
這篇文章主要介紹了JavaScript移除數(shù)組內(nèi)重復(fù)元素的方法,實(shí)例分析了javascript遍歷數(shù)組及刪除等操作的相關(guān)技巧,需要的朋友可以參考下2015-03-03JavaScript使用前綴樹(shù)(trie樹(shù))實(shí)現(xiàn)文本高亮
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用前綴樹(shù)(trie樹(shù))實(shí)現(xiàn)文本高亮效果,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04在一個(gè)js文件里遠(yuǎn)程調(diào)用jquery.js會(huì)在ie8下的一個(gè)奇怪問(wèn)題
這樣的腳本你在ie8下調(diào)用,在ie8地址欄下按下回車(chē)后調(diào)用jquery的對(duì)像、方法什么的沒(méi)有問(wèn)題,但是刷新之后就有問(wèn)題。就是刷新之后無(wú)論怎樣你要在地址欄按一下回車(chē)。2010-11-11javascript正則表達(dá)式之分組概念與用法實(shí)例
這篇文章主要介紹了javascript正則表達(dá)式之分組概念與用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式分組的功能、定義與使用方法,需要的朋友可以參考下2016-06-06