フロントエンドの画像圧縮の背景
土地の隅々が貴重なインターネット時代では、速度が競争力の第 1 位であることは誰もが知っています.5G 開発はリードを揺るがしましたが、ユーザーがウェブページに多くの「ビッグマック」の写真をアップロードすることに耐えられず、最終的には.その結果、ページが「すばやく」開きます...
もちろん、技術者として、次のような多くのソリューションがあります。
-
アップロードする前に画像を圧縮する
-
画像をイメージ ベッドにアップロードし、イメージ ベッドの圧縮機能と CDN ノードを使用して近くに配布します
-
画像ストリーミング
-
画像の遅延読み込み/事前読み込み
もちろん、スマートな友人は、上記のソリューションを組み合わせて、より優れた画像の「スピードアップ」ソリューションを設計することもできます。
インターネット上には多くの実践例があるため、今日はすべてのソリューションを紹介することはしません. 次に、フロントエンド技術の改善の観点から、ネイティブJavaScriptを使用して、画像のアップロードからアップロードまでの完全なソリューションを実現する方法を共有します. image custom compression .この記事で紹介したスキームを実際の開発で直接使用するか、それに基づいてより優れた画像圧縮スキームを設計できます。
画像圧縮のソリューション
画像圧縮のフロントエンド実装は、ユーザーが画像をアップロードした後に画像ファイルをfile変換し、 それを image对象使用して 画像を指定された容量に圧縮するだけです。プロセスは次のとおりです。canvasapi
コード
まず、fileへの変換を最初に実現します。ここでは API をimage对象使用します。コードは次のとおりです。FileReader
// 压缩前将file转换成img对象
function readImg(file:File) {
return new Promise((resolve, reject) => {
const img = new Image()
const reader = new FileReader()
reader.onload = function(e:any) {
img.src = e.target.result
}
reader.onerror = function(e) {
reject(e)
}
reader.readAsDataURL(file)
img.onload = function() {
resolve(img)
}
img.onerror = function(e) {
reject(e)
}
})
}
ここでは、それを使用して promise 画像データを生成する方法を設計します. 次に、コアの画像圧縮ソース コードを見てみましょう。
/**
* 压缩图片
* @param img 被压缩的img对象
* @param type 压缩后转换的文件类型
* @param mx 触发压缩的图片最大宽度限制
* @param mh 触发压缩的图片最大高度限制
* @param quality 图片质量
*/
function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const { width: originWidth, height: originHeight } = img
// 最大尺寸限制
const maxWidth = mx
const maxHeight = mh
// 目标尺寸
let targetWidth = originWidth
let targetHeight = originHeight
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > 1) {
// 宽图片
targetWidth = maxWidth
targetHeight = Math.round(maxWidth * (originHeight / originWidth))
} else {
// 高图片
targetHeight = maxHeight
targetWidth = Math.round(maxHeight * (originWidth / originHeight))
}
}
canvas.width = targetWidth
canvas.height = targetHeight
context?.clearRect(0, 0, targetWidth, targetHeight)
// 图片绘制
context?.drawImage(img, 0, 0, targetWidth, targetHeight)
canvas.toBlob(function(blob) {
resolve(blob)
}, type || 'image/png', quality)
})
}
ここでは、 canvas幅と高さを制御し、 canvas パラメータ を設定することでtoBlob、カスタム画像圧縮を実現しています。
コードがわからない場合は、記事の最後に質問を投稿することもできます。それに応じて回答します。
より多くのフロントエンド効率改善ソリューション
-
xijs は 、複雑なビジネス シナリオ向けの JavaScript ツール ライブラリです。
-
react-slider-vertify 反応に基づくスライド検証コードコンポーネント
-
react-cropper-pro は、 画像のアップロード + トリミング + 圧縮コンポーネントをサポートしています
-
h5-dooring online H5ページ作成ツール
-
v6.Dooring ビジュアル大画面ビルディング プラットフォーム