ホームページ > ウェブフロントエンド > jsチュートリアル > Canvasを使用して画像を圧縮するにはどうすればよいですか?

Canvasを使用して画像を圧縮するにはどうすればよいですか?

零下一度
リリース: 2017-06-24 14:31:59
オリジナル
1602 人が閲覧しました

現在、携帯電話で撮影した写真は数メガバイトになることが多く、ユーザーが携帯電話で写真をアップロードすると、一方は大量のデータを消費し、他方はアップロードに時間がかかります。この問題を解決するには、次のことが必要です。画像を圧縮します:

アイデア: キャンバスを使用して画像を再描画し、アスペクト比を変更せずに保ちます。特定の幅と高さは特定の状況に応じて異なります。

コード:

html:

<input type="file" id="upload" /><p>压缩前:</p><img id="oldImg" src=""/><p>压缩后:</p><img id="newImg" src=""/>
ログイン後にコピー

js:

var oldImg = document.getElementById("oldImg");var newImg = document.getElementById("newImg");//创建一个隐藏的canvasvar canvas = document.createElement("canvas");
canvas.id = "myCanvas";
canvas.style.display = "none";
document.body.appendChild(canvas);            
var cxt = canvas.getContext('2d');var upload = document.getElementById("upload");
upload.onchange = function(){//获取input file里面的图片路径,该路径为blob格式var url = getObjectURL(this.files[0]);
    oldImg.src = url;
    canvasImg.src = oldImg.src;
    canvasImg.onload = function(){//这是一个过渡的img,当这个img加载完成时绘制到canvas上面var m = oldImg.height/oldImg.width;
        canvas.width = 375;
        canvas.height = canvas.width*m;
        cxt.drawImage(canvasImg,0,0,canvas.width,canvas.height);//canvas绘制完成则转换为base64并传到新的图片上,再删除canvasvar Pic = document.getElementById("myCanvas").toDataURL("image/png");
        newImg.src = Pic;
        document.body.removeChild(canvas);}
}//建立一個可存取到該file的urlfunction getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);
    }return url;
}
ログイン後にコピー

レンダリング:

はコンピュータでテストされており、モバイル バージョンも同様です。

このメソッドは、フロントエンドページのコードでは非常に長くて不快に見えます。画像がサーバーに送信されるのを待って、圧縮された画像がサーバー上の画像アドレスを直接表示する方法です。

以上がCanvasを使用して画像を圧縮するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート