javascript将图像裁剪为画布

本文介绍了javascript将图像裁剪为画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想基于特定区域裁剪图像，下面的示例如何裁剪图像，使其成为蓝线内的东西（像素，数据......），并删除外面的东西（像素，数据......）盒子？I want to crop the image based on specific area, below example how to crop image so it becomes only the things (pixel, data...) inside blue line, and delete things (pixel, data...) outside the box?下面的代码就是我尝试过的，画布后绘制新图像，不正确的区域我想要什么，我想念一些东西，如何解决？Below code is what I tried, after canvas draw new image, not correct area what I want, do I miss something, how to fix it ?任何建议都将不胜感激。 请不要提供插件作为答案，而css crop不是我想要的。Any suggestion will be appreciated.Please don't provide plugin as an answer, and css crop is not what I'm looking for. UPDATE https://jsfiddle.net/xqpdtq76/ 我更新小提琴在代码下面，图像naturalWidth与css宽度不同，所以我需要转换裁剪x，y，宽度，高度（sx，sy，sw，sh）以适合自然图像大小并裁剪图像。 结果似乎可以裁剪正确的区域，但图像尺度不正确..我不明白为什么UPDATEhttps://jsfiddle.net/xqpdtq76/I update the fiddle and below code, the image naturalWidth is different with css width, so I need to convert the crop x,y,width,height (sx,sy,sw,sh) to fit the natural image size and crop the image.the result it seems work to crop the correct area but image is not correct scale .. I don't get whyvar crop = function() { var transformMediaBlock = $('.mediaBlock'); var transformCropInner = $('.transformCropInner'); var transformCropLimit = $('.transformCropLimit'); var canvasContainer = $('.canvasContainer') var canvasWidth = $(transformCropLimit).width(); var canvasHeight = $(transformCropLimit).height(); var canvas = $('<canvas/>',{'class':''}).width(canvasWidth).height(canvasHeight); canvas = canvas.appendTo($(canvasContainer)); var ctx = canvas[0].getContext('2d');var limitLeft = transformCropLimit.offset().left; var limitTop = transformCropLimit.offset().top; var limitRight = limitLeft + transformCropLimit.width(); var limitBottom = limitTop + transformCropLimit.height(); console.log('limitLeft:'+limitLeft) console.log('limitRight:'+limitRight) var imageLeft = transformMediaBlock.find('img').offset().left; var imageTop = transformMediaBlock.find('img').offset().top; var imageRight = imageLeft + transformMediaBlock.find('img').width(); var imageBottom = imageTop + transformMediaBlock.find('img').height(); console.log('imageLeft:'+imageLeft) console.log('imageRight:'+imageRight) if (limitLeft <= imageLeft) { var sx = 0; } else { var sx = limitLeft - imageLeft; } console.log('sx:'+sx) if (limitTop <= imageTop) { var sy = 0; } else { var sy = limitTop - imageTop; } console.log('sy:'+sy) if (limitLeft <= imageLeft) { var l = imageLeft; } else { var l = limitLeft; } if (limitRight <= imageRight) { var r = limitRight; } else { var r = imageRight; } var sw = r - l; console.log('sw:'+sw) if (limitTop <= imageTop) { var t = imageTop; } else { var t = limitTop; } if (limitBottom <= imageBottom) { var b = limitBottom; } else { var b = imageBottom; } var sh = b - t; console.log('sh:'+sh); var dx = 0; var dy = 0; var dw = sw; var dh = sh; console.log('naturalWidth:'+transformMediaBlock.find('img')[0].naturalWidth); console.log('naturalHeight:'+transformMediaBlock.find('img')[0].naturalHeight); console.log('cssWidth:'+transformMediaBlock.find('img').width()); console.log('cssHeight:'+transformMediaBlock.find('img').height()); var ratio = (transformMediaBlock.find('img')[0].naturalWidth / transformMediaBlock.find('img').width()); console.log('ratio:'+ratio); sx = sx*ratio; sy = sy*ratio; sw = sw*ratio; sh = sh*ratio; console.log('sx*ratio:'+sx) console.log('sy*ratio:'+sy) console.log('sw*ratio:'+sw) console.log('sh*ratio:'+sh) ctx.drawImage(transformMediaBlock.find('img')[0], sx, sy, sw, sh, dx, dy, dw, dh );};$('#container').on('click', '.action.crop', function (e) { var transformMediaBlock = $('.mediaBlock'); transformMediaBlock.find('img').on('load', function() { crop(); }).each(function() { if(this.complete) $(this).load(); });});.mediaBlock { position: relative; display: block; overflow: hidden;}.mediaBlock img { max-width: 100%;}.transformCropLimit { position: relative; top: 20px; left: 20px; width: 200px; height: 200px; border: 1px solid blue;}.transformCropInner { width: 300px; cursor: pointer; position: relative; top: 10px; left: 10px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container"> <div class="content main"> <div class="transformCropLimit"> <div class="transformCropInner"> <div class="mediaBlock"> <img src="http://i.imgur.com/EdQs9jA.jpg"> </div> </div> </div> <div class="action crop">Crop</div> </div> <div class="canvasContainer"></div></div>推荐答案 裁剪图像 创建一个裁剪区域大小的画布，然后在该画布上绘制图像。例如，如果您有500 x 400的图像，并且想要将其裁剪到左上角100,100，右下角200,200To crop imageCreate a canvas the size of the crop area, then draw the image on that canvas. For example if you have a 500 by 400 image and you want to crop it to the top left 100,100, and bottom right 200,200var crop = { top : 100, left : 100, right : 200, bottom : 200,}创建正确宽度和高度的画布Create a canvas the correct width and heightvar canvas = document.createElement("canvas");canvas.width = crop.right - crop.left;canvas.height = crop.bottom - crop.top;然后将图像绘制到该画布上，使左上角100,100位于画布原点0,0Then draw the image onto that canvas so that the top left 100,100 is at the canvas origin 0,0var ctx = canvas.getContext("2d"); // so we can drawctx.drawImage(image, -crop.left, -crop.top);这就是你创建裁剪图像的方法（Note canvas是一个HTMLImageElement）And that is how you create a cropped image (Note canvas is a HTMLImageElement)var w = image.width;var h = image.height;您可以在画布上按比例绘制and you draw it on a canvas at a scalevar myScale = 0.5; // half scale你想通过缩放的画布坐标裁剪它and you want to crop it via the scaled canvas coordinatesvar crop = { // the canvas coordinate system top : 100, left : 100, right : 200, bottom : 200,}您的图像缩放在画布坐标系左上角为（0,0），宽度和高度为 w * scale ， h * scale 要裁剪它，只需在绘制时缩放图像。Your image scaled is in the canvas coordinate system with top left at (0,0) and its width and height are w * scale, h * scale To crop it just scale the image when you draw it.创建画布。var canvas = document.createElement("canvas");canvas.width = crop.right - crop.left;canvas.height = crop.bottom - crop.top;在图像坐标中绘制缩放和偏移的图像draw the image scaled and offset in the image coordinatesvar ctx = canvas.getContext("2d"); // so we can drawctx.scale(scale,scale);ctx.drawImage(image, -crop.left / scale, -crop.top / scale); // convert offset to // image coordinate system 这篇关于javascript将图像裁剪为画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！