ホームページ >ウェブフロントエンド >htmlチュートリアル >Canvas を使用して画像を圧縮する具体的な手順

Canvas を使用して画像を圧縮する具体的な手順

王林転載: 2020-10-30 17:13:073250ブラウズ

キャンバスを使用して画像を圧縮する手順:

(推奨ビデオチュートリアル: html ビデオチュートリアル)

1. Get絵要素

2. 空白のキャンバスを描画します

3. キャンバスに絵を描きます

4. キャンバスをbase64に変換します(ここで呼び出されるメソッドは圧縮を実現できます)。 Base64 は src に直接入れることも、バックエンドに渡すことも、他の形式に変換して送信することもできます。)

コード実装:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <img  src="test.png"   style="max-width:90%" id="imgBefore" alt="Canvas を使用して画像を圧縮する具体的な手順" >
    <img  src="" id="imgafter" alt="Canvas を使用して画像を圧縮する具体的な手順" > //待会压缩完的图片放入这里。
</body>
</html>
<script>
    var img = document.getElementById(&#39;imgBefore&#39;) //拿到图片元素
    img.setAttribute("crossOrigin",&#39;Anonymous&#39;) //这句话并不是必要的，如果你的图片是一个网络链接，
    //那么canvas绘制时可能会报错，是因为跨域的安全性问题。报错时加上就对了。
    img.onload = ()=>{ //要确保图片已经加载完才进行绘制，不然拿不到图片元素会绘制出全黑的区域，就是失败。
        var width = img.width
        var height = img.height
        var canvas = document.createElement(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        canvas.width = width;
        canvas.height = height; //以上几步都在绘制一个canvas
        ctx.drawImage(img,0,0,width,height);//将图片绘制进去，这里第一个参数可以接受很多格式，
        //以元素为例子，详情https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
        var base64 = canvas.toDataURL(&#39;image/jpeg&#39;,0.2); //第二个参数为压缩的比例，越小越模糊。0-1
        document.getElementById(&#39;imgafter&#39;).src = base64
    }
        
</script>

効果の比較:

圧縮前

Canvas を使用して画像を圧縮する具体的な手順

圧縮後:

Canvas を使用して画像を圧縮する具体的な手順

関連する推奨事項: html チュートリアル

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

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：HTMLの3つのレイアウトとは何ですか?次の記事：HTMLの3つのレイアウトとは何ですか?

続きを見る