javascript 裁剪在画布中显示的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28538913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Crop an image displayed in a Canvas
提问by Alexander Dayan
I have a canvas tag:
我有一个画布标签：
<canvas width="321" height="240" id="img_source"></canvas>
I want to add a crop functionality, so I made a resizeable div that can identify the borders of cropped image through dragging the corners of the div using the mouse. It looks like the image below:
我想添加裁剪功能，所以我制作了一个可调整大小的 div，它可以通过使用鼠标拖动 div 的角来识别裁剪图像的边框。它看起来像下图：
I'm currently using "toDataURL()" to convert the data from the canvass to an image that can be displayed by an <img>tag. My question is, How will I convert to an image only part of the canvas that was identified by the resizeable div?
我目前正在使用“toDataURL()”将画布中的数据转换为可以由<img>标签显示的图像。我的问题是，如何将可调整大小的 div 识别的画布的一部分转换为图像？
回答by Alexander Dayan
Use the method getImageDatawith the selected rectangle coordinates. For example:
getImageData对选定的矩形坐标使用该方法。例如：
var imageData = ctx.getImageData(65, 60, 100, 100);
Then create a secondary canvas with the desired sizes and use puImageDatato set the pixels:
然后创建一个具有所需大小的辅助画布并用于puImageData设置像素：
var canvas1 = document.createElement("canvas");
canvas1.width = 100;
canvas1.height = 100;
var ctx1 = canvas1.getContext("2d");
ctx1.rect(0, 0, 100, 100);
ctx1.fillStyle = 'white';
ctx1.fill();
ctx1.putImageData(imageData, 0, 0);
Finally use toDataURLto update the image:
最后用于toDataURL更新图像：
dstImg.src = canvas1.toDataURL("image/png");
See the full sample I've prepared for you in CodePen
在CodePen 中查看我为您准备的完整示例
回答by Alexander Dayan
Create a new canvas at destination size, draw in the cropped image using drawImage() and insert that canvas into the DOM avoiding using img and data-uri:
以目标大小创建一个新画布，使用 drawImage() 在裁剪后的图像中绘制并将该画布插入到 DOM 中，避免使用 img 和 data-uri：
var ccanvas = document.createElement("canvas"),
cctx = ccanvas.getContext("2d");
ccanvas.width = w;
ccanvas.height = h;
// draw with crop arguments
cctx.drawImage(image_src, x, y, w, h, 0, 0, w, h);
// ^^^^^^^^^^ source region
// ^^^^^^^^^^ dest. region
// insert cropped image somewhere in the DOM tree:
document.body.appendChild(ccanvas);
window.onload = function() {
var img = document.getElementById("image_src");
document.body.appendChild(region2canvas(img, 150, 60, 220, 200));
}
function region2canvas(img, x, y, w, h) {
var ccanvas = document.createElement("canvas"),
cctx = ccanvas.getContext("2d");
ccanvas.width = w;
ccanvas.height = h;
// draw with crop arguments
cctx.drawImage(img, x, y, w, h, 0, 0, w, h);
return ccanvas;
}<img src="http://i.imgur.com/kWI4Cmz.png" id="image_src">回答by Anuj Sain
The key to cropping from one image is that the context's drawImage method allows us to render a cropped section of the source image to the canvas.
从一张图像裁剪的关键是上下文的 drawImage 方法允许我们将源图像的裁剪部分渲染到画布上。
context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
img- Source image object
sx- Source x
sy- Source y
sw- Source width
sh- Source height
dx- Destination x
dy- Destination y
dw- Destination width
dh- Destination height
img-源图像对象
sx-源 x
sy-源 y
sw-源宽度
sh-源高度
dx-目标 x
dy-目标 y
dw-目标宽度
dh-目标高度
回答by Anuj Sain
Create a new canvas, and copy the selected portion to that new canvas, and then get the toDataURL() from that new canvas.
创建一个新画布，并将所选部分复制到该新画布，然后从该新画布中获取 toDataURL()。
