masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

canvas怎么编辑操作图像

php中世界最好的语言
Lepaskan： 2018-04-18 15:28:37
asal
2500 orang telah melayarinya

这次给大家带来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;
Salin selepas log masuk

因此，代码如下：

<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>
Salin selepas log masuk

水印

利用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>
Salin selepas log masuk

放大镜

下面来实现一个放大镜的效果，鼠标按下并移动时，显示当前图片区域的放大效果，抬起后效果消失。放大镜效果主要使用离屏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>
Salin selepas log masuk

滤镜

下面利用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>
Salin selepas log masuk

马赛克效果

【普通模糊效果】

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

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); 
  }
Salin selepas log masuk

【马赛克效果】

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

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); 
  }
Salin selepas log masuk

下面是一个实例


  
The canvas element is not supported!



  
The canvas element is not supported!








<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>
Salin selepas log masuk

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

推荐阅读：

js发布者订阅者模式使用详解

node.js操作音视频文件进行加密

Atas ialah kandungan terperinci canvas怎么编辑操作图像. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
canvas 图像 操作
sumber：php.cn
Artikel sebelumnya：js如何设置禁止表单重复提交 Artikel seterusnya：jQuery实现计时器功能详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Dapatkan *dua* nilai ketinggian kanvas? Saya cuba mendapatkan dua nilai ketinggian kanvas ini. <canvaswidth="886"heig...
daripada 2024-04-05 09:32:33
0
1
1360
Bagaimana untuk mengeksport jpg daripada berbilang kanvas Saya mempunyai berbilang kanvas yang digunakan sebagai lapisan. canvasc1=backgroundimage.c...
daripada 2024-04-03 21:02:43
0
1
319
Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada? Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas ...
daripada 2024-03-30 09:57:49
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan