纯HTML的canvas图片缩放拖拽

最新推荐文章于 2024-06-27 15:04:50 发布
最新推荐文章于 2024-06-27 15:04:50 发布
阅读量358 收藏 1
点赞数 1
分类专栏： 前端原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43056561/article/details/119932995
版权

canvas 拖拽 图片缩放 前端开发 HTML5
关键词由CSDN通过智能技术生成 
<!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>
  <script>
    window.onload = function () {
      var canvas, context;
      var img, imgX = 0, imgY = 0, imgScale = 1;
      var MINIMUM_SCALE = 1.0, pos = {}, posl = {}, dragging = false;
      (function int() {
        canvas = document.getElementById('scaleDragCanvas'); //画布对象
        context = canvas.getContext('2d');//画布显示二维图片
        loadImg();
        canvasEventsInit();
      })();
      function loadImg() {
        img = new Image();
        img.onload = function () {
          drawImage();
        }
        img.src = 'https://static.zhihu.com/liukanshan/images/comics/bg-89c9bdc3.jpg';//刘看山
      }
      function drawImage() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        // 保证  imgX  在  [img.width*(1-imgScale),0]   区间内
        if (imgX < img.width * (1 - imgScale)) {
          imgX = img.width * (1 - imgScale);
        } else if (imgX > 0) {
          imgX = 0
        }
        // 保证  imgY   在  [img.height*(1-imgScale),0]   区间内
        if (imgY < img.height * (1 - imgScale)) {
          imgY = img.height * (1 - imgScale);
        } else if (imgY > 0) {
          imgY = 0
        }
        context.drawImage(
          img, //规定要使用的图像、画布或视频。
          0, 0, //开始剪切的 x 坐标位置。
          img.width, img.height,  //被剪切图像的高度。
          imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
          img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
        );
      }
      /*事件注册*/
      function canvasEventsInit() {
        canvas.onmousedown = function (event) {
          dragging = true;
          pos = windowToCanvas(event.clientX, event.clientY);  //坐标转换，将窗口坐标转换成canvas的坐标

        };
        canvas.onmousemove = function (evt) {  //移动
          if (dragging) {
            posl = windowToCanvas(evt.clientX, evt.clientY);
            var x = posl.x - pos.x, y = posl.y - pos.y;
            imgX += x;
            imgY += y;
            pos = JSON.parse(JSON.stringify(posl));
            drawImage();  //重新绘制图片
          }

        };
        canvas.onmouseup = function () {
          dragging = false;
        };
        canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小
          var pos = windowToCanvas(event.clientX, event.clientY);
          event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
          var newPos = { x: ((pos.x - imgX) / imgScale).toFixed(2), y: ((pos.y - imgY) / imgScale).toFixed(2) };
          if (event.wheelDelta > 0) {// 放大
            imgScale += 0.1;
            imgX = (1 - imgScale) * newPos.x + (pos.x - newPos.x);
            imgY = (1 - imgScale) * newPos.y + (pos.y - newPos.y);
          } else {//  缩小
            imgScale -= 0.1;
            if (imgScale < MINIMUM_SCALE) {//最小缩放1
              imgScale = MINIMUM_SCALE;
            }
            imgX = (1 - imgScale) * newPos.x + (pos.x - newPos.x);
            imgY = (1 - imgScale) * newPos.y + (pos.y - newPos.y);
            console.log(imgX, imgY);
          }
          drawImage();   //重新绘制图片

        };
      }
      /*坐标转换*/
      function windowToCanvas(x, y) {
        var box = canvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
        return {
          x: x - box.left - (box.width - canvas.width) / 2,
          y: y - box.top - (box.height - canvas.height) / 2
        };
      }
    }
  </script>
</head>

<body>
  <div>
    <canvas id="scaleDragCanvas" width="878" height="547" style="border: thin solid #aaaaaa;"></canvas>
  </div>
</body>

</html>
urnotlynley
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js技术实现html页面上对图片的拖动与缩放
09-21
js技术实现html页面上对图片的拖动与缩放，
html拖动图片并缩放特效,原生JS实现图片拖拽移动与缩放.html
weixin_34782968的博客
06-04 384
Document#father {width: 600px;height: 500px;background-color: rgb(226, 117, 184);position: relative;left: 200px;top: 200px;transform: scale(0.7201, 0.669);}#box {width: 100px;height: 100px;background-...
如何用canvas实现fabricjs(图层、拖拽、旋转、拉伸)功能
最新发布
sinat_37066308的博客
06-27 1247
本文介绍fabricjs的部分功能（拖拽，图层，选择，缩放，旋转等）的实现思路，水平有限仅供参考。 项目git仓库 ： github.com/pengzhijian… 在最底部也有所有效果的完整代码，有需要的自取。
图片缩放+拖动（html）
dengxuanxian9113的博客
11-30 598
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowImg.aspx.cs" Inherits="ShowImg" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www...
html5缩放后图片向下排列,HTML5对图片进行拖拽缩放打点
weixin_26851099的博客
06-03 258
需求背景：物联网项目，需要在地图上展示设备的位置，能够对地图进行拖拽，缩放，点击设备能够展示出设备的信息。本代码实现了图片的缩放，拖拽，点击图片显示鼠标指针所处位置的坐标(相对于图片)。.dragAble {position: relative;cursor: move;}//放大缩小window.onload = function() {var oImg = document.getElemen...
JS+Html图片放大缩小旋转拖动效果
10-30
根据网上找的代码修改后的成品，实现了图片的方法，缩小，旋转，拖动查看等功能
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
08-17
在这个示例中，我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先，我们需要在HTML文件中创建一个canvas元素，并通过JavaScript获取到这个元素的2D渲染上下文。在HTML部分，可以这样设置： ```...
Canvas图片滑块拖动验证码特效
04-06
Canvas图片滑块拖动验证码特效是其中一种创新且有效的验证方式，它结合了HTML5的Canvas技术，为用户提供了一种直观且有趣的交互体验。本文将深入探讨这种验证码的实现原理、关键技术和应用价值。 首先，Canvas是...
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
11-21
在本文中，我们将探讨如何使用Canvas实现图片的标记、缩放、移动以及保存历史状态的功能，这对于在线教育、文档批注等应用场景非常实用。 首先，让我们来看看如何在Canvas上标记图片。这通常涉及到监听用户的鼠标...
canvas剪裁缩放图片
06-08
<title>Canvas图片剪裁与缩放 <canvas id="myCanvas" width="500" height="500"></canvas> *"> <script src="cs.js"></script> </html> ``` 接着，我们需要引入一个外部JavaScript文件（如`cs.js`），在这个...
双指缩放canvas图片_移动端 图片手势控制 双指缩放 单指移动
weixin_39534978的博客
12-20 1081
var pageX,pageY,position_top,position_left;function setGesture(el) {var obj = {}; //定义一个对象var istouch = false;var start = [];el.addEventListener("touchstart", function(e) {if (e.touches.length >= 2...
HTML5实现图片拖动，旋转，放大，拉伸等特效
11-04
HTML5实现图片拖动，旋转，放大，拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
html5 canvas图片缩放，拖拽
12-01 6117
想用html5 canvas来实现地图功能 主要是想把地图功能集合在系统中，而不是使用类似geoserver等发布，相当于两套系统了。地图是室内地图，所以高德百度什么的没用。我的理想情况是丢一副矢量图当做地图，上面有几个监控点放置摄像头等等。目前还在设计中…… 后面发现canvas似乎可以试试，就找了个easelJs.js的js库，但这玩意不知道怎么回事，对click事件的反应很不好，对mou
使用HTML5的Canvas标签实现绘图板内拖拽元素
baidu_27133421的博客
10-25 6861
使用javascript的全局变量+（鼠标的移动、按住和放开的这3个事件）实现拖拽事件，利用Canvas进行绘图实现 画布内元素的拖拽。
图片简单缩放及拖动
小马的博客
05-10 100
图片缩放，拖动，自适应，兼容IE9及以上
html鼠标拖动图片放大,JavaScript实现图片的放大缩小及拖拽功能示例
weixin_35650041的博客
06-04 1125
本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：实现效果如下：实现代码：Titlediv{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}div img{position:absolute;height:100%;width:auto;...
【前端】【canvas】在canvas中绘制和拖动
JackCao_Grass的博客
03-13 580
在canvas中绘制和拖动
canvas 鼠标缩放和移动图片
06-11
要实现canvas鼠标缩放和移动图片，可以通过以下步骤： 1.创建canvas元素，并在其中绘制需要展示的图片； 2.为canvas元素添加鼠标滚动事件，根据滚动方向进行缩放操作，可以通过设置canvas的缩放比例实现； 3.为canvas元素添加鼠标拖拽事件，实现图片在canvas中的移动，可以通过设置canvas的偏移量实现。 下面是示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas鼠标缩放和移动图片</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'image.jpg'; // 图片加载完成后进行绘制 img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; // 鼠标滚动事件 canvas.onmousewheel = function(e) { e.preventDefault(); var zoom = e.wheelDelta > 0 ? 1.1 : 0.9; // 根据滚动方向确定缩放比例 var x = e.offsetX; var y = e.offsetY; ctx.translate(x, y); ctx.scale(zoom, zoom); ctx.translate(-x, -y); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; // 鼠标拖拽事件 var isDragging = false; var lastX, lastY; canvas.onmousedown = function(e) { isDragging = true; lastX = e.offsetX; lastY = e.offsetY; }; canvas.onmouseup = function(e) { isDragging = false; }; canvas.onmousemove = function(e) { if (isDragging) { var offsetX = e.offsetX - lastX; var offsetY = e.offsetY - lastY; ctx.translate(offsetX, offsetY); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); lastX = e.offsetX; lastY = e.offsetY; } }; </script> </body> </html> ``` 在以上代码中，我们通过canvas的translate、scale和clearRect方法实现了图片的缩放和移动。同时，为了避免缩放和移动后出现重影，我们在每次操作前先清除canvas。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值