canvas怎么编辑操作图像-js教程-PHP中文网

首页

web前端

js教程

canvas怎么编辑操作图像

php中世界最好的语言

Apr 18, 2018 pm 03:28 PM

canvas 图像操作

这次给大家带来canvas怎么编辑操作图像，canvas编辑操作图像的注意事项有哪些，下面就是实战案例，一起来看一下。

本次文章将分为几个小功能的形式来详细介绍canvas图像编辑

缩放

下面是一张分析图，假设默认情况下，图片和canvas宽高相同。图片的缩放(scale)范围为0.5到3，缩放时改变的是图片的大小和图片的坐标位置

W(宽) = canvas.width * scale
H(高) = canvas.height * scale
x坐标 = (W - canvas.width)/2;
y坐标 = (H - canvas.height)/2;

登录后复制

因此，代码如下：

<canvas id="drawing" >
<p>The canvas element is not supported!</p>
</canvas>
<br>
<input id="scale-range" min="0.5" max="1.5" step="0.01" type="range" >
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
 var context = drawing.getContext('2d');
 var slider = document.getElementById('scale-range');
 var W = 400;
 var H = 290; 
 drawing.width = W; 
 drawing.height = H;
 var image = new Image();
 image.src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";
 image.onload = function(){
  drawImgByScale(slider.value);
  slider.onmousemove = function(){
   drawImgByScale(slider.value);
  }
 }
 function drawImgByScale(scale){
  var imgW = W * scale;
  var imgH = H * scale;
  var dx =(W - imgW)/2;
  var dy =(H - imgH)/2;
  context.clearRect(0,0,W,H);
  context.drawImage(image,dx,dy,imgW,imgH);
 }
} 
</script>

登录后复制

水印

利用canvas可以实现向图片添加水印的功能，先通过file控件的reader选择图片，然后使用canvas添加图片及水印，并且使用toDataURL()和a标签实现添加水印后的图片的下载功能

<canvas id="drawing" >
<p>The canvas element is not supported!</p>
</canvas>
<p>
<span>
<input type="file" id="addImgHelper" >
<button id="addImg">选择图片</button>
</span>
<span>
  <button id="addWaterMark" disabled>添加水印</button> 
  <span>水印文字为</span>
  <input id="waterMarkWords" type="text" value="小火柴的蓝色理想">   
 </span>
 <span>
  <button id="downloadImg" disabled>下载图片</button>
  <a id="downloadImgHelper" href="#" rel="external nofollow" download="带水印图片" ></a>  
 </span>
</p>
<script>
if(drawing.getContext){
 var cxt = drawing.getContext('2d');
 var W,H; 
 addImg.onclick = function(){
  addImgHelper.click();
 }
 addImgHelper.onchange = function(){
  addWaterMark.disabled = true;
  downloadImg.disabled = true;
  var file = addImgHelper.files[0];
  if(file && /image/.test(file.type)){
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(){
    var img = new Image();
    img.src= reader.result;
    img.onload = function(){
     addWaterMark.disabled = false;
     drawing.width = W = img.width;
     drawing.height = H = img.height;
     cxt.drawImage(img,0,0);
     addWaterMark.onclick = function(){
       downloadImg.disabled = false;
       cxt.clearRect(0,0,W,H);
       cxt.drawImage(img,0,0);  
       var str = waterMarkWords.value;
       cxt.font = "bold 50px Arial";
       cxt.lineWidth = '1';
       cxt.fillStyle = 'rgba(255,255,255,0.5)';
       cxt.textBaseline = "bottom";
       cxt.textAlign = 'end';
       cxt.fillText(str,W-10,H-10,W/2);  
       downloadImg.onclick = function(){
        downloadImgHelper.href = drawing.toDataURL('image/png');
        downloadImgHelper.click();    
       }  
     } 
    }
   }   
  }      
 }        
}
</script>

登录后复制

放大镜

下面来实现一个放大镜的效果，鼠标按下并移动时，显示当前图片区域的放大效果，抬起后效果消失。放大镜效果主要使用离屏canvas的技术，离屏canvas放置的是图片的放大版，而普通canvas则放置图片的正常版

<canvas id="drawing" >
  <p>The canvas element is not supported!</p>
</canvas>
<canvas id="drawingOff" >
  <p>The canvas element is not supported!</p>
</canvas>
<script>
if(drawing.getContext){
 var cxt = drawing.getContext('2d');
 var cxtOff = drawingOff.getContext('2d');
 var W,H; 
 var scale = 1.5; 
 var img = new Image();
 img.src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";
 img.onload = function(){
  W = img.width;
  H = img.height;
  drawing.width = W/scale;
  drawing.height = H/scale;
  drawingOff.width = W;
  drawingOff.height = H;
  cxt.drawImage(img,0,0,W/scale,H/scale);
  cxtOff.drawImage(img,0,0);
  drawing.onmousedown = function(e){
   e = e || event;
   var x0 = this.offsetLeft;
   var y0 = this.offsetTop; 
   drawMagnifier(e);
   drawing.onmousemove = function(e){
    drawMagnifier(e);
   }
   document.onmouseup = function(e){
    cxt.clearRect(0,0,W/scale,H/scale);
    cxt.drawImage(img,0,0,W/scale,H/scale);
    drawing.onmousemove = null;
   }    
   function drawMagnifier(e){
    cxt.clearRect(0,0,W/scale,H/scale);
    cxt.drawImage(img,0,0,W/scale,H/scale);
    var x = (e.clientX-x0);
    var y = (e.clientY-y0);    
    var r = 40;
    var dx = x - r;
    var dy = y - r;
    var sx = x*scale - r;
    var sy = y*scale - r;
    cxt.save();
    cxt.beginPath();
    cxt.arc(x,y,r,0,Math.PI*2);
    cxt.lineWidth = 4;
    cxt.strokeStyle = '#069';
    cxt.stroke();
    cxt.clip();
    cxt.drawImage(drawingOff,sx,sy,2*r,2*r,dx,dy,2*r,2*r);
    cxt.restore();     
   }
  }
 } 
}
</script>

登录后复制

滤镜

下面利用canvas的getImageData()方法，获取原始图像数据，通过对图像数据进行修改，然后输出修改后的图像数据

<canvas id="drawing1" >
  <p>The canvas element is not supported!</p>
</canvas>
<canvas id="drawing2" >
  <p>The canvas element is not supported!</p>
</canvas>
<br>
<button id="noGreen">无绿色</button>
<button id="noBlue">无蓝色</button>
<button id="toGrey">灰度</button>
<button id="toBlackWhite">黑白</button>
<button id="reverse">反色</button>
<script>
if(drawing1.getContext){
 var cxt1 = drawing1.getContext('2d');
 var cxt2 = drawing2.getContext('2d');
 var img = new Image();
 img.src="chunfen.jpg";
 img.onload = function(){
  cxt1.drawImage(img,0,0);
  function filter(fn){
   var imageData = cxt1.getImageData(0,0,img.width,img.height); 
   cxt2.clearRect(0,0,drawing2.width,drawing2.height); 
   var data = imageData.data;
   for(var i = 0, len = data.length; i < len; i+=4){
    fn(data,i)
   }
   imageData.data = data;
   cxt2.putImageData(imageData,0,0); 
  }
  function fnNoGreen(data,i){
   data[i+1] = 0;
  }
  function fnNoBlue(data,i){
   data[i+2] = 0;
  } 
  function fnReverse(data,i){
   var red = data[i];
   var green = data[i+1];
   var blue = data[i+2];
   var alpha = data[i+3];
   data[i] = 255 - red;
   data[i+1] = 255 - green;
   data[i+2] = 255 - blue;
  }    
  function fnToGrey(data,i){
   var red = data[i];
   var green = data[i+1];
   var blue = data[i+2];
   var alpha = data[i+3];
   var average = Math.floor((red+green+blue)/3);
   data[i] = data[i+1] = data[i+2] = average;   
  }  
  function fnToBlackWhite(data,i){
   var red = data[i];
   var green = data[i+1];
   var blue = data[i+2];
   var alpha = data[i+3];
   var average = Math.floor((red+green+blue)/3);
   if(average > 255/2){
    var result = 255;
   }else{
    var result = 0;
   }
   data[i] = data[i+1] = data[i+2] = result;    
  }
  toGrey.onclick = function(){
   filter(fnToGrey);
  }
  noGreen.onclick = function(){
   filter(fnNoGreen);
  } 
  noBlue.onclick = function(){
   filter(fnNoBlue);
  } 
  toBlackWhite.onclick = function(){
   filter(fnToBlackWhite);
  }
  reverse.onclick = function(){
   filter(fnReverse);
  } 
 }
}
</script>

登录后复制

马赛克效果

【普通模糊效果】

普通模糊效果不仅需要使用当前像素点，还需要使用周围的像素点，并把这些像素点都赋予平均值

function fnToBlur(n){
   cxt2.clearRect(0,0,drawing2.width,drawing2.height); 
   var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); 
   var tempImageData = imageData;
   var data = imageData.data;
   var tempData = tempImageData.data;
   var blurR = n;
   var totalnum = (2*blurR + 1)*(2*blurR + 1);
   for(var i = blurR; i < drawing2.height - blurR; i++){
    for(var j = blurR; j < drawing2.width - blurR; j++){
     var totalr = 0, totalg = 0, totalb = 0;
     for(var dx = -blurR; dx <= blurR; dx++){
      for(var dy = -blurR; dy <= blurR; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       totalr += tempData[p*4+0];
       totalg += tempData[p*4+1];
       totalb += tempData[p*4+2];
      }
     }
     var p = i*drawing2.width + j;
     data[p*4+0] = totalr / totalnum;
     data[p*4+1] = totalg / totalnum;
     data[p*4+2] = totalb / totalnum;
    }
   }
   imageData.data = data;
   cxt2.putImageData(imageData,0,0); 
  }

登录后复制

【马赛克效果】

马赛克效果则是把一块区域的值，全部都赋予平均值

function fnToMosaic(n){
   cxt2.clearRect(0,0,drawing2.width,drawing2.height); 
   var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); 
   var tempImageData = imageData;
   var data = imageData.data;
   var tempData = tempImageData.data;
   var size = n;
   var totalnum = size*size;
   for(var i = 0; i < drawing2.height; i+=size){
    for(var j = 0; j < drawing2.width; j+=size){
     var totalr = 0, totalg = 0, totalb = 0;
     for(var dx = 0; dx < size; dx++){
      for(var dy = 0; dy < size; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       totalr += tempData[p*4+0];
       totalg += tempData[p*4+1];
       totalb += tempData[p*4+2];
      }
     }
     var p = i*drawing2.width + j;
     var resr = totalr / totalnum;
     var resg = totalg / totalnum;
     var resb = totalb / totalnum;
     for(var dx = 0; dx < size; dx++){
      for(var dy = 0; dy < size; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       data[p*4+0]= resr;
       data[p*4+1]= resg;
       data[p*4+2]= resb;
      }
     }
    }
   }
   imageData.data = data;
   cxt2.putImageData(imageData,0,0); 
  }

登录后复制

下面是一个实例









<script>
if(drawing1.getContext){
 var cxt1 = drawing1.getContext('2d');
 var cxt2 = drawing2.getContext('2d');
 var img = new Image();
 img.src="chunfen.jpg";
 img.onload = function(){
  cxt1.drawImage(img,0,0);
  toLightBlur.onclick = function(){
   fnToBlur(1);
  }
  toHeavyBlur.onclick = function(){
   fnToBlur(3);
  }  
  toLightMosaic.onclick = function(){
   fnToMosaic(4);
  } 
  toHeavyMosaic.onclick = function(){
   fnToMosaic(9);
  }   
  function fnToBlur(n){
   cxt2.clearRect(0,0,drawing2.width,drawing2.height); 
   var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); 
   var tempImageData = imageData;
   var data = imageData.data;
   var tempData = tempImageData.data;
   var blurR = n;
   var totalnum = (2*blurR + 1)*(2*blurR + 1);
   for(var i = blurR; i &lt; drawing2.height - blurR; i++){
    for(var j = blurR; j &lt; drawing2.width - blurR; j++){
     var totalr = 0, totalg = 0, totalb = 0;
     for(var dx = -blurR; dx &lt;= blurR; dx++){
      for(var dy = -blurR; dy &lt;= blurR; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       totalr += tempData[p*4+0];
       totalg += tempData[p*4+1];
       totalb += tempData[p*4+2];
      }
     }
     var p = i*drawing2.width + j;
     data[p*4+0] = totalr / totalnum;
     data[p*4+1] = totalg / totalnum;
     data[p*4+2] = totalb / totalnum;
    }
   }
   imageData.data = data;
   cxt2.putImageData(imageData,0,0); 
  }
  function fnToMosaic(n){
   cxt2.clearRect(0,0,drawing2.width,drawing2.height); 
   var imageData = cxt1.getImageData(0,0,drawing2.width,drawing2.height); 
   var tempImageData = imageData;
   var data = imageData.data;
   var tempData = tempImageData.data;
   var size = n;
   var totalnum = size*size;
   for(var i = 0; i &lt; drawing2.height; i+=size){
    for(var j = 0; j &lt; drawing2.width; j+=size){
     var totalr = 0, totalg = 0, totalb = 0;
     for(var dx = 0; dx &lt; size; dx++){
      for(var dy = 0; dy &lt; size; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       totalr += tempData[p*4+0];
       totalg += tempData[p*4+1];
       totalb += tempData[p*4+2];
      }
     }
     var p = i*drawing2.width + j;
     var resr = totalr / totalnum;
     var resg = totalg / totalnum;
     var resb = totalb / totalnum;
     for(var dx = 0; dx &lt; size; dx++){
      for(var dy = 0; dy &lt; size; dy++){
       var x = i + dx;
       var y = j + dy;
       var p = x*drawing2.width + y;
       data[p*4+0]= resr;
       data[p*4+1]= resg;
       data[p*4+2]= resb;
      }
     }
    }
   }
   imageData.data = data;
   cxt2.putImageData(imageData,0,0); 
  }  
 }
}
</script>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7331

Java教程

1627

CakePHP 教程

1351

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

PyCharm使用教程：详细指引你运行操作 Feb 26, 2024 pm 05:51 PM

PyCharm是一款非常流行的Python集成开发环境（IDE），它提供了丰富的功能和工具，使得Python开发变得更加高效和便捷。本文将为大家介绍PyCharm的基本操作方法，并提供具体的代码示例，帮助读者快速入门并熟练操作该工具。1.下载和安装PyCharm首先，我们需要前往PyCharm官网（https://www.jetbrains.com/pyc

什么是 sudo，为什么它如此重要？ Feb 21, 2024 pm 07:01 PM

sudo（超级用户执行）是Linux和Unix系统中的一个关键命令，允许普通用户以root权限运行特定命令。sudo的功能主要体现在以下几个方面：提供权限控制：sudo通过授权用户以临时方式获取超级用户权限，从而实现了对系统资源和敏感操作的严格控制。普通用户只能在需要时通过sudo获得临时的特权，而不需要一直以超级用户身份登录。提升安全性：通过使用sudo，可以避免在常规操作中使用root账户。使用root账户进行所有操作可能会导致意外的系统损坏，因为任何错误或不小心的操作都将具有完全的权限。而

Linux Deploy的操作步骤及注意事项 Mar 14, 2024 pm 03:03 PM

LinuxDeploy的操作步骤及注意事项LinuxDeploy是一款强大的工具，可以帮助用户在Android设备上快速部署各种Linux发行版，让用户能够在移动设备上体验到完整的Linux系统。本文将详细介绍LinuxDeploy的操作步骤以及注意事项，同时提供具体的代码示例，帮助读者更好地使用这一工具。操作步骤：安装LinuxDeploy：首先在

win10开机密码忘记按F2怎么操作 Feb 28, 2024 am 08:31 AM

想必很多的用户家里都有那么几台不用的电脑，因为长时间不用完全忘记了开机密码，于是想要知道一下，忘记密码要怎么操作呢？那就一起来看看吧。win10开机密码忘记按F2怎么操作1、按下电脑的电源键，然后开机时按下F2（不同电脑品牌进入bios的按键也不同）。2、在bios界面中，找到security选项（不同品牌电脑的位置可能有所不同）。一般都在顶部的设置菜单中。3、然后找到SupervisorPassword选项并且点击。4、这时候用户就可以看到自己的密码了，同时找到旁边的Enabled切换为Dis

华为Mate60 Pro截屏操作步骤分享 Mar 23, 2024 am 11:15 AM

随着智能手机的普及，截屏功能成为日常使用手机的必备技能之一。华为Mate60Pro作为华为公司的旗舰手机之一，其截屏功能自然也备受用户关注。今天，我们就来分享华为Mate60Pro手机的截屏操作步骤，让大家能够更加便捷地进行截屏操作。首先，华为Mate60Pro手机提供了多种截屏方式，可以根据个人习惯选择适合自己的方式进行操作。下面详细介绍几种常用的截

Discuz域名修改操作指南 Mar 09, 2024 pm 04:36 PM

Discuz域名修改操作指南在使用Discuz论坛系统的过程中，有时候我们需要修改论坛的域名。可能是因为需要更换域名，或者是修复一些域名解析的问题。本文将为大家详细介绍如何在Discuz论坛系统中进行域名修改操作，并给出一些具体的代码示例。1.备份数据在进行任何操作之前，我们都要先备份数据，以防止因操作失误导致数据丢失。在Discuz中，可以使用后台的数据备

如何营造不和谐的反动形象？ Feb 19, 2024 pm 09:18 PM

不和谐允许用户创建反应性图像，即使不是创建者也可以使用。本文将介绍如何在不和谐中制作和使用这些反应图像。这个指南适合想要为他们的不和谐游戏增添创意的人。什么是被动图像？反应图像是可以对音频信号做出实时反应的图像，当有声音输入时，图像会有相应的动态效果。这种技术可以应用在各种场景中，如会议中的实时语音转换为视觉效果，或者用于增强虚拟现实体验。这些反应图像可以通过不同的方式制作和添加到系统中，为用户提供更加丰富和沉浸式的交互体验。如何创造不和谐的反应性形象以下是创建不和谐反应图像的两种方法。制作并添

PHP字符串操作：有效去除空格的实用方法 Mar 24, 2024 am 11:45 AM

PHP字符串操作：有效去除空格的实用方法在PHP开发中，经常会遇到需要对字符串进行去除空格操作的情况。去除空格可以使得字符串更加整洁，方便后续的数据处理和显示。本文将介绍几种有效的去除空格的实用方法，并附上具体的代码示例。方法一：使用PHP内置函数trim()PHP内置函数trim()可以去除字符串两端的空格（包括空格、制表符、换行符等），非常方便且简单易用

See all articles

canvas怎么编辑操作图像

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题