js使用canvas實(shí)現(xiàn)生成圖片縮略圖?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)十余年來(lái)致力于為客戶提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過(guò)多年發(fā)展,公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì),先后服務(wù)、推廣了成百上千家網(wǎng)站,包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。使用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
當(dāng)前題目:js使用canvas實(shí)現(xiàn)生成圖片縮略圖-創(chuàng)新互聯(lián)
文章位置:http://weahome.cn/article/gddpi.html