Image 如何从画布上获得高质量的裁剪图像？

我正在拼命寻找一个好的裁剪工具。有很多，例如：

我试图找到的最重要的东西是一个裁剪工具，它可以裁剪图像而不会使裁剪后的图像分辨率降低。您可以通过调整图像的大小来使用canvas标记来解决这个问题。这样，图像本身就保持原生状态，只有表示更小。 也接近解决方案，但不幸的是，下载的演示无法工作。我会试着找出问题所在。有人知道一些很好的替代方案吗，或者如何获得裁剪后的图像…比如说“本地”分辨率

---

提前谢谢

您依赖裁剪工具为用户提供界面。问题是返回的图像的大小是根据接口设置的，而不是原始图像。我没有仔细检查各种API，看看它们是否提供了某种控制这种行为的方法（我假设至少有一些API会），因为这是一个非常简单的过程，我将演示如何手动裁剪图像

以JCrop为例

Jcrop为cropstart、cropmove、cropend提供各种活动。。。您可以添加侦听器来侦听这些事件，并保留当前裁剪接口状态的副本

var currentCrop;    
jQuery('#target').on('cropstart cropmove cropend',function(e,s,crop){
    currentCrop = crop;
}

我不知道您在哪里设置了界面大小，我假设事件返回界面比例的裁剪细节

var interfaceSize = { //you will have to work this out
     w : ?,
     h : ?.
}

你的原始图像

var myImage = new Image(); // Assume you know how to load 

因此，当单击“裁剪”按钮时，您可以通过将裁剪细节缩放回原始图像大小、以裁剪大小创建画布、绘制图像以正确定位裁剪区域并将画布原样或作为新图像返回来创建新图像

// image = image to crop
// crop = the current cropping region
// interfaceSize = the size of the full image in the interface
// returns a new cropped image at full res
function myCrop(image,crop,interfaceSize){
     var scaleX = image.width / interfaceSize.w; // get x scale
     var scaleY = image.height / interfaceSize.h; // get y scale
     // get full res crop region. rounding to pixels
     var x = Math.round(crop.x * scaleX);
     var y = Math.round(crop.y * scaleY);
     var w = Math.round(crop.w * scaleX);
     var h = Math.round(crop.h * scaleY);
     // Assume crop will never pad
     // create an drawable image
     var croppedImage = document.createElement("canvas");
     croppedImage.width = w;
     croppedImage.height = h;
     var ctx = croppedImage.getContext("2d");
     // draw the image offset so the it is correctly cropped
     ctx.drawImage(image,-x,-y);
     return croppedImage
}

然后，您只需要在单击裁剪按钮时调用此函数

var croppedImage;
myButtonElement.onclick = function(){
    if(currentCrop !== undefined){ // ensure that there is a selected crop
        croppedImage = myCrop(myImage,currentCrop,interfaceSize);             
    }
}

您可以将图像转换为dataURL进行下载，然后通过

imageData = croppedImage.toDataURL(mimeType,quality) // quality is optional and only for "image/jpeg" images

---

您依赖裁剪工具为用户提供一个界面。问题是返回的图像的大小是根据接口设置的，而不是原始图像。我没有仔细检查各种API，看看它们是否提供了某种控制这种行为的方法（我假设至少有一些API会），因为这是一个非常简单的过程，我将演示如何手动裁剪图像

以JCrop为例

Jcrop为cropstart、cropmove、cropend提供各种活动。。。您可以添加侦听器来侦听这些事件，并保留当前裁剪接口状态的副本

var currentCrop;    
jQuery('#target').on('cropstart cropmove cropend',function(e,s,crop){
    currentCrop = crop;
}

我不知道您在哪里设置了界面大小，我假设事件返回界面比例的裁剪细节

var interfaceSize = { //you will have to work this out
     w : ?,
     h : ?.
}

你的原始图像

var myImage = new Image(); // Assume you know how to load 

因此，当单击“裁剪”按钮时，您可以通过将裁剪细节缩放回原始图像大小、以裁剪大小创建画布、绘制图像以正确定位裁剪区域并将画布原样或作为新图像返回来创建新图像

// image = image to crop
// crop = the current cropping region
// interfaceSize = the size of the full image in the interface
// returns a new cropped image at full res
function myCrop(image,crop,interfaceSize){
     var scaleX = image.width / interfaceSize.w; // get x scale
     var scaleY = image.height / interfaceSize.h; // get y scale
     // get full res crop region. rounding to pixels
     var x = Math.round(crop.x * scaleX);
     var y = Math.round(crop.y * scaleY);
     var w = Math.round(crop.w * scaleX);
     var h = Math.round(crop.h * scaleY);
     // Assume crop will never pad
     // create an drawable image
     var croppedImage = document.createElement("canvas");
     croppedImage.width = w;
     croppedImage.height = h;
     var ctx = croppedImage.getContext("2d");
     // draw the image offset so the it is correctly cropped
     ctx.drawImage(image,-x,-y);
     return croppedImage
}

然后，您只需要在单击裁剪按钮时调用此函数

var croppedImage;
myButtonElement.onclick = function(){
    if(currentCrop !== undefined){ // ensure that there is a selected crop
        croppedImage = myCrop(myImage,currentCrop,interfaceSize);             
    }
}

您可以将图像转换为dataURL进行下载，然后通过

imageData = croppedImage.toDataURL(mimeType,quality) // quality is optional and only for "image/jpeg" images

---

它们都返回图像的本机分辨率，减去裁剪的像素，所以我有点不明白你的意思。你能提供一个显示问题的示例图像，以及一个你期望结果的图像，以便我们可以看到问题是什么。嗨，盲！谢谢你的评论。后面有个问题。我现在用的是腋窝。我的意思是，裁剪的图像取决于“图像预览”窗口的大小。如果我有一张大图片，比如1920x1080px，我想裁剪一个选定的区域，而我的“图像预览”窗口是40x40px，我将得到一张40x40px的图像，即使该区域像500x500px。有没有办法通过更小的图像预览尺寸来实现500x500px？它们都返回图像的本机分辨率，减去被裁剪的像素，所以我有点不明白你的意思。你能提供一个显示问题的示例图像，以及一个你期望结果的图像，以便我们可以看到问题是什么。嗨，盲！谢谢你的评论。后面有个问题。我现在用的是腋窝。我的意思是，裁剪的图像取决于“图像预览”窗口的大小。如果我有一张大图片，比如1920x1080px，我想裁剪一个选定的区域，而我的“图像预览”窗口是40x40px，我将得到一张40x40px的图像，即使该区域像500x500px。有没有办法实现这个500x500px，通过有一个小得多的图像预览大小？感谢你的答复盲，真的很感激。我会尝试一下，如果还有什么我需要知道的，我会回来的谢谢你的回复，真的很感谢。我会尝试一下，如果还有什么我需要知道的，我会回来的