使用canvas进行图像编辑的实例

W(宽) = canvas.width * scaleH(高) = canvas.height * scalex坐标 = (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 id="drawing" >  <p>The canvas element is not supported!</p></canvas><div> <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></div><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 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 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);   }

<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="toLightBlur">轻度模糊</button><button id="toHeavyBlur">重度模糊</button><button id="toLightMosaic">轻度马赛克</button><button id="toHeavyMosaic">重度马赛克</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);  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>