您好,登錄后才能下訂單哦!
js使用canvas實現生成圖片縮略圖?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
使用Canvas我們可以輕松生成各種尺寸的圖片,具體實現如下:
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); //以長寬最大值作為最終生成圖片的依據 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; }
看完上述內容,你們掌握js使用canvas實現生成圖片縮略圖的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。