canvas保持清晰度与图片裁切

仙古.梦回～

已于 2024-05-19 19:44:25 修改

阅读量253

点赞数 2

文章标签： css 前端

于 2024-05-15 21:22:04 首次发布

本文链接：https://blog.csdn.net/qq_55139096/article/details/138923908

版权

1.原始尺寸

图片分为两种尺寸，第一种尺寸叫做原始尺寸（自然尺寸），在HTML 5中，新增加了两个根据图片原始大小用来判断图片的宽度和高度的属性，分别为 naturalWidth 和 naturalHeight属性，表示这张图片画出来的时候，它本身自带的尺寸。

2.样式尺寸

另一种尺寸叫做样式尺寸，就是我们设置这个图片的style的尺寸，它表示图片展现在页面上的尺寸。

3.缩放倍率浏览器的缩放倍率，可通过window.devicePixelRatio获取。

原始尺寸 = 样式尺寸 * 缩放倍率

当满足以上公式时图片会始终保持清晰


const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
 

// 原始尺寸
canvas.width = 200 * devicePixelRatio;
canvas.height = 200 * devicePixelRatio;

使用canvas裁切图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: relative;
        width: 800px;
        height: 400px;
      }
      .box img {
        width: 100%;
        height: 100%;
      }
      #canvas{
        box-sizing: border-box;
        border: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.6);
      }
      .showbox {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <button id="cut">裁切</button>
    <div class="box">
      <img src="./naroto.webp" />
      <canvas id="canvas" width="200" height="200"></canvas>
    </div>

    <div class="showbox"></div>
    <script>
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext('2d')
      const cutbtn = document.querySelector("#cut");
      const cutbox = document.querySelector('.cutbox')
      const show = document.querySelector(".showbox");
      /*直接在浏览器中打开然后裁切图片的话控制台会报错，因为是基于file:// 进行调试的，
        而chrome做了安全相关的处理，主要是HTML5安全的CORS（跨域资源共享）
        的安全限制，造成出现这样的提示，如果你需要在自己的电脑上调试的话，
        只需要本地搭建一个服务器环境就可以了（基于vscode的插件live server打开也可）。
      */
      cutbtn.onclick = function(){
          //方框离左侧距离
          const left = canvas.offsetLeft - canvas.offsetWidth/2
          //方框离顶部距离
          const top = canvas.offsetTop - canvas.offsetHeight/2
          const img = new Image()
          img.src = './naroto.webp'
          //裁切
          ctx.drawImage(img,left,top,200,200,0,0,200,200)
          //转成base64字符串
          const data = canvas.toDataURL()
          const boxImage = new Image()
          boxImage.src = data
          show.appendChild(boxImage)
      }

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

仙古.梦回～

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas保持清晰度与图片裁切

在HTML 5中，新增加了两个根据图片原始大小用来判断图片的宽度和高度的属性，分别为 naturalWidth 和 naturalHeight属性，表示这张图片画出来的时候，它本身自带的尺寸。3.缩放倍率浏览器的缩放倍率，可通过window.devicePixelRatio获取。的尺寸，它表示图片展现在页面上的尺寸。当满足以上公式时图片会始终保持清晰。图片分为两种尺寸，第一种尺寸叫做。，就是我们设置这个图片的。
复制链接

扫一扫