Question

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

我想要找到的最重要的事情是裁剪工具，裁剪图像时不会使裁剪后的图像分辨率降低。您可以通过调整图像大小来使用canvas标记来破解它。这样，图像本身保持原生，只有表示更小。 DarkroomJS也是解决方案的附近，但不幸的是，下载的演示无效。我试着弄清楚什么是错的。有人知道一些很好的选择，或者如何获得裁剪的图像......让我们说＆＃34; native＆＃34;分辨率？

提前致谢！

Answer 1

您依靠裁剪工具为用户提供界面。问题是返回的图像的大小是界面而不是原始图像。而不是我筛选各种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

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

1 个答案: