canvas使用说明,canvas实现图片裁剪
canvas使用步骤:
首先,找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d");
绘图:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
保存绘制的图片数据
<canvas id="canvas" width="5" height="5"></canvas>
获取画布的数据
var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
使用jpegs设置图像质量
var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
利用canvas实现客户端截图:
下面这个函数可以实现截图功能,写的比较实用改起来很方便,详情使用看下面
/** * canvas对图片进行裁剪 * @param string canvasId canvas标签的ID * @param string imageSource 图片的src * @param int x 开始坐标x * @param int y 开始坐标y * @param int width 宽度 * @param int height 高度 */ var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var canvas = $("#" + canvasId); if (canvas.length == 0 && imageSource) { return; } function canvasMouseDown(e) { StopSelect(e); canvas.css("cursor", "default"); } function canvasMouseMove(e) { var canvasOffset = canvas.offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); canvas.css("cursor", "default"); if (selectObj.bDragAll) { canvas.css("cursor", "move"); canvas.data("drag", true); var cx = iMouseX - selectObj.px; cx = cx < 0 ? 0 : cx; mx = ctx.canvas.width - selectObj.w; cx = cx > mx ? mx : cx; selectObj.x = cx; var cy = iMouseY - selectObj.py; cy = cy < 0 ? 0 : cy; my = ctx.canvas.height - selectObj.h; cy = cy > my ? my : cy; selectObj.y = cy; } for (var i = 0; i < 4; i++) { selectObj.bHow[i] = false; selectObj.iCSize[i] = selectObj.csize; } // hovering over resize cubes if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[0] = true; selectObj.iCSize[0] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[1] = true; selectObj.iCSize[1] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[2] = true; selectObj.iCSize[2] = selectObj.csizeh; } if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[3] = true; selectObj.iCSize[3] = selectObj.csizeh; } if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) { canvas.css("cursor", "move"); } // in case of dragging of resize cubes var iFW, iFH, iFX, iFY, mx, my; if (selectObj.bDrag[0]) { iFX = iMouseX - selectObj.px; iFY = iMouseY - selectObj.py; iFW = selectObj.w + selectObj.x - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[1]) { iFX = selectObj.x; iFY = iMouseY - selectObj.py; iFW = iMouseX - selectObj.px - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[2]) { iFX = selectObj.x; iFY = selectObj.y; iFW = iMouseX - selectObj.px - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (selectObj.bDrag[3]) { iFX = iMouseX - selectObj.px; iFY = selectObj.y; iFW = selectObj.w + selectObj.x - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) { selectObj.w = iFW; selectObj.h = iFH; selectObj.x = iFX; selectObj.y = iFY; } drawScene(); } function canvasMouseOut() { $(canvas).trigger("mouseup"); } function canvasMouseUp() { selectObj.bDragAll = false; for (var i = 0; i < 4; i++) { selectObj.bDrag[i] = false; } canvas.css("cursor", "default"); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); selectObj.px = 0; selectObj.py = 0; } function Selection(x, y, w, h) { this.x = x; // initial positions this.y = y; this.w = w; // and size this.h = h; this.px = x; // extra variables to dragging calculations this.py = y; this.csize = 4; // resize cubes size this.csizeh = 6; // resize cubes size (on hover) this.bHow = [false, false, false, false]; // hover statuses this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes this.bDrag = [false, false, false, false]; // drag statuses this.bDragAll = false; // drag whole selection } Selection.prototype.draw = function () { ctx.strokeStyle = '#666'; ctx.lineWidth = 2; ctx.strokeRect(this.x, this.y, this.w, this.h); // draw part of original image if (this.w > 0 && this.h > 0) { ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); } // draw resize cubes ctx.fillStyle = '#999'; ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); }; var drawScene = function () { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); // and make it darker ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw selection selectObj.draw(); canvas.mousedown(canvasMouseDown); canvas.on("touchstart", canvasMouseDown); }; var createSelection = function (x, y, width, height) { var content = $("#imagePreview"); x = x || Math.ceil((content.width() - width) / 2); y = y || Math.ceil((content.height() - height) / 2); return new Selection(x, y, width, height); }; var ctx = canvas[0].getContext("2d"); var iMouseX = 1; var iMouseY = 1; var image = new Image(); image.onload = function () { selectObj = createSelection(x, y, width, height); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); drawScene(); }; image.src = imageSource; canvas.mousemove(canvasMouseMove); canvas.on("touchmove", canvasMouseMove); var StopSelect = function (e) { var canvasOffset = $(canvas).offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; if (selectObj.bHow[0]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[1]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[2]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (selectObj.bHow[3]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (iMouseX > selectObj.x + selectObj.csizeh && iMouseX < selectObj.x + selectObj.w - selectObj.csizeh && iMouseY > selectObj.y + selectObj.csizeh && iMouseY < selectObj.y + selectObj.h - selectObj.csizeh) { selectObj.bDragAll = true; } for (var i = 0; i < 4; i++) { if (selectObj.bHow[i]) { selectObj.bDrag[i] = true; } } }; canvas.mouseout(canvasMouseOut); canvas.mouseup(canvasMouseUp); canvas.on("touchend", canvasMouseUp); this.getImageData = function (previewID) { var tmpCanvas = $("<canvas></canvas>")[0]; var tmpCtx = tmpCanvas.getContext("2d"); if (tmpCanvas && selectObj) { tmpCanvas.width = selectObj.w; tmpCanvas.height = selectObj.h; tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h); if (document.getElementById(previewID)) { document.getElementById(previewID).src = tmpCanvas.toDataURL(); document.getElementById(previewID).style.border = "1px solid #ccc"; } return tmpCanvas.toDataURL(); } }; }
crossorigin属性
浏览器对于不同源的内容进行的安全限制当然不仅限于 <script> 标签。既然 XMLHttpRequest 可以通过 CORS 来突破这个限制,为什么直接通过标签引用的资源就不可以呢?这当然是可以的。
针对 <script> 标签引用不同源脚本文件的限制同样作用于 <img> 标签引用不同源图片文件。如果一个 <img> 标签是不同源的话,一旦在 <canvas> 绘图时用到了,该 <canvas> 将变为只写状态,保证网站不能通过 JavaScript 窃取未授权的不同源图片数据。后来 <img> 标签通过引入 crossorigin 属性解决了这个问题。如果使用 crossorigin="anonymous",则相当于匿名 CORS;如果使用 `crossorigin=“use-credentials”,则相当于带认证的 CORS。
既然 <img> 标签能这样做,为什么 <script> 标签就不能这样做?于是浏览器厂商就为 <script> 标签加入了同样的 crossorigin 属性用于解决上述安全限制问题。现在 Chrome 和 Firefox 对这个属性的支持是完全没有问题的。Safari 则会把 crossorigin="anonymous" 当做 crossorigin="use-credentials" 处理,结果是如果服务器只支持匿名 CORS 则 Safari 会当做认证失败。由于 CDN 服务器出于性能的考虑被设计为只能返回静态内容,不可能动态的根据请求返回认证 CORS 所需的 HTTP Header,Safari 相当于不能利用此特性来解决上述问题。
html代码:
<button id="download">下载</button><br/> <canvas id="canvasID"></canvas> <img id="preview" style="max-width:300px;" src=""/>
javascript代码:
<script> var c = null; var image = document.createElement('img'); image.src = "http://img.chuxiangyi.com/{$_GET['key']}_800x800.jpg"; image.crossOrigin = "*"; image.onload = function (){ canvas = document.getElementById('canvasID'); canvas.width = this.width; canvas.height = this.height; var imageSource = this.src; var width = 200; var height = 200; var x = (canvas.width - width)/2; var y = (canvas.height - height)/2; c = new ImageCrop('canvasID', imageSource, x, y, width, height); } $('#download').click(function (){ data = c.getImageData('preview'); data = data.replace(/^data:image\/(png|jpeg);base64,/, ""); $.post('__MODULE__/OSS/uploadImage',{data:data},function (data,status){ if(status == 'success'){ if(data.status == 1){ alert(data.info); }else{ alert(data.info); } } }); }); </script>
可能会遇到的错误:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
解决方案1.
如果想使用toDataURL()生成图片文件的话,在canvas绘图过程中使用的图片应该是当前域下的。
解决方案2.
访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin
然后在客户端访问图片资源的时候