Canvasで画像を圧縮する方法

今回はCanvasを使って画像を圧縮する方法を紹介します。 Canvas を使用して画像を圧縮する場合の 注意事項 は何ですか? 以下は実際のケースです。見てみましょう。

1. ローカル画像入力

1. ローカル ファイルの取得

<!--HTML-->
<input type="file" id="choose-img" />

// JS
var chooseImg = document.getElementById("choose-img");
chooseImg.onchange = function(e){
    var file = this.files[0];
    // ……  （省略部分代码后续依次展示，下同）
};

は非常に簡単で、ファイル タイプのボタンからローカル ファイルを取得するだけです。

2. 取得したローカルファイルの種類を決定します

<!--HTML-->
<div id="result"></div>

3. 取得したローカル画像をbase64形式で出力します

2. Canvasを作成します

// JS
var result = document.getElementById("result");    // 用于显示图片输出结果，或者错误提示
if(/image/.test(file.type)){     // 判断文件类型是否为图片
    // ……
}
else{
    result.innerHTML = &#39;<span style="color: red;">文件类型有误！</span>&#39;;
}

：キャンバスのサイズは入力画像の幅と高さと同じです。

2. 絵を描く

var img = new Image(),      // 创建图片对象，用于放置原始图片
    reader = new FileReader();
reader.readAsDataURL(file);    // 以base64格式读取并存入FileReader对象的result属性中
reader.onload = function(){
    img.src = this.result;   // 将图片base64字符串直接赋予Image对象的src中
    document.body.insertBefore(img,chooseImg);   // 将输出的图片插入到文件按钮之前
    img.onload = function(){
        // ……
    };
};

3. 画像を圧縮して出力する

var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
var context = canvas.getContext('2d');

テストの結果、Canvas を介して JPEG 形式の画像を圧縮するのが最も効果的であることがわかりましたが、PNG の圧縮効果は明ら​​かではなく、場合によっては圧縮効果が大きくなることがあります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5 ブロックレベルタグの概要

H5 の高度なインラインタグ

H5 を使用してカメラを呼び出す方法

以上がCanvasで画像を圧縮する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。