canvas如何绘制下载(大小)图片

最新推荐文章于 2024-06-05 15:54:14 发布

屈小康

最新推荐文章于 2024-06-05 15:54:14 发布

阅读量701

点赞数

分类专栏： canvas 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45557681/article/details/122211427

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

话不多说代码上解释


<!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>Document</title>
</head>
<body>
    <div id="canvas" style="background-color:pink">
        <canvas height="400" class="canvas" id="mycanvas" width="450"></canvas>
    </div>
    <button>点我下载</button>
</body>
</html>
<script>
  var c = document.getElementById("mycanvas");
  var ctx = c.getContext("2d");
  var can = document.getElementsByTagName("canvas"); 

  function downloadImg (imgSrc , imgName){
    let element = document.createElement("a")
    element.setAttribute("href",imgSrc)
    element.setAttribute("download",imgName)
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)
}
  var img = new Image()
  img.crossOrigin = 'anonymous';
  img.src = 'https://img0.baidu.com/it/u=2183933904,3656400248&fm=26&fmt=auto';
 
  img.onload = function(){
      ctx.drawImage(img , 10 , 10 ,100 , 100 )
      var type = 'image/jpeg';
      let imgSrc = can[0].toDataURL(type);
      
      // 当图片 较大的时候 需要转化为blob 进行下载 
       var bin = atob(imgSrc.split(',')[1]);
        //创建空的Uint8Array
        var buffer = new Uint8Array(bin.length);
        //将图像数据逐字节放入Uint8Array中
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        var blob = new Blob([buffer.buffer], {type: type});
        var url = window.URL.createObjectURL(blob);

    var btn = document.querySelector('button')
      btn.onclick = function(){
       // blob 形式的下载 适合大图  
        // 当然 我们对于名字 和 格式的要求 可以自行再加一个参数types 进行传递 downloadImg(imgSrc,name,types)进行拼接 当然函数也需要进行拼接 很简单的。
        downloadImg(url,'11.png')
        // data下载  适合小图片
         downloadImg(imgSrc,'11.png')
    }
    
  }



</script>