Canvas使用drawImage画一张图，并压缩base64

xumengxia—xu

已于 2022-04-21 18:43:46 修改

阅读量582

点赞数

分类专栏： Canvas 文章标签：前端 html5

于 2022-04-14 14:12:32 首次发布

本文链接：https://blog.csdn.net/qq_56514785/article/details/124170736

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在线base64转换成jpg :https://www.qtool.net/picconvert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas使用</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="400px" height="400px"></canvas>

    
    <script>
        // 获取画布
        var mycanvas = document.getElementById("mycanvas")
        // 获取山下文
        var ctx = mycanvas.getContext("2d")
        mycanvas.globalAlpha = 0;
        const quality = 0.5 // 重要1
        var myImage = new Image();
        myImage.src = './img/logo1_fto1.png'; //背景图片  你自己本地的图片或者在线图片
        // myImage.crossOrigin = 'Anonymous'; // 解除跨域
        myImage.onload = () => { 
          // 铺底色 Png图片变成jpeg时透明区域会变黑   重要2
          ctx.fillStyle = '#ffffff'
          ctx.fillRect(0,0,400,400)
          ctx.drawImage(myImage, 0, 0, 400, 400); 
          const resultimg = canvasresult.toDataURL('image/jpeg',quality);   // 重要3,必须是图片'image/jpeg'，不能是'image/png'

        }
    
       
        
        
       
    </script>
</body>
</html>