How to edit and manipulate images on canvas

This time I will show you how to edit and operate images on canvas, and what are the precautions for editing and operating images on canvas. The following is a practical case, let's take a look.

This article will be divided into several small functions to introduce canvas image editing in detail

Zoom

The following is an analysis chart. It is assumed that by default, the image and canvas have the same width and height. The scale range of the image is 0.5 to 3. What changes when scaling is the size and coordinate position of the image

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

Therefore, the code is as follows:

<canvas>
<p>The canvas element is not supported!</p>
</canvas>
<br>
<input>
<script>
var drawing = document.getElementById(&#39;drawing&#39;);
if(drawing.getContext){
 var context = drawing.getContext(&#39;2d&#39;);
 var slider = document.getElementById(&#39;scale-range&#39;);
 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>

Watermark

You can use canvas to add watermarks to pictures. First select the picture through the reader of the file control, then use canvas

to add the picture and watermark, and use toDataURL() and the a tag to download the watermarked picture. Function

<canvas>
<p>The canvas element is not supported!</p>
</canvas>
<p>
<span>
<input>
<button>选择图片</button>
</span>
<span>
  <button>添加水印</button> 
  <span>水印文字为</span>
  <input>   
 </span>
 <span>
  <button>下载图片</button>
  <a></a>  
 </span>
</p>
<script>
if(drawing.getContext){
 var cxt = drawing.getContext(&#39;2d&#39;);
 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 = &#39;1&#39;;
       cxt.fillStyle = &#39;rgba(255,255,255,0.5)&#39;;
       cxt.textBaseline = "bottom";
       cxt.textAlign = &#39;end&#39;;
       cxt.fillText(str,W-10,H-10,W/2);  
       downloadImg.onclick = function(){
        downloadImgHelper.href = drawing.toDataURL(&#39;image/png&#39;);
        downloadImgHelper.click();    
       }  
     } 
    }
   }   
  }      
 }        
}
</script>

Magnifying glass

Let's implement the effect of a magnifying glass. When the mouse is pressed and moved, the magnification effect of the current picture area is displayed. When the mouse is lifted, the effect disappears.

Magnifying glass effect Mainly uses the technology of off-screen canvas. The off-screen canvas places a magnified version of the picture, while the ordinary canvas places the normal version of the picture

<canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<script>
if(drawing.getContext){
 var cxt = drawing.getContext(&#39;2d&#39;);
 var cxtOff = drawingOff.getContext(&#39;2d&#39;);
 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 = &#39;#069&#39;;
    cxt.stroke();
    cxt.clip();
    cxt.drawImage(drawingOff,sx,sy,2*r,2*r,dx,dy,2*r,2*r);
    cxt.restore();     
   }
  }
 } 
}
</script>

Filter

Next, use the getImageData() method of canvas to obtain the original image data, modify the image data, and then output the modified image data

<canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<br>
<button>无绿色</button>
<button>无蓝色</button>
<button>灰度</button>
<button>黑白</button>
<button>反色</button>
<script>
if(drawing1.getContext){
 var cxt1 = drawing1.getContext(&#39;2d&#39;);
 var cxt2 = drawing2.getContext(&#39;2d&#39;);
 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>

Mosaic effect

[Normal blur effect]

The ordinary blur effect not only needs to use the current pixel, but also needs to use the surrounding pixels, and assign these pixels to the average value

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 
【Mosaic effect】<p style="text-align: left;"></p>
The mosaic effect is to assign all the values ​​​​of an area to the average value<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">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 
The following is an example <p style="text-align: left;"></p><pre class="brush:php;toolbar:false"><canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<canvas>
  <p>The canvas element is not supported!</p>
</canvas>
<br>
<button>轻度模糊</button>
<button>重度模糊</button>
<button>轻度马赛克</button>
<button>重度马赛克</button>
<script>
if(drawing1.getContext){
 var cxt1 = drawing1.getContext(&#39;2d&#39;);
 var cxt2 = drawing2.getContext(&#39;2d&#39;);
 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 < 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of js publisher-subscriber model

node.js operates audio and video files for encryption

The above is the detailed content of How to edit and manipulate images on canvas. For more information, please follow other related articles on the PHP Chinese website!