下面是一张分析图，假设默认情况下，图片和canvas宽高相同。图片的缩放(scale)范围为0.5到3，缩放时改变的是图片的大小和图片的坐标位置
W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2;
因此，代码如下
<canvas > <p>The canvas element is not supported!</p> </canvas> <br> <input 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 > <p>The canvas element is not supported!</p> </canvas> <div> <span> <input type="file" > <button>选择图片</button> </span> <span> <button disabled>添加水印</button> <span>水印文字为</span> <input type="text" value="小火柴的蓝色理想"> </span> <span> <button disabled>下载图片</button> <a href="#" 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的技术，离屏canvas放置的是图片的放大版，而普通canvas则放置图片的正常版
<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('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()方法，获取原始图像数据，通过对图像数据进行修改，然后输出修改后的图像数据