Canvas玩转图像处理_技术问答

无价脂宝

像素计算问题: 表示出来的结果是一样吗，你换一下都对比一下就知道了; 2020-11-19 1回答·868浏览

Kerry251150

老师，如何用两个点画这种图形: 2020-09-04 2回答·1041浏览

qq_孤独之旅_1

WindowToCanvas中的xy是怎么传入值得: 调用方法传值; 2020-06-14 1回答·1215浏览

慕斯卡8272550

canvas跨域处理: 起一个本地服务就可以了; 2020-04-18 1回答·1117浏览

慕虎0392284

谷歌浏览器不支持onmousemove吗: 支持的呀; 2020-04-01 1回答·1101浏览

等她下班

老师，离屏canvas有一个问题请教: fillStyle 可以设置成 RGBA，你应该在离屏 canvas 就处理好。然后调用目标 canvas 直接画; 2020-03-04 1回答·1146浏览

熊出没

思路一对图片进行缩放的算法是不是有问题？: 我看的时候也觉得有问题。。。不知道是不是我的理解有问题，截取是从原图（sx,sy）截取的，思路1正确的做法我觉得应该是把canvas的宽高等比缩小后原图宽高的1/2减去缩小后的画布宽高的1/2，截取下来的部分再放在画布上(0,0,canvas.width,canvas.height); 2019-09-19 2回答·1476浏览

qq_杨小姐好萌啊_0

图片放大后，显示不出的部分怎么看

写几个滑块控制不同方向超出部分大小，注意这里就不能再使用 drawImageByScale 了，因为这个函数是以中心为缩放de。

html代码，max,value等值随意。

<input type="range" name="range" id="vertical" min="0" max="3.0" step="0.01" value="1.5" class="slider left">

js代码：

let canvas = document.querySelector('#canvas'),
    vertical = document.querySelector('#vertical'),    // 右侧滑块
   slider = document.querySelector('#range');
   
   ...
   
let scale = slider.value;
let exceedInfo = { dx: 0, dy: 0, imageWidth: 0, imageHeight: 0 };   // 缩放后的图像信息
...
image.onload = () => {
   vertical.onmousemove = () => {
     const { dx, dy } = exceedInfo;
     dy < 0 && drawExceedImage(vertical.value); // 超出的时候小于0
   }
}

// 绘制超出部分
function drawExceedImage(y) {
   context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
   const { dx, imageWidth, imageHeight } = exceedInfo;
   context.drawImage(image, dx, -y, imageWidth, imageHeight);
}
            
function drawImageByScale(scale) {
  ...
  if (dy < 0) {
    let max = Math.abs(dy) * 2;  // 滑块的最大值，dy是顶部超出，因为纵向只用了一个滑块，所以底部 + 顶部 = *2
    vertical.max = max;
    vertical.value = max / 2;  // 初始值是中间值，表示无translateY
  }
  ...
    return { dx, dy, imageWidth, imageHeight }
}

一开始是这样：

这时候其实没有超出，可以隐藏右侧滑块，我没写。

放大后这样（已经在垂直方向超出了）：

拖到顶部是这样：

拖到底部是这样：

2019-09-17 2回答·2118浏览

慕桂英1016021

说什么属性不是一个long 怎么办: contexta应该是canvasa吧; 2019-05-28 1回答·1353浏览

qq_Takeiteasy_2

我的图片为啥不能自动填满整个画布？当我把canvas的dh参数设置成1200的时候就自动填满了。。: 找到原因了，我截取的时候截取的大小超过了图片的大小，所以。。; 2019-04-26 1回答·1997浏览

何时才能成大佬

for循环的遍历与图中每个像素点在一维数组中的下标

for (var i=0;i<5;i++){

for (var j=0;j<3;j++){

var p = i*3+j;

document.write(p+' ');

}

document.write("<br />");

for (var i=0;i<5;i++){

for (var j=0;j<3;j++){

var p = j*3+i;

document.write(p+' ');

}

2019-04-03 1回答·1640浏览

何时才能成大佬

for循环

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
 .btn{
            text-decoration: none;
            border: 1px solid black;
            border-radius: 5px;
            background: white;
            color: black;
            padding: 10px;
            box-shadow: 5px 5px 5px #b7b7b7;
        }
    </style>
</head>
<body>

<div style="margin:20px auto;width:1168px;">
    <canvas id="canvasa" width="582" height="388" style="display:block;float:left;border:1px solid #aaa;"></canvas>
    <canvas id="canvasb" width="582" height="388" style="display:block;float:right;border:1px solid #aaa;"></canvas>
    <div style="clear:both;"></div>

    <div style="text-align:center;margin-top:50px;font-size:20px;">
        <a href="javascript:blurEffect()" class="btn">Blur Effect</a>
    </div>
</div>


<script>
 var cnvA=document.getElementById("canvasa");
    var cxtA=cnvA.getContext("2d");

    var cnvB=document.getElementById("canvasb");
    var cxtB=cnvB.getContext("2d");

    var image=new Image();
    window.onload=function(){
        image.src="images/02.jpg";
        image.onload=function(){
            cxtA.drawImage(image,0,0,cnvA.width,cnvA.height);
        }

    };







    function blurEffect(){
        var imageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
        var data=imageData.data;

        var tempImageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
        var tempData=tempImageData.data;

        var blurR=3;
        var number=(blurR+1+blurR)*(blurR+1+blurR);
        for(var i=blurR;i<.height-blurR;i++){
            for(var j=blurR;j<cnvB.width-blurR;j++){

                var sumR=0,sumG= 0,sumB=0;
                for(var dx=-blurR;dx<=blurR;dx++){
                    for(var dy=-blurR;dy<=blurR;dy++){
                        var x=i+dx;
                        var y=j+dy;

                        var index=x*cnvB.width+y;
                        sumR+=tempData[index*4+0];
                        sumG+=tempData[index*4+1];
                        sumB+=tempData[index*4+2];
                    }
                }
                var index=i*cnvB.width+j;
                data[index*4+0]=sumR/number;
                data[index*4+1]=sumG/number;
                data[index*4+2]=sumB/number;
            }
        }

        cxtB.putImageData(imageData,0,0,0,0,cnvB.width,cnvB.height);
    }



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