canvas 旋转图片并展示图片中的小部分

canvas 旋转图片并展示图片中的小部分

月光魔力鸭

2019-09-23 11:08 阅读 1159 喜欢 0 canvas 图片旋转

需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。

实际上,如果只针对大图的显示和旋转,可以通过css就能搞定,但是这里面有个问题,旋转后实际上他原来的空间不变,会导致并不美观,最终还是决定通过canvas来实现。

大图的旋转显示

image.onload = function(){
    var img = this;
    var width = img.width;
    var height = img.height;
    
    //针对角度来算
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var direction = ((parseInt(rotate,10) + 360) % 360) / 90;
    switch (direction) {
      case 1: {
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(90*Math.PI/180);
        ctx.drawImage(img, 0, -height,width,height);
        break;
      }
      case 2: {
        canvas.width = width;
        canvas.height = height;
        ctx.rotate(180*Math.PI/180);
        ctx.drawImage(img, -width, -height,width,height);
        break;
      }
      case 3: {
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(270*Math.PI/180);
        ctx.drawImage(img, -width, 0,width,height);
        break;
      }
      case 0:
      case 4:
      default: {
        canvas.width = width;
        canvas.height = height;
        ctx.rotate(0);
        ctx.drawImage(img, 0, 0,width,height);
        break;
      }
    }
    $item.get(0).appendChild(canvas);
}

大图旋转和小图展示旋转其实是一样的,只是在canvas drawImage 的时候多几个参数而已。

小图展示旋转

image.onload = (function(direction,filePath,div,showwidth,showheight,sshowwidth,sshowheight,x,y,imgIndex){
    return function(){
    var img = this;
    var thiz = img;
    var width = img.width;
    var height = img.height;
    var canvas = document.createElement('canvas');
    canvas.style.position='relative';
    var ctx = canvas.getContext('2d');
    console.log(direction);
    var canvasX = 0,canvasY = 0;
    switch (direction) {
      case 1: {
        canvas.width = showheight;
        canvas.height = showwidth;
        ctx.rotate(90*Math.PI/180);
        ctx.drawImage(thiz,x,y,showwidth,showheight,0,-showheight,showwidth,showheight);
        break;
      }
      case 2: {
        canvas.width = showwidth;
        canvas.height = showheight;
        ctx.rotate(180*Math.PI/180);
        ctx.drawImage(thiz,x,y,showwidth,showheight,-showwidth,-showheight,showwidth,showheight);
        break;
      }
      case 3: {
        canvas.width = showheight;
        canvas.height = showwidth;
        ctx.rotate(270*Math.PI/180);
        ctx.drawImage(thiz,x,y,showwidth,showheight,-showwidth,0,showwidth,showheight);
        break;
      }
      case 0:
      case 4:
      default: {
        canvas.width = showwidth;
        canvas.height = showheight;
        ctx.rotate(0);
        ctx.drawImage(thiz,x,y,showwidth,showheight,0,0,finalWidth,finalHeight);
        break;
      }
    }
    div.appendChild(canvas);

    div.setAttribute('index',imgIndex);//设置索引
    div.style.width = sshowwidth+'px';
    div.style.height = sshowheight+'px';
    //根据index 查找比对前后插入。
    var sd = document.getElementById('showDetail');
    var cn = sd.childNodes;
    if(cn.length == 0){
        sd.appendChild(div);
    }else{
        //循环找到
        var diff = 10,nearNode = null,isBefore = false;
        cn.forEach(function(tempNode,nodeIndexL){
            var nodeIndex = parseInt(tempNode.getAttribute('index'),10);
            //比对哪个更接近imgIndex
            var currentDiff = Math.abs(nodeIndex - imgIndex);
            if(currentDiff < diff && nodeIndex > imgIndex){
                diff = currentDiff;
                nearNode = tempNode;
                isBefore = true;
            }
        })
        if(isBefore){
            sd.insertBefore(div,nearNode);
        }else{
            sd.appendChild(div);
        }
    }
    
    }
})(direction,filePath,div,showwidth,showheight,sshowwidth,sshowheight,x,y,i);
                        

我这里参数比较多,主要就看switch 里面的那一部分就可以。 我这边的需求是需要显示多个大图的里面的小图,有小图的坐标,然后根据小图坐标展示每个小图图片,并正常显示。

最终的原理就是,旋转canvas,然后将图片渲染并显示部分坐标的内容,最终旋转回来展示。 具体可以查看drawImage的参数说明。

参数说明

转载请注明出处: https://chrunlee.cn/article/canvas-pic-rotate-show.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
在web开发过程中,现在JSON 已经到了俯拾皆是的地步了,操作JSON对于JS来说非常简单,那么我们对于JSON的转化是如何应对的呢?
前端时间搞了个小转码,放在后台,但是特别占带宽,想着能不能从前台把这个事搞定呢?读取图片的二进制,然后将字节流处理后重新生成图片展示处理啊。
nvm install 16.15.0 : The process cannot access the file because it is being used by another process
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的